Google marker is not being displayed on map

Question

I have written code to display a marker on a googlemap. The code is copied almost verbatim, from the Google API docs. Yet the marker is not displaying on the page.

Here is my code: What am I doing wrong?

var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: central_location,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapCanvas, mapOptions);

}

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

$(document).ready(function() {
  var infowindow = new google.maps.InfoWindow({
    content: '<div>Hello</div>'
  });

  var marker = new google.maps.Marker({
    position: central_location,
    map: map,
    title: 'This is the title'
  });

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

  marker.setMap(map);

});

#map {
  width: 500px;
  height: 380px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map"></div>

I notice that there are similar questions, the only thing that seems to be different with my question is that I am creating my marker in the jQuery ready() event - NOT the initialize() function.

Is this why the marker is not been displayed?

Note: I don't remember reading anything in the Google API docs that states that markers should be created when the map is being created, so that can't obviously be the case

Answer 1

Move your marker creation to the initialize function.

$(document).ready(function(){}) works when DOM elements are loaded, which doesn't necessarily mean that the map is loaded. So if you try to create the marker in the document ready function, the map might not be created then, once the map is ready map variable has the map object, so you can make the marker on that, and you can add the markers dynamically after the map is loaded.

var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
  console.log('map loaded');
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: central_location,
    zoom: 14,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapCanvas, mapOptions);
  makePin(42.745334, 12.738430);
}

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

$(document).ready(function(){
  console.log('document loaded');
})

function makePin(lat, long){
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, long),
    map: map,
    title: 'This is the title'
  });
  var infowindow = new google.maps.InfoWindow({
    content: '<div>Hello</div>'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}    

#map {
  width: 500px;
  height: 380px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
   
<button onclick="makePin(42.749334, 12.739430)">Add Pin</button>
<div id="map"></div>

Answer 2

Here is the solution:

var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: central_location,
    zoom: 14,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
    position: central_location,
    map: map,
    title: 'This is the title'
  });

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

  marker.setMap(map);

}

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

$(document).ready(function() {
  var infowindow = new google.maps.InfoWindow({
    content: '<div>Hello</div>'
  });

});

#map {
  width: 500px;
  height: 380px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map"></div>

Answer 3

How can you make marker without loaded map. Map need to initialize first then marker will work

function initialize() {
                    var mapCanvas = document.getElementById('map');
                    var mapOptions = {
                                          center: central_location,
                                          zoom: 14,
                                          streetViewControl: false,
                                          mapTypeId: google.maps.MapTypeId.ROADMAP
                                     }
                    map = new google.maps.Map(mapCanvas, mapOptions);

                    var marker = new google.maps.Marker({
                        position: central_location,
                        map: map,
                        title: 'This is the title'
                    });

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

                    marker.setMap(map);
             }