CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Ramesh KC
Ramesh KC

Reputation: 582

How can i pass country_name to show marker on google map api

for(var x in recipient_country){
    var building = recipient_country[x];
    var location = new google.maps.LatLng(building.Country_Name)
    var marker = new MarkerWithLabel({
        position:location,
        title:building.Value,
        map:map,
        labelContent:building.Value,
        labelAnchor: new google.maps.Point(6,22),
        labelClass: "labels", // the CSS class for the label
        labelInBackground: false,
        icon:"circle2.png"
    });
}

I have following json format data

var recipient_country = [
  {"Country_Name": "MYANMAR", "value": 143},
  {"Country_Name": "MONGOLIA", "value": 46},
  {"Country_Name": "ZIMBABWE", "value": 1},
  {"Country_Name": "Bahrain", "value": 1}
];

When I called the Country_name, I cannot see the google marker on my map by accessing the Country_name from data. How can I put marker on google map by accessing the Country_name instead of its latitude and longitude.

Upvotes: 1

Views: 342

Answers (2)

laaposto
laaposto

Reputation: 12213

You can use Google Geocoder.

Try:

geocoder = new google.maps.Geocoder();

for(var x in recipient_country){
     var building = recipient_country[x];

     geocoder.geocode( { 'address': building.Country_Name}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var marker = new MarkerWithLabel({
            position:results[0].geometry.location,
            title:building.Value,
            map:map,
            labelContent:building.Value,
            labelAnchor: new google.maps.Point(6,22),
            labelClass: "labels", // the CSS class for the label
            labelInBackground: false,
            icon:"circle2.png"
    });
           });
        } else {
          console.log("Geocode was not successful for the following reason: " + status);
        }
    });


}

Upvotes: 2

Guria
Guria

Reputation: 7123

You should use Geocoding to lookup the Lat/Lng of the country.

This sample from Google should help you.

var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

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);
    }
  });
}

Upvotes: 1

Related Questions