1 Unterschiedliche Karte pro Seite mit Google Maps JavaScript API

-1

Ich arbeite an einer Website, und ich bin auf der Suche nach 1 verschiedenen Google Map auf jeder Seite für eine Liste von mehreren Seiten. Aber ich bin unsicher, wie ich das anstellen soll. Ich verwende ein wenig Code, den ich gefunden habe (siehe unten.), Auf W3Schools, aber der Code, den sie haben, ist für eine Karte auf einer einzelnen Seite und mehrere Karten auf einer einzigen Seite. Ich kann die erste Funktion von Javascript nicht wiederholen, obwohl ich es unten zweimal zeige, weil es auf anderen Seiten nicht angezeigt wird. Es mag einen Weg geben es neu zu schreiben, um es zum Laufen zu bringen, aber ich bin etwas neu in Javascript.1 Unterschiedliche Karte pro Seite mit Google Maps JavaScript API

Ich habe nach dieser Frage gesucht, konnte aber nicht dazu kommen, eine zu finden, nur wie man mehrere Karten pro HTML-Datei erstellt.

Ich verwende dieses Stück Javascript auf meine main.js-Datei, anstatt das Snippet auf jeder einzelnen Seite zu verwenden. Das ist ein bisschen Code, den ich von W3Schools gefunden habe. Die einzige Änderung, die ich machte, war ich kopiert und die Funktion eingefügt und es enthält Code zweimal -

function myMap() { 
    var mapCanvas = document.getElementById("map1"); 
    var mapOptions = { 
    center: new google.maps.LatLng(51.508742,-0.120850), 
    zoom: 5 
    }; 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
} 

function myMap() { 
    var mapCanvas = document.getElementById("map2"); 
    var mapOptions = { 
    center: new google.maps.LatLng(42.859822,-97.15901), 
    zoom: 5 
    }; 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
}

Und ich verwende dieses Stück HTML auf meiner ersten HTML-Seite -

<div id="map1" style="width:100%;height:500px"></div>

Und dieses auf meinem zweiten -

<div id="map2" style="width:100%;height:500px"></div>

Wie hier auf der Website gefunden - http://www.w3schools.com/graphics/tryit.asp?filename=trymap_basic.

Und wie im Titel erwähnt, verweise ich auf die Google Maps Javascript API.

Dies ist meine Struktur, um die Dateien, die ich benutze, die ich auf jedem HTML-Blatt.

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 
<script type="text/javascript" src="js/main.js"></script> 
<link href="https://fonts.googleapis.com/css?family=Cardo|Roboto:100,300,500" rel="stylesheet"> 
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"> </script>

Quelle

2017-01-07 Colton

Welches Problem ist aufgetreten? Warum ist es problematisch, eine einzelne Karte auf mehrere einzelne Seiten zu setzen? – geocodezip

Ich versuche, das Javascript in meiner externen Datei statt auf jeder Seite zu platzieren. – Colton

Was Javascript? Welche externe Datei? Wie fügen Sie diese externe Datei ein? Bitte geben Sie eine [mcve] an, die Ihr Problem veranschaulicht. – geocodezip

Sie können nur eine Funktion mit einem bestimmten Namen in einem Bereich haben. Um die Karte auf separaten Seiten zu laden, wenn die <div>-ID das gleiche ist, können Sie die gleiche Datei mit einer einzigen Funktion in ihm verwenden können:

main.js:

function myMap() { 
    var mapCanvas = document.getElementById("map"); 
    var mapOptions = { 
    center: new google.maps.LatLng(51.508742,-0.120850), 
    zoom: 5 
    }; 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
}

ist es in der <body> Ihrer Seiten wie folgt aus:

<div id="map"></div> 
<script type="text/javascript" src="scripts/SO_20170108_main.js"></script> 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

Proof of concept/anschauliches Beispiel

Quelle

2017-01-09 05:58:56 geocodezip

Danke! Wie würde ich zwei verschiedene Karten damit machen? Ein anderer Ort pro Seite. – Colton

Sie können Daten in das Seiten-Markup einfügen, um das Zentrum der Karte festzulegen. – geocodezip

Wie würde ich das tun? – Colton

1 Unterschiedliche Karte pro Seite mit Google Maps JavaScript API

Antwort

Verwandte Themen