2016-07-04 7 views
0

Ich versuche derzeit, eine Google-Karte basierend auf ziemlich großen Ember-Projekt zu laden.Mein JavaScript-Code ist nicht meine Google Map zu rendern, jede Hilfe wäre sehr hilfreich

Da das Projekt ziemlich ist die Ladezeit länger als das, was ich möchte. Deswegen versuche ich, die Benutzeroberfläche der Load-Seite schöner zu machen, im Moment ist es ziemlich langweilig. Mein Ziel ist es, eine einfache Google Map API in diese Seite zu implementieren, die nicht lange dauert und nur eine bestimmte Anzahl von Variablen liest, z. Lat, Long, Zoom Level und Max Zoom.

Ich möchte auch die Karte asynchron für die Leistung laden.

Ich habe das Skript in ein separates HTML-Dokument unten gelegt, so dass mein anderer Code es nicht schwer zu verstehen macht. Ich nehme an, irgendwo in meinem Code ist nur ein dummer Fehler.

Vielen Dank von wer ist in der Lage, meine Idiotie in diesem zu lösen!

<html> 
<head> 
<title>Map Load</title> 
<style> 
#map { 
height: 953px; 
width: 1630px; 
position: absolute; 
} 
</style> 
</head> 
<body> 
<h1>Loading map using async and defer attributes for loading page</h1> 
    <div id="map"></div> 

<script> 
function init() { 
    var myLatlng = new google.maps.LatLng(54.559322,-4.174804); // Add the coordinates 
    var mapOptions = { 
     center: myLatlng, 
     zoom: 6, // The initial zoom 
     minZoom: 6, // Minimum zoom 
     maxZoom: 15 // Maximum zoom 
    }; 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); // Render the map within the empty div 
} 
</script> 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTy18qtBZ6L1FnlbeVVk2IhMysFBqJb68&callback=init" 
    async defer></script> 
</body> 
</html> 
+1

Sie verweisen auf einen Rückruf von 'initMap', aber Ihre Funktion wird' init' genannt. – BenM

+0

Wenn Sie gogle.map immer noch nicht für moptions nuthin haben, setzen Sie mapoptions vor google.map –

Antwort

1

drei Fehler im Code Es gibt:

  • myLatlng nicht in der mapOptions

  • Sie var map = ... erklärt zweimal verwendet wird, ist das erste Mal falsch, denn auch ist mapOptions nicht deklariert beim ersten Mal.

    function init() { 
        var myLatlng = new google.maps.LatLng(54.559322,-4.174804); // Add the coordinates 
        var mapOptions = { 
         center: myLatlng, 
         zoom: 6, // The initial zoom 
         minZoom: 6, // Minimum zoom 
         maxZoom: 15 // Maximum zoom 
        }; 
        var map = new google.maps.Map(document.getElementById('map'), mapOptions); // Render the map within the empty div 
    } 
    
  • schlecht Bezug auf Ihre Funktion, statt initMap Verwendung init

    <script src="https://maps.googleapis.com/maps/api/js?callback=init" async defer></script>

+0

Danke. Gutes Auge. Das Karten-Div lädt jetzt, aber es ist nur eine graue Box, die Karte wird nicht wirklich gerendert. Muss ich einen Google Map API-Browserschlüssel angeben? Ich hätte nicht gedacht, dass ich musste, weil ich es in einer früheren Version nicht getan habe und es gut gemacht hat. – Coder994

+0

Sehen Sie Fehler in der Konsole? – Legionar

+1

Problem behoben, bei dem nach einem API-Schlüssel gefragt wurde. Vielen Dank für Ihre Hilfe. Ich habe deine Antwort angenommen! :) – Coder994