So speichern Sie Google Map-Optionen in einer externen Datei

Ich arbeite mit Google Maps API v3 und möchte Kartenoptionen in einer externen JS-Datei speichern und die Kartenoptionen mit anderen Seiten teilen, die eine Google-Karte enthalten. Nehmen wir an, es gibt zwei verschiedene Seiten mit einer eigenen Google-Karte, die auf einen anderen Ort zeigen, und Sie möchten, dass diese Karten das gleiche Aussehen und Verhalten aufweisen, indem Sie einige Steueroptionen festlegen.So speichern Sie Google Map-Optionen in einer externen Datei

Was ich versucht:

in a.html

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     #map {width: 500px; height: 500px;} 
    </style> 
</head> 
<body> 
<div id="map"></div> 
<script src="map-options.js"></script> 
<script> 
    function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), MY_MAP_OPTIONS); 
     map.setCenter({lat: 40.782821, lng: -73.965596}); //New York 
    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> 
</body> 
</html>

Es wird einige andere Seiten wie b.html, c.html etc. sein, die einen anderen Ort verweisen.

in map-options.js

var MY_MAP_OPTIONS = { 
    zoom: 10, 
    mapTypeControl: false, 
    streetViewControl: false, 
    zoomControl: true, 
    zoomControlOptions: { 
     position: google.maps.ControlPosition.RIGHT_TOP 
    } 
};

Offensichtlich würden diese Codes nicht funktionieren. Das Problem ist position: google.maps.ControlPosition.RIGHT_TOP in map-options.js; Der Browser weiß nicht, was das ist, weil die Google Maps-Bibliothek zum Zeitpunkt map-options.js noch nicht geladen wurde.

Irgendeine Idee, um dieses Problem zu lösen? Oder gibt es eine andere Möglichkeit, die Kartenoptionen mit anderen Seiten zu teilen, um zu vermeiden, dass auf vielen Seiten identische Codes geschrieben werden?

Quelle

2016-04-09 Jay Mitsumoto

versuchen http://requirejs.org/docs/api.html – jithin

So können Sie für verschiedene Seiten oder andere Karte für verschiedene Seiten einer Karte wollen? – user3187715

Sie könnten versuchen, die Reihenfolge des Ladens Ihrer Skripts zu ändern und die initMap-Funktion beim Laden von body anstelle von google map library aufzurufen.

Auf diese Weise werden sowohl Google Map Bibliothek als auch Ihre externe js geladen, bevor initMap() aufgerufen wird.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     #map {width: 500px; height: 500px;} 
    </style> 
</head> 
<body onload="initMap()"> 
<div id="map"></div> 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> 
<script src="map-options.js"></script> 
<script> 
    function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), MY_MAP_OPTIONS); 
     map.setCenter({lat: 40.782821, lng: -73.965596}); //New York 
    } 
</script> 
</script> 
</body> 
</html>

Quelle

2016-04-09 10:39:35 Joyson

Das hat bei mir funktioniert. Vielen Dank! –

Gern geschehen. :-) – Joyson

So speichern Sie Google Map-Optionen in einer externen Datei

Antwort

Verwandte Themen