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>