CODEWITHSUNDEEP
javascriptgoogle-maps
jeanmw
jeanmw

Reputation: 466

Map Markers do not appear (Javascript Google Maps API)

I'm trying to implement a marker on a map. I can verify that the map renders correctly at the right center and zoom, but the marker does not show up. 

function initMap() {
  var latLng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}})
  var mapOptions = {
    center: latLng,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var marker = new google.maps.Marker({
      position: latLng,
      visible: true,
      map: map
  });
}

I've also tried the implementation of adding the marker directly using marker.setMap(map):

function initMap() {
var myLatlng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}});
var mapOptions = {
  zoom: 14,
  center: myLatlng
  mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
});

// To add the marker to the map, call setMap();
marker.setMap(map);
}

Neither render a marker. I've noticed that even when I replace the handlebars values for latitude and longitude with numerical coordinates for testing, the marker still does not appear. Any help appreciated!

I'm testing in Chrome.

Upvotes: 1

Views: 1181

Answers (1)

AndreaM16
AndreaM16

Reputation: 3985

You need to use this syntax window.onload = function initMap() and you are not assigning the marker to the map marker.setMap(map);, try in this way:

window.onload = function initMap() {

  //I just put some custom LatLng to make it work
  var LatLng = new google.maps.LatLng(41.9026329,12.452200400000038);

  var mapOptions = {

                     center: LatLng,
                     zoom: 14,
                     mapTypeId: google.maps.MapTypeId.SATELLITE
                   };

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  var marker = new google.maps.Marker({
                                         position: LatLng,
                                         map: map
  });

  marker.setMap(map);


};

If you have still some problems, just let me know.

I hope I've been helpful.

Upvotes: 1

Related Questions