ヘイ。 Googleマップはブラウザでグレー表示されますが、右下にマーカーとGoogleロゴが表示されます。サイズ変更機能を試しましたが、それでも動作しません。私はbootstraps colを使用しています。グーグルマップはグレー表示されますが、ブラウザのサイズを変更すると機能します

私はそれがここで動作することがわかりますが、そうではありません。
ありがとうございました。あなたがJavaScriptのためのGetting Startedをチェックすると

function initialize() { 
 
    
 
    var myOrigin = new google.maps.LatLng(56.63914, 9.79765); 
 

 
    var mapProp = { 
 
     center: myOrigin, 
 
     zoom: 7, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 

 

 
    var myCenter = new google.maps.LatLng(56.157165, 10.207644); 
 

 
    var marker = new google.maps.Marker({ 
 
     position: myCenter, 
 
     title: 'Click to zoom' 
 
    }); 
 

 
    marker.setMap(map); 
 

 
    var myCenter2 = new google.maps.LatLng(57.04661, 9.924479); 
 

 
    var marker2 = new google.maps.Marker({ 
 
     position: myCenter2, 
 
     title: 'Click to zoom' 
 
    }); 
 

 

 
    marker2.setMap(map); 
 

 
    /*On marker click, it zooms to 19*/ 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
     map.setZoom(19); 
 
     map.setCenter(marker.getPosition()); 
 
    }); 
 

 
    google.maps.event.addListener(marker2, 'click', function() { 
 
     map.setZoom(19); 
 
     map.setCenter(marker2.getposition()); 
 
    }); 
 

 
} 
 

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

#googleMap { 
 
    height:350px; 
 
    width:100%; 
 
}

<body> 
 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
    <div id="googleMap"></div> 
 
    </div> 
 
    <script src="http://maps.googleapis.com/maps/api/js"></script> 
 
</body>

出典

2016-06-23 GreenWood

私の最初のアイデア：Googleマップを初期化すると、地図のサイズが大きくなり、Googleマップは最初のサイズで動作します。このようなことが起こるか？それは関係がありますか？ –

まあ、それはmobilまたは大きな画面で動作しません。ブラウザのサイズを変更するときにのみ表示されます。 – GreenWood

エラーログを投稿できますか？この[前の質問]（http://stackoverflow.com/questions/14268667/google-maps-refreshing-grey?rq=1）もご確認ください。お役に立てれば。 –

：

<!DOCTYPE html> 
<html> 
<head> 
<title>Simple Map</title> 
<meta name="viewport" content="initial-scale=1.0"> 
<meta charset="utf-8"> 
<style> 
html, body { 
height: 100%; 
margin: 0; 
padding: 0; 
} 
#map { 
height: 100%; 
} 
</style> 
</head> 
<body> 
<div id="map"></div> 
<script> 
var map; 
function initMap() { 
map = new google.maps.Map(document.getElementById('map'), { 
center: {lat: -34.397, lng: 150.644}, 
zoom: 8 
}); 
} 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" 
async defer></script> 
</body> 
</html>

注：

あなたは、標準の計画の下でAPIを使用している場合は、あなたがしなければなりませんブラウザキー（タイプAPIキー）をあなたの選択したプロジェクトに設定します。 API keys for the standard APIについて詳しくはこちらをご覧ください。

出典

2016-06-29 17:07:51

グーグルマップはグレー表示されますが、ブラウザのサイズを変更すると機能します

答えて

注：

関連する問題