menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team

Need help with google maps

January 13, 2020 at 2:53pm

Need help with google maps

January 13, 2020 at 2:53pm
my map is loading and working fine .Now I need that when i drag the map the marker should be fixed in the middle and get the position of the markers on drag stop. Similar to the way uber / ola/ zomatp map works Thanks in advance

January 13, 2020 at 3:42pm
As mentioned in

PSA: Posting etiquette

message-simple
21
Including examples in CodeSandbox of what you have so far, and what you have tried, helps folks better answer your question.

January 13, 2020 at 11:02pm

January 14, 2020 at 5:12am
import React, { Component } from "react"; import logo from "./logo.svg"; import "./App.css"; import axios from "axios"; import Geocode from "react-geocode"; import { geolocated } from "react-geolocated"; import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
Geocode.setApiKey("KEY goes here"); Geocode.setLanguage("en"); Geocode.setRegion("es"); Geocode.enableDebug();
class App extends Component {
render() { let body = <h1>loading...</h1>;
if (this.props.coords) {
body = (
<Map
ref="map"
google={this.props.google}
zoom={14}
initialCenter={{
lat: this.props.coords.latitude,
lng: this.props.coords.longitude
}}
>
</Map>
);
}
return (
<div className="App">
<header className="App-header">{body}</header>
<h1></h1>
</div>
);
} }
export default GoogleApiWrapper({ apiKey: "key goes here" })( geolocated({ positionOptions: { enableHighAccuracy: false }, userDecisionTimeout: 5000 })(App) );
This is what I have written
I am getting the map . Now i need marked that is fixed at the center of the map even while we are dragging tha map . same at it happen in uber ola
I am getting the map . Now i need marked that is fixed at the center of the map even while we are dragging tha map . same at it happen in uber ola

January 14, 2020 at 1:49pm
Use the callback to set the lat and long of the marker you want to center.

January 15, 2020 at 3:13pm
Thanks for the help .But I am not getting the functionality I need .Can you give some idea how to achieve it . I want that the marker should be fixed at the center of the map. we should be able to drag the map and select the location using the marker. For reference check the map in uber/ola app
That is what is described above, could you share a codesandbox of what you tried? https://codesandbox.io
Edited

January 17, 2020 at 7:11am
Are you using any react library for maps integration? In any case, instead of using a Google Map marker, use a separate marker image and absolutely position it at the center of the map using CSS.. this way, the marker won't move as the user drags the map.. once the drag stopped, just query the Map component what's in the center.

January 19, 2020 at 10:47am
but is that the efficient way?

January 20, 2020 at 5:39am
I don't see any problems with this approach.
can I send my map component for review
import React, { Component } from "react"; import Geocode from "react-geocode"; import { geolocated } from "react-geolocated"; import { Map, GoogleApiWrapper } from "google-maps-react"; import classes from "./Map.css"; import { connect } from "react-redux"; import * as actions from "../../Store/Action/Index";
Geocode.setApiKey("KEY GOES HERE");
class GoogleMap extends Component { state = { selectedPlace: "", markerCoordinate: { lat: 0, lng: 0 } };
onMapReady = () => { this.setState({ markerCoordinate: { lat: this.props.coords.latitude, lng: this.props.coords.longitude } });
this.getAddressfromCoordinates(
this.state.markerCoordinate.lat,
this.state.markerCoordinate.lng
);
};
onMarkerDragEnd = ({ latLng }) => { const lat = latLng.lat(); const lng = latLng.lng(); this.setState({ ...this.state, markerCoordinate: { lat, lng } }); this.getAddressfromCoordinates(lat, lng); };
getAddressfromCoordinates = (lat, lng) => { Geocode.fromLatLng(lat, lng).then( response => { const address = response.results[0].formatted_address; this.setState({ selectedPlace: address }); }, error => { console.error(error); } ); };
render() { let body = <h1>loading...</h1>;
if (this.props.coords) {
body = (
<div className={classes.map}>
<Map
ref="map"
google={this.props.google}
zoom={14}
onReady={this.onMapReady}
initialCenter={{
lat: this.props.coords.latitude,
lng: this.props.coords.longitude
}}
onDragend={(_, { center }) =>
this.onMarkerDragEnd({ latLng: center })
}
>
<div
className={classes.centerMarker}
onClick={this.onMarkerClick}
></div>
</Map>
</div>
);
}
return (
<div className={classes.maindiv}>
{body}
<input
readOnly
className={classes.inputbox}
type="text"
placeholder="your selected location"
value={this.state.selectedPlace}
></input>
<button
onClick={() => {
this.props.onmapsave(this.state.selectedPlace);
}}
>
save
</button>
<button onClick={this.props.onmapclose}>close</button>
</div>
);
} }
const mapStatetoProps = state => { return { Visible: state.ContactReducer.Visible, selectedPlace: state.ContactReducer.selectedplace }; };
const mapDispatchtoprops = dispatch => { return { onmapsave: selectedplace => dispatch(actions.mapSave(selectedplace)), onmapclose: () => dispatch(actions.mapClose()) }; };
export default connect( mapStatetoProps, mapDispatchtoprops )( GoogleApiWrapper({ apiKey: "KEY GOES HERE" })( geolocated({ positionOptions: { enableHighAccuracy: false }, userDecisionTimeout: 5000 })(GoogleMap) ) );

January 21, 2020 at 6:12am
Looks good to me. Is the approach working as expected?
just when the location is blocked in the browser the map is not loading
it would be good if the map atleast load at some random location

January 21, 2020 at 6:19pm
The map should load even if the location is blocked.. if it's not loading, then something going wrong. Check the console if it throws any error.

January 22, 2020 at 4:38am
no its just the thing is that the map is not getting the center thats why I think its not lloading

January 23, 2020 at 7:02pm
If location is blocked, then you can not query the user's current location trough the browser. But you should be able to query the Maps SDK what's on the center of the map.