Posts

Showing posts with the label Google Maps Api 3

Adding Marker To Google Maps In Google-map-react

Answer : Edit: Since this answer was posted the docs (and likely, the API) of the GoogleMapReact element was changed to support children. Any child with lat and lng would be rendered at the corresponding location on the map, as also indicated by @Jobsamuel's answer. The onGoogleApiLoaded callback should not be used for this purpose, as it is inferior to the declarative style and would not be re-run if changes are made to the map. Original answer (outdated): This may not be entirely clear from the description in the Readme, but the maps argument is, in fact, the maps API object (and map is, of course, the current Google Map instance). Therefore, you should pass both to your method: onGoogleApiLoaded={({map, maps}) => this.renderMarkers(map, maps)} and use them: renderMarkers(map, maps) { let marker = new maps.Marker({ position: myLatLng, map, title: 'Hello World!' }); } Adding a marker on your map isn't as easy as we would like to, mo...

Change Google Maps Marker Icon When Clicking On Other

Answer : What duncan said: What you want to do is add all your markers to an array. In your click event handler, loop over that array, updating each marker's icon. Then finally set the icon for just the marker that's been clicked. google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { infowindow.setContent(locations[i][0], locations[i][6]); infowindow.open(map, marker); for (var j = 0; j < markers.length; j++) { markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png"); } marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png"); }; working fiddle working code snippet: var markers = []; var map; function initialize() { map = new google.maps.Map(document.getElementById('map'), { zoom: 12, // center: new google.maps.LatLng(-33.92, 151.25), center: new google.maps.LatLng(36.8857, -7...

Calculate Distance Between Two Points In Google Maps V3

Answer : If you want to calculate it yourself, then you can use the Haversine formula: var rad = function(x) { return x * Math.PI / 180; }; var getDistance = function(p1, p2) { var R = 6378137; // Earth’s mean radius in meter var dLat = rad(p2.lat() - p1.lat()); var dLong = rad(p2.lng() - p1.lng()); var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong / 2) * Math.sin(dLong / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; return d; // returns the distance in meter }; There actually seems to be a method in GMap3. It's a static method of the google.maps.geometry.spherical namespace. It takes as arguments two LatLng objects and will utilize a default Earth radius of 6378137 meters, although the default radius can be overridden with a custom value if necessary. Make sure you include: <script type="text/javascript" src="http://maps.google.co...