在Google地图中添加简单标记时出现问题

Question

我在使用Google地图添加标记时遇到了问题，但在我看来，代码中存在某些内容，如果以下内容太简单无法实现，请耐心等待：

<script type="text/javascript"> 
    google.maps.event.addDomListener(window, 'load', init); 

    function init() { 

     var ll = new google.maps.LatLng(12.0633419, 77.0998847); 

     var mapOptions = { 
      zoom: 12, 
      center: ll, 
      styles: [{ 
       featureType:"all", 
       elementType:"all", 
       stylers: [ 
        { invert_lightness:false }, 
        { saturation:0 }, 
        { lightness:0 }, 
        { gamma:0.5 }, 
        { hue:"#2f7ed8" } 
       ] 
      }] 
     }; 

     // add marker to the map 
     var marker = new google.maps.Marker({ 
      position: ll, 
      icon: ll, 
      map: map, 
      title: 'IT DOES NOT WORK!!!!' 
     }); 
     //marker.setMap(map); 
     //marker.setPosition(ll); 

     var mapElement = document.getElementById('map'); 

     var map = new google.maps.Map(mapElement, mapOptions); 
    } 

</script> 

Answer 1

渲染到#map单元工作时，做这样：

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

<script type="text/javascript"> 

    function init() { 
    var ll = new google.maps.LatLng(12.0633419, 77.0998847); 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: ll 
    }); 

    // add marker to the map 
    var marker = new google.maps.Marker({ 
     position: ll, 
     map: map 
    }); 
    } 

</script> 

还记得在回调（在这种情况下init）使用正确的函数名称：

<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init"> 
</script>