All geek questions in one place

Location of flags / marks on google map with location name

Is it possible to mark locations in a Google map dynamically with a location name. The client will provide us with the names of places through the RSS feed. We will capture this location with a php script (this is not a concern) and then want to tag them on a google map.

Let's say we got the address: Weston Town Recreation Department 20 Alphabet Ln, Weston, MA (781), then we should mark it on the googel map

I don’t know much about how to post it or mark it and show it dynamically on a web page, as I am new to this google map

Please help me in this matter.

I also want to add some details to the popup that appears when the mouse is above the mark on the google map, please suggest a solution for this too

+3
source share
1 answer

You want Geocode to specify your addresses, and then results[idx].geometry.locationconfigure the marker. (The google map geocoding page has an example to get you started.)

Google code added here if it ever changes / ceases to exist.

var geocoder, map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map, 
          position: results[0].geometry.location
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

<body onload="initialize()">
 <div id="map_canvas" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>
+3
source

Source: https://habr.com/ru/post/1770335/

More articles:


All Articles