Google Maps JS-Beispiel wird nicht angezeigt

<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=AIzaSyBlcVddNcJrrifavMfBBHkGhmh8ajmskbU&callback=initMap" 
    async defer></script> 
    </body>

Ich versuche, diese Karte aus diesem Tutorial in meiner Rails 4 App anzuzeigen. https://developers.google.com/maps/documentation/javascript/examples/map-simple Google Maps JS-Beispiel wird nicht angezeigt

Mit dem API-Schlüssel scheint es vollständig zu verschwinden, ohne irgendwelche Nachrichten in der Konsole zu zeigen.

Aber ohne den Schlüssel zeigt es enter image description here

Quelle

2016-07-29 steve chen

Sein Arbeits Code abzubilden bro seine vollständig arbeiten, können Sie Siehe http://stackoverflow.com/questions/23118546/google-maps-v3-api-key-wont-work-for-local-testing/23125207#23125207 – mean

diese Arbeit für mich

<!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=AIzaSyBlcVddNcJrrifavMfBBHkGhmh8ajmskbU&callback=initMap" 
     async defer></script> 
    </body> 
</html>

ohnehin auch eine Breite hinzufügen Container

 #map { 
     height: 100%; 
     width: 100%; 
     }

Quelle

2016-07-29 15:54:18 scaisEdge

Sogar es arbeitet ohne Assining Breite zum Kartencontainer – mean

@Kabali ja .. arbeitet .withou die Breite zuweisen. Ich bin nur ein (guter) Vorschlag – scaisEdge

Google Maps JS-Beispiel wird nicht angezeigt

Antwort

Verwandte Themen