Map Markers do not appear (Javascript Google Maps API)

Question

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.

`marker()` in function initMap() or as a parameter in declaring map variable along with myoptions — office 302, Dec 25 '15 at 21:34
The [posted code works for me](https://jsfiddle.net/crppb4ky/1/embedded/result/) (I see a marker) — geocodezip, Dec 25 '15 at 21:40

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

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


};

Here you can find a working Plunker made with this code + css + html.
If you are doing it with some AngularJS, give a look at my answer to this Question by @Dorin.
Window.OnLoad W3Schools Documentation
Question Related to Window.OnLoad

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

I hope I've been helpful.

edited May 23 '17 at 12:15

Community

1
1

answered Dec 25 '15 at 21:46

AndreaM16

3,917
4
35
74

1

Hi - actually I did try that, and it didn't work - the documentation here states that that option is only needed if you want to add the marker directly: https://developers.google.com/maps/documentation/javascript/markers. neither method produces a marker for me, however. – jeanmw Dec 25 '15 at 23:11
That's weird. Are you using pure javascript or a framework like AngularJS? – AndreaM16 Dec 25 '15 at 23:19
It does show to me with pure Javascript. I edit the answer. – AndreaM16 Dec 25 '15 at 23:30
1

Hm. Thanks for all the helpful info, but unfortunately I've actually tried all of this already and still no marker. Will let you know if I can figure it out...Also, we're not using angular. We are running through express handlebars, this could be the issue. I'll investigate further. – jeanmw Dec 26 '15 at 23:45
Okay, then it has to be something else, because also on the plunker it works. – AndreaM16 Dec 27 '15 at 00:43
1

It turned out to be an issue with the CSS I was using affecting how the map was rendered (in particular the map width). Thanks for all the pointers though - certainly understand more about the maps API after all the investigation! – jeanmw Dec 29 '15 at 22:56

Map Markers do not appear (Javascript Google Maps API)

1 Answers1