CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Stanley Ngumo
Stanley Ngumo

Reputation: 4239

Google Maps API Marker not displaying

I ahve just started using the Goggle Maps API and I have followed all of the instructions but for some reason the Map shows but the Marker to show the specific location is not displaying.

Below is the code I'm using:

function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var myLatIng = new google.maps.LatLng(-1.288902, 36.806304);

    var map_options = {
      center: myLatIng,
      zoom: 19
    }
  var map = new google.maps.Map(map_canvas, map_options);

  var contentString = '<h2>Capacity Development Institute</h2><p>NAS Apartments, Milimani Road,<br>P.O.Box 33411 - 00600, Nairobi, Kenya</p>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

    var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Capacity Development Institute'
      });

    google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
          });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

What exactly am I doing wrong?

Thanks

Upvotes: 0

Views: 2201

Answers (1)

Anto Jurković
Anto Jurković

Reputation: 11258

If you check console log you will see a message:

Uncaught ReferenceError: myLatlng is not defined

You have a typo:

var myLatIng = new google.maps.LatLng(-1.288902, 36.806304);

It should be

var myLatlng= new google.maps.LatLng(-1.288902, 36.806304);

So you have to change it in map_options and marker definition to be the same.

Upvotes: 3

Related Questions