Uncaught Reference: Google ist nicht

definiert

Ich versuche, in Marker aus einer GeoJSON Datei auf meiner Karte zu laden, die Karte lädt in Ordnung, aber halten einen Fehler bekommen ...Uncaught Reference: Google ist nicht

Uncaught ReferenceError: google is not defined

an dieser Linie ...

google.maps.event.addDomListener(window, 'load', initialize);

ich habe a few weitere Fragen zu diesem Thema zu lesen, und das meiste davon befaßt sich mit, wie Sie enthalten müssen die google-Skript Karten vor Ihrem Kartencode. Ich habe versucht, es in meinem Kopf und direkt über meinem Kartencontainer aufzunehmen, aber kein Glück. Die Map selbst lädt tatsächlich, nur die Marker aus meiner JSON-Datei nicht.

HTML/JS-Code

<!DOCTYPE html> 
<html> 
<head> 
    <title>Game Industry Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
    <link rel=StyleSheet href="css/style.css" type="text/css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
</head> 
<body> 
<div class="navbar navbar-defualt navbar-fixed-top"> 
    <a class="navbar-brand" href="#">Game Industry Map</a> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="From Software, Naughty Dog, Bethesda Game Studios, BreakAway Games..." id="query" name="query" value=""> 
     <div class="input-group-btn"> 
      <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button> 
     </div> 
    </div> 
</div> 
<div class='content-container'> 
    <div id="map"></div> 
    <div id="company-info"> 
     <!--To do...--> 
    </div> 
</div> 
<script type="text/javascript"> 
    var map; 
    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 34.029602, lng: -118.452416}, 
      zoom: 13 
     }); 
     map.data.loadGeoJson('data.json'); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap" 
     type="text/javascript"></script> 
</body> 
<footer>Created by <a href="#">My Name</a>.</footer> 
</html>

GeoJSON Datei

{ "type": "FeatureCollection", 
    "features": [ 
    { "type": "Feature", 
     "geometry": {"type": "Point", "coordinates": [34.019602, -118.452416]}, 
     "properties": { 
     "company-logo": "images/activision.png", 
     "company-name": "Activision Publishing Inc", 
     } 
    }, 

    { "type": "Feature", 
     "geometry": {"type": "Point", "coordinates": [34.028230, -118.471270]}, 
     "properties": { 
     "company-logo": "images/naughtydog.png", 
     "company-name": "Naughty Dog Inc", 
     } 
    } 
    ] 
}

Quelle

2016-03-28 Carson

mögliches Duplikat von [(Suchoption funktioniert nicht) Uncaught ReferenceError: google ist nicht definiert] (http://stackoverflow.com/questions/35909352/search-option-not-working-uncaught-referenceerror-google-is- nicht definiert) – geocodezip

Versuchen Sie, die Google-Bibliothek zu schließen, bevor das Skript die Bibliothek aufrufen:

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

<script type="text/javascript"> 
    var map; 
    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 34.029602, lng: -118.452416}, 
      zoom: 13 
     }); 
     map.data.loadGeoJson('data.json'); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

bearbeiten

Sie definieren einen Rückruf hier: /maps/api/js?key=API_KEY_HERE&callback=initMap

dies Ihre initMap() Methode einmal Google Maps geladen seine Komponenten hat alle nennen.

Aber Sie rufen die google.maps.event.addDomListener(window, 'load', initialize); außerhalb dieser Funktion, daher, wenn google ist noch nicht geladen.

Sie sollten versuchen, Ihre addDomListener Anruf in Ihre initMap() Anruf enthalten!

Quelle

2016-03-28 17:14:00 cl3m

In der Google API Docs haben sie die Skript-Tags an der Unterseite: https://developers.google.com/maps/documentation/javascript/examples/map-simple – JordanHendrix

Ich habe das schon versucht, aber leider nicht t arbeiten. Die Karte selbst lädt in beide Richtungen, nur nicht die Markierungen, egal wo ich die Bibliothek einschließe. – Carson

ok Entschuldigung, es liegt daran, dass Sie initMap() als Callback aufrufen und 'google.maps.event.addDomListener (window, 'load', initialize);' nicht in der Funktion initMap() ist, also google noch nicht definiert, wenn Sie es anrufen – cl3m

Sie sind in der Nähe, zunächst einmal Sie einen Listener hinzufügen müssen google.maps.event.addListerner() verwenden, dann müssen Sie den Hörer auf das DOM google.maps.events.addDomListner()

addListener ist async mit hinzuzufügen, so dass Sie es mit einem Rückruf schreiben müssen. Hier ein Beispiel:

<script> 
var myCenter=new google.maps.LatLng(51.508742,-0.120850); 

function initialize() 
{ 
var mapProp = { 
    center: myCenter, 
    zoom:5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 

var marker = new google.maps.Marker({ 
    position: myCenter, 
    title:'Click to zoom' 
    }); 

marker.setMap(map); 

// Zoom to 9 when clicking on marker 
google.maps.event.addListener(marker,'click',function() { 
    map.setZoom(9); 
    map.setCenter(marker.getPosition()); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script>

Relevante Links:

http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_marker_click

https://developers.google.com/maps/documentation/javascript/reference#event

https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener

Quelle

2016-03-28 17:28:39 JordanHendrix

In der Tat kann man nur schreiben:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE"></script>

(ohne Rückruf). Der API_KEY ist ebenfalls nicht notwendig. In einer öffentlichen Google Maps JavaScript-API-App wird daher dringend empfohlen, eine Verweisbeschränkung für jeden in einem Produktionssystem verwendeten Schlüssel hinzuzufügen, insbesondere für öffentlich zugängliche, und nur die Domain, den Host oder die vollständige Datei-URL Ihrer App zu autorisieren.

Quelle

2018-01-24 05:20:59 loveJS

Uncaught Reference: Google ist nicht

Antwort

Verwandte Themen