2017-10-12 11 views
-1

次のjavascriptを使用してカスタムGoogleマップを埋め込みました。Googleマップ(API)エラー

何らかの理由でウェブサイトにエラーが発生しています。私は何が起こっているのか/何が変わったのか、そしてそのエラーを引き起こすのは解決できません。それはGoogleのAPIを指しているようだが、私はこれを変更しようとしていると問題がまだ発生します。

ウェブサイトはwww.ninelivesbar.comに掲載されています。

<script type="text/javascript"> 
       // When the window has finished loading create our google map below 
       google.maps.event.addDomListener(window, 'load', init); 

       function init() { 
        // Basic options for a simple Google Map 
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions 
        var mapOptions = { 
         // How zoomed in you want the map to start at (always required) 
         zoom: 15, 

         // The latitude and longitude to center the map (always required) 
         center: new google.maps.LatLng(51.503560, -0.081678), // Nine Lives 

         // How you would like to style the map. 
         // This is where you would paste any style found on Snazzy Maps. 
         styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}] 
        }; 


        // Get the HTML DOM element that will contain your map 
        // We are using a div with id="map" seen below in the <body> 
        var mapElement = document.getElementById('map'); 

        // Create the Google Map using our element and options defined above 
        var map = new google.maps.Map(mapElement, mapOptions); 

        // Let's also add a marker while we're at it 
        var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(51.503560, -0.081678), 
         map: map, 
         title: 'Snazzy!' 
        }); 
       } 
</script> 

enter image description here

+0

このコードはGoogleマップv3 ..apiに基づいています。関連するjs apiをインポートするための正しいリンクがありますか? – scaisEdge

答えて

0

あなたは...あなたの実行あなたのinit関数の前に、あなたの現在のウィンドウからのイベントにだからあなたのマップが初期化された複数の時間を聞いている...ここで私がやった方法ですマップをレンダリングするためにjavascriptを使用しています。

<script> 
    function initialize() { 

    // Map initialization goes here 

    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<body> 
    <div id="map"></div> 
</body>