古いコードを Google Maps API v3 に更新していますが、マップに何も表示されません。オブジェクトをコンソールにダンプするmap
と、マップが適切に初期化され、適切な div に読み込まれていることが示されますが、灰色のボックス以外には何も表示されません。
これが最も一般的な問題と思われるため、マップ div の幅/高さとオーバーフローを設定しました。
しかし、私はこれを機能させることができません。何か案は?
ありがとう
古いコードを Google Maps API v3 に更新していますが、マップに何も表示されません。オブジェクトをコンソールにダンプするmap
と、マップが適切に初期化され、適切な div に読み込まれていることが示されますが、灰色のボックス以外には何も表示されません。
これが最も一般的な問題と思われるため、マップ div の幅/高さとオーバーフローを設定しました。
しかし、私はこれを機能させることができません。何か案は?
ありがとう
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
#map_canvas { height: 200px; width: 400px; overflow: visible; }
</style>
</head>
<body>
<div id="map_canvas"></div>
<script>
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</body>
</html>
これは私にとってはうまくいきます。
の間には大きな違いがあります
var maptype = 'google.maps.MapTypeId.HYBRID';
var mapInitOpts = {
mapTypeId: maptype
};
と
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID
};
1 つのインスタンスでは、テキスト「google.maps.MapTypeId.HYBRID」を mapTypeId に割り当て、もう 1 つのインスタンスでは、変数 google.maps.MapTypeId.HYBRID の値を mapTypeId に割り当てています。
あなたの例が機能するためには、少なくとも
var maptype = google.maps.MapTypeId.HYBRID;
いいえ
var maptype = 'google.maps.MapTypeId.HYBRID';
また、 zoom: と center: がないと、私の例を機能させることはできません。それらが必要になる場合があります。
'google.maps.MapTypeId.HYBRID'; という引用符で囲まれた mapTypeId 定数がありました。文字列ではなく定数です: google.maps.MapTypeId.HYBRID
また、マップの中心とズーム レベルを指定する必要があります。これは機能します:
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID,
center: new google.maps.LatLng(-32.891058,151.538042),
zoom: 16
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapInitOpts);
最後に、API キーを提供する必要がなくなりました。