Add Marker function with Google Maps API

Question

I have the following Javascript that includes both the standard Google Maps API initialize   function and custom addMarker   function  The map will load fine however the marker does not get added to the map     lt script type  text javascript  gt          Standard google maps function     function initialize             var myLatlng   new google maps LatLng 40 779502  -73 967857           var myOptions                 zoom  12              center  myLatlng              mapTypeId  google maps MapTypeId ROADMAP                   map   new google maps Map document getElementById  map canvas    myOptions                 Function for adding a marker to the page      function addMarker location            marker   new google maps Marker               position  location              map  map                           Testing the addMarker function     CentralPark   new google maps LatLng 37 7699298  -122 4469157       addMarker CentralPark     lt  script gt

User · Answer

lt div id  map  style  width 100  height 500px  gt  lt  div gt    lt script gt  function myMap       var myCenter   new google maps LatLng 51 508742 -0 120850     var mapCanvas   document getElementById  map      var mapOptions    center  myCenter  zoom  5     var map   new google maps Map mapCanvas  mapOptions     var marker   new google maps Marker  position myCenter      marker setMap map      lt  script gt    lt script src  https   maps googleapis com maps api js key AIzaSyBu-916DdpKAjTmJNIgngS6HL kDIKU0aU amp callback myMap  gt  lt  script gt

User · Answer

You have added the add marker method call outside the function and that causes it to execute before the initialize method which will be called when google maps script loads and thus the marker is not added because map is not initialized Do as below     Create separate method TestMarker and call it from initialize    lt script type  text javascript  gt          Standard google maps function     function initialize             var myLatlng   new google maps LatLng 40 779502  -73 967857           var myOptions                 zoom  12              center  myLatlng              mapTypeId  google maps MapTypeId ROADMAP                   map   new google maps Map document getElementById  map canvas    myOptions           TestMarker                  Function for adding a marker to the page      function addMarker location            marker   new google maps Marker               position  location              map  map                           Testing the addMarker function     function TestMarker                CentralPark   new google maps LatLng 37 7699298  -122 4469157              addMarker CentralPark          lt  script gt

User · Answer

Below code works for me    lt script src  http   maps googleapis com maps api js  gt  lt  script gt   lt script gt      var myCenter   new google maps LatLng 51 528308  -0 3817765        function initialize                var mapProp                 center myCenter              zoom 15              mapTypeId google maps MapTypeId ROADMAP                    var map   new google maps Map document getElementById  googleMap    mapProp             var marker   new google maps Marker               position  myCenter              icon                    url    images marker png                   size  new google maps Size 70  86     marker image size                 origin  new google maps Point 0  0      marker origin                 anchor  new google maps Point 35  86     X-axis value  35  half of marker width  and 86 is Y-axis value  height of the marker                                      marker setMap map                      google maps event addDomListener window   load   initialize     lt  script gt   lt body gt   lt div id  googleMap  style  width 500px height 380px   gt  lt  div gt   lt  body gt    Reference link

User · Answer

THis is other method  You can also use setCenter method with add new marker  check below code       my map   gmap3         action   setCenter         map            options             zoom  10                           marker            values                           latLng  position coords latitude  position coords longitude   data  Netherlands

User · Answer

function initialize         var location   new google maps LatLng 44 5403  -78 5463       var mapCanvas   document getElementById  map canvas        var map options           center  location        zoom  15        mapTypeId  google maps MapTypeId ROADMAP           var map   new google maps Map map canvas  map options        new google maps Marker           position  location          map  map           google maps event addDomListener window   load   initialize

[javascript] Add Marker function with Google Maps API

Examples related to javascript

Examples related to google-maps-api-3

Examples related to google-maps-api-2