基本谷歌地圖問題

所以我只是試圖使用谷歌地圖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

基本谷歌地圖問題

回答

相關問題