google maps apiは画面上の地図のみを表示します

Question

地図に空白が表示され、画面サイズを変更するときにのみ動作するgoogle maps apiに問題があります。

私はgoogle.maps.event.trigger(map, 'resize');についてすべて読んで、 のウェブ上のすべてを試しましたが、何らかの理由で私のコードで正しく使用できないため、すぐに役立ちます。

P.S

var markers3 = []; 
 
    $(document).ready(function() { 
 

 
     var yourStartLatLng = new google.maps.LatLng(35.71083783530009, 51.455841064453125); 
 
     $('#map_canvas3').gmap({'center': yourStartLatLng, zoom: 10}) 
 
      .bind('init', function (event, map) { 
 
       $(map).click(function (event) { 
 

 
        var objectOfCoordinatesInArray = []; 
 
        var a = {}; 
 

 
        var lat = event.latLng.lat(); 
 
        var lng = event.latLng.lng(); 
 

 
        objectOfCoordinatesInArray.push(lat.toString()) 
 
        objectOfCoordinatesInArray.push(lng.toString()) 
 

 
        a["coordinates"] = objectOfCoordinatesInArray; 
 
        a["type"] = "Point"; 
 
        eJSON = JSON.stringify({ 
 
          Point: a 
 
         } 
 
        ); 
 
        console.log(eJSON) 
 
        center: yourStartLatLng; 
 
       }); 
 

 

 
       google.maps.event.addListener(map, 'click', function (event) { 
 
        clearMarkers() 
 
        placeMarker(event.latLng); 
 
       }); 
 

 
       function clearMarkers() { 
 
        setMapOnAll(null); 
 
        markers3 = []; 
 
       } 
 

 
       function setMapOnAll(map) { 
 
        for (var i = 0; i < markers3.length; i++) { 
 
         markers3[i].setMap(map); 
 
        } 
 
       } 
 

 

 

 

 
       function placeMarker(location) { 
 

 
        var marker = new google.maps.Marker({ 
 
         position: location, 
 
         map: map 
 
        }); 
 

 
        markers3.push(marker); 
 

 
       } 
 
      }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

はマーカーが別れる気にそのJSONのためにいけない： はここに私のjqueryのスクリプトです。

Answer 1

ご提供いただいたサンプルが不完全で、それだけで問題を再現することはできません。

しかし、あなたの問題はおそらく、document.readyからのマップを初期化する方法に由来しています。

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

地図Javascriptの負荷一度その方法、それは右後initMap()を行うに行く、としません。私はあなたが地図のJavaScript APIスクリプトが含まれており、それはそうのように非同期的に呼び出すことがきたときには、必ずcallback参照を持ってお勧めしますその問題の出現/消滅があります。

サンプルコードでもjqueryを実行する必要はありません。 map変数にgoogle.maps.Mapを定義し、リスナーにmap.addListener('click', function(e){})などを追加します。jQueryバインドを使用する必要はありません。

下記のスニペットを見て、地図を読み込む際にこの方法に従ってください。

希望します。また、次回に最小限で完全で検証可能なサンプルを提供する際に、これを参考にすることを願っています。

var markers3 = []; 
 
var map; 
 
var yourStartLatLng = { 
 
    lat: 35.71083783530009, 
 
    lng: 51.455841064453125 
 
}; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: yourStartLatLng, 
 
    zoom: 10 
 
    }); 
 

 
    map.addListener('click', function(event) { 
 
    var objectOfCoordinatesInArray = []; 
 
    var a = {}; 
 

 
    var lat = event.latLng.lat(); 
 
    var lng = event.latLng.lng(); 
 

 
    objectOfCoordinatesInArray.push(lat.toString()) 
 
    objectOfCoordinatesInArray.push(lng.toString()) 
 

 
    a["coordinates"] = objectOfCoordinatesInArray; 
 
    a["type"] = "Point"; 
 
    eJSON = JSON.stringify({ 
 
     Point: a 
 
    }); 
 
    console.log(eJSON); 
 
    //center: yourStartLatLng; 
 
    }); 
 

 
    google.maps.event.addListener(map, 'click', function(event) { 
 
    clearMarkers() 
 
    placeMarker(event.latLng); 
 
    }); 
 

 
} 
 

 
function clearMarkers() { 
 
    setMapOnAll(null); 
 
    markers3 = []; 
 
} 
 

 
function setMapOnAll(map) { 
 
    for (var i = 0; i < markers3.length; i++) { 
 
    markers3[i].setMap(map); 
 
    } 
 
} 
 

 
function placeMarker(location) { 
 

 
    var marker = new google.maps.Marker({ 
 
    position: location, 
 
    map: map 
 
    }); 
 

 
    markers3.push(marker); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY&callback=initMap" async defer></script> 
 
<style> 
 
    /* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
    
 
    #map { 
 
    height: 100%; 
 
    } 
 
    /* Optional: Makes the sample page fill the window. */ 
 
    
 
    html, 
 
    body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
</style> 
 
<div id="map"></div>