Drawing Markers on Map for Google Maps Api V3 in VF page

Question

For some reason the marker is not showing up on this VF page.

<apex:page standardStylesheets="false" >
 <div id="map-canvas" style="min-height: 400px" ></div>
 <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> 
  <script type="text/javascript">
    function initialize() {
     var lat, lon;
     if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(
                 function(position){
                 lat = position.coords.latitude;
                 lon = position.coords.longitude;
                 createMap(37.77493, -122.419416);
                 makeMarker(lat, lon)
                 } 
             )}  
     else
      {

                lat = 37.77493;
                lon = -122.419416;
                createMap(lat, lon)
      }

     }   
    function createMap(lat, lon) { 
    console.log(lat);        
    var mapOptions = {
      center: new google.maps.LatLng(lat, lon),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

     var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }


  function makeMarker(lat, lon) {
      var num = 1;
      console.log('yes');
      var myLatlng = new google.maps.LatLng(lat, lon);
      console.log(myLatlng);
      var marker = new google.maps.Marker({
          position: myLatlng,
          title: 'Click to Zoom',
           icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld='+num+'|FF0000|000000'
      });
      return marker;
  }

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

 </script>

Answer 1

This following works for me. Check your code for syntax errors, or try out my code. All I did was take your code and then cleaned up the functions to make sure everything syntactically looked good.

<apex:page standardStylesheets="false" >
    <div id="map-canvas" style="min-height: 400px" ></div>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript">
        function initialize() {
            console.log('✵✵✵✵✵✵✵✵ initialize() ✵✵✵✵✵✵✵✵');
            var lat, lon, map, marker;
            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position){
                    lat = position.coords.latitude;
                    lon = position.coords.longitude;
                    console.log('lat = '+lat.toString()+' - lon = '+lon.toString());
                    map=getNewMap(lat,lon);
                    marker=getNewMarker(lat,lon,map);
                });
            } else{
                lat = 37.77493;
                lon = -122.419416;
                map=createMap(lat, lon);
            }
        }//END initialize();

        function getNewMap(lat,lon) { 
            console.log('❂❂❂❂❂❂❂❂ createMap('+lat.toString()+', '+lon.toString()+') ❂❂❂❂❂❂❂❂');        
            var mapOptions = {
              center: new google.maps.LatLng(lat, lon),
              zoom: 13,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            return new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        }//END getNewMap(lat,lon)


        function getNewMarker(lat,lon,map) {
            console.log('♓♓♓♓♓♓♓♓ getNewMarker('+lat.toString()+', '+lon.toString()+', '+map.toString()+') ♓♓♓♓♓♓♓♓');
            var num = 1;
            var myLatlng = new google.maps.LatLng(lat, lon);
            //console.log(myLatlng);
            //var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'Click to Zoom',
            });
            return marker;
        }//END getNewMarker(lat,lon,map)

        google.maps.event.addDomListener(window, 'load', initialize); 
    </script>

</apex:page>