谷歌地图 - 基于ID

Question

在实施谷歌地图时 - 如果div的ID是'地图'，标记会显示出来，如果是别的东西，则不会。

https://jsfiddle.net/api/post/library/pure/

<div id="map"></div> 

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

功能

function initMap() { 
    var myLatLng = {lat: -25.363, lng: 131.044}; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: myLatLng 
    }); 

    var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    title: 'Hello World!' 
    }); 
} 

在这里如果你甚至在从的document.getElementById地图改变的div id来别的就不行。

是否要在别处改变？

改变了代码，以两个地图

function myMap() { 
 
    var mapOptions = { 
 
     center: new google.maps.LatLng(51.5, -0.12), 
 
     zoom: 10, 
 
     mapTypeId: google.maps.MapTypeId.HYBRID 
 
    } 
 
var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
} 
 

 

 

 

 

 

 
     function initMap() { 
 
     var myLatLng = {lat: -25.363, lng: 131.044}; 
 

 
     var mape = new google.maps.Map(document.getElementById('map2'), { 
 
      zoom: 4, 
 
      center: myLatLng 
 
     }); 
 

 
     var marker = new google.maps.Marker({ 
 
      position: myLatLng, 
 
      map: mape, 
 
      title: 'Hello World!' 
 
     }); 
 
     }

<h3>Using Google Maps API</h3> 
 
<div id="map"></div> 
 

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

 
    <h3>Using Google Maps API - markers</h3> 
 
<div id="map2"></div> 
 

 
<script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyB-aH4ym18aYYe86IiamWV88X-JrVhFLt8&callback=initMap"> 
 
</script>

Answer 1

问题是与你的API KEY尝试另一个API密钥。

function initMap() { 
 
    var myLatLng = {lat: -25.363, lng: 131.044}; 
 

 
    var map = new google.maps.Map(document.getElementById('map2'), { 
 
    zoom: 4, 
 
    center: myLatLng 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myLatLng, 
 
    map: map, 
 
    title:'hello word', 
 
    }); 
 
    
 
    var myLatLng2 = {lat: -25.363, lng: 15.044}; 
 

 
    var map2 = new google.maps.Map(document.getElementById('map3'), { 
 
    zoom: 2, 
 
    center: myLatLng2 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myLatLng2, 
 
    map: map2, 
 
    title:'hello word', 
 
    }); 
 
}

#map2, #map3{ 
 
height:200px; 
 
width:500px; 
 
margin-bottom:50px; 
 

 
border:1px solid #000; 
 
}

<div id="map2"></div> 
 

 

 
<div id="map3"></div> 
 

 
<script async defer 
 
src="https://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyB-aH4ym18aYYe86IiamWV88X-JrVhFLt8&callback=initMap"> 
 
</script>