javascript - Google marker is not being displayed on map -

i have written code display marker on googlemap. code copied verbatim, google api docs. yet marker not displaying on page.

here code: 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 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 there similar questions, thing seems different question creating marker in jquery ready() event - not initialize() function.

is why marker not been displayed?

note: don't remember reading in google api docs states markers should created when map being created, can't case

move marker creation initialize function.

$(document).ready(function(){}) works when dom elements loaded, doesn't mean map loaded. if try create marker in document ready function, map might not created then, once map ready map variable has map object, can make marker on that, , can add markers dynamically after map 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 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>