CODEWITHSUNDEEP
javascriptjquerygoogle-maps
EnexoOnoma
EnexoOnoma

Reputation: 8836

Modification to Google Maps Api to show markers based on Country/City name and not on LatLng

With the code below I can center the map to "Vilnius, Lithuania" and to place markers in the map on the locations array.

My question is how can I avoid the LatLng in the loop and just use the names?

var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
function initialize() {
var mapDiv = document.getElementById('map');
    var map;
    var address = "Vilnius, Lithuania";
    var geocoder = new google.maps.Geocoder();
    // Get LatLng information by name
    geocoder.geocode({
        "address": address
        }, function(results, status){
                map = new google.maps.Map(mapDiv, {
                // Center map (but check status of geocoder)
                center: results[0].geometry.location,
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
            })


                var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });



            }
        });

        }
        initialize();

Upvotes: 1

Views: 994

Answers (1)

geocodezip
geocodezip

Reputation: 161334

You need to use a geocoder to convert the names to their coordinates in order to display them on the map.

The Google Maps Javascript API v3 geocoder is subject to a query and a rate limit, you can display about 10 locations on a map without dealing with that.

If you put the addresses of the locations (and some text to display in the infowindow), as long as the addresses are valid and there are less than 10 of them, this will work:

code snippet:

var center = "Vilnius, Lithuania";
var locations = [
  ['Tuskulėnų g. 20, Vilnius 09211, Lithuania', "some info"],
  ['Stumbrų g. 21, Vilnius 08101, Lithuania', "more information"],
  ['Kalvarijų g. 55, Vilnius 09317, Lithuania', "blah, blah"],
  ['Birželio 23-iosios g. 6, Vilnius 03204, Lithuania', "other information"],
  ['Teatro g. 6, Vilnius 03107, Lithuania', "to be determined"]
];


var geocoder;
var map;
var infoWin = new google.maps.InfoWindow();

function initialize() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(
    document.getElementById("map_canvas"));
  // center and zoom map on "center" address
  geocoder.geocode({
    address: center
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.fitBounds(results[0].geometry.bounds);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
  for (var i = 0; i < locations.length; i++) {
    codeAddress(locations[i], i);
  }

}

function codeAddress(location, i) {
  geocoder.geocode({
    'address': location[0]
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        title: "marker " + i,
        position: results[0].geometry.location
      });
      google.maps.event.addListener(marker, 'click', function(evt) {
        infoWin.setContent(location[0] + "<br>" + location[1]);
        infoWin.open(map, this);
      })
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Upvotes: 2

Related Questions