基本谷歌地图问题

所以我只是试图使用谷歌地图JavaScript API与他们的例子，但我只是不能得到它的工作。我的密钥没有任何限制，我在笔记本电脑上的XAMPP下的HTML文件中运行代码。我正在使用的代码如下：基本谷歌地图问题

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
      #map 
     { 
        height: 500px; 
     width: 500px; 
      } 
    </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=MYKEY&callback=initMap" 
    async defer></script> 
  </body> 
</html>

我看到初始化函数运行，因为我试图把警报那里，但我很茫然，为什么这是行不通的。我试着用我的钥匙jsfiddle，它工作正常。谢谢。

来源

2017-03-02 indigo79

我对这个东西一无所知，但不是你叫谷歌地图的api后的问题？ – user7393973

只有一个问题：你在谷歌api网址中使用你的密钥？ https://maps.googleapis.com/maps/api/js?key=的myKey &回调= initMap

如果没有，那么请使用以下这个网址： http://maps.google.com/maps/api/js?sensor=false

来源

2017-03-02 15:09:39

是的，在我的代码中我有一个合法的密钥，我已经把MYKEY用于这里的目的。 – indigo79

这是我使用的代码。尝试在运行脚本之前放置地图api？不要忘记用谷歌合法的API密钥替换MYKEY，否则它将无法工作。

< script type = "text/javascript" > 
     jQuery(function($) { 
     // Asynchronously Load the map API 
     var script = document.createElement('script'); 
     script.src = "http://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false&callback=initialize"; 
     document.body.appendChild(script); 
     }); 

    var color = "#444"; //Set your tint color. Needs to be a hex value. 

    function initialize() { 
     var map; 
     var bounds = new google.maps.LatLngBounds(); 

     var styles = []; //map style here 

     var mapOptions = { 
     mapTypeControlOptions: { 
      mapTypeIds: ['Styled'] 
     }, 
     //   center: new google.maps.LatLng(latitude, longitude), 
     //   zoom: 13, 

     scrollwheel: false, 
     navigationControl: false, 
     mapTypeControl: false, 
     zoomControl: false, 
     disableDefaultUI: true, 
     mapTypeId: 'Styled', 

     draggable: !("ontouchend" in document) 
     }; 

     // Display a map on the page 
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     map.setTilt(45); 

     var styledMapType = new google.maps.StyledMapType(styles, { 
     name: 'Styled' 
     }); 
     map.mapTypes.set('Styled', styledMapType); 

     // Multiple Markers 
     var markers = [ 
     ['street number, postalcode city', 51.3726777, 3.4743581] 
     ]; 

     // Display multiple markers on a map 
     var infoWindow = new google.maps.InfoWindow(), 
     marker, i; 

     // Loop through our array of markers & place each one on the map 
     for (i = 0; i < markers.length; i++) { 
     var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
     bounds.extend(position); 
     marker = new google.maps.Marker({ 
      animation: google.maps.Animation.DROP, 
      map: map, 
      icon: { 
      path: fontawesome.markers.MAP_MARKER, 
      scale: 0.8, 
      strokeWeight: 0, 
      strokeColor: '#ffca00', 
      strokeOpacity: 0, 
      fillColor: '#ffca00', 
      fillOpacity: 1 
      }, 
      position: position, 
      title: markers[i][0] 
     }); 

     // Allow each marker to have an info window 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
      infoWindow.setContent(infoWindowContent[i][0]); 
      infoWindow.open(map, marker); 
      } 
     })(marker, i)); 

     // Automatically center the map fitting all markers on the screen 
     map.fitBounds(bounds); 
     } 

     // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
     var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
     this.setZoom(13); 
     google.maps.event.removeListener(boundsListener); 
     }); 

    } < /script>

来源

2017-03-02 15:11:12 Rachelle

Thankyou。我粘贴的代码是直接从他们的演示。我不明白为什么它不应该工作。我试图将API的脚本放在头上，但这并没有奏效。我也尝试将init函数放在头部，然后在body load上调用它，但仍然没有任何结果。 – indigo79

基本谷歌地图问题

回答

相关问题