1 Различные карты на странице Использование Google Maps Javascript API

-1

Я работаю над сайтом, и я ищу, чтобы на каждой странице отображалась одна карта Google на каждой странице для нескольких страниц. Но я не уверен, как это сделать. Я использую немного кода, который я нашел (перечислены ниже.), В W3Schools, но у них есть код для одной карты на одной странице и несколько карт на одной странице. Я не могу повторить первую функцию Javascript, хотя я показываю ее дважды ниже, потому что она не будет отображаться на других страницах. Возможно, есть способ переписать его, чтобы заставить его работать, но я немного новичок в Javascript.1 Различные карты на странице Использование Google Maps Javascript API

Я искал этот вопрос, но не смог найти его, относящегося к этому, только как создать несколько карт в одном html-файле.

Я использую этот кусок Javascript в файле main.js вместо того, чтобы использовать фрагмент на каждой отдельной странице. Это немного кода, который я нашел у W3Schools. Единственное изменение, которое я сделал это я скопировал и вставил функцию, и это содержащий код дважды -

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); 
}

И я использую этот кусок HTML на моей первой HTML страницы -

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

И это один на мой второй -

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

Как здесь на их сайте - http://www.w3schools.com/graphics/tryit.asp?filename=trymap_basic.

Как уже упоминалось в названии, я ссылаюсь на API Javascript Google Maps.

Это моя структура для вызова файлов, которые я использую, которые я помещаю на каждый лист HTML.

<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>

источник

2017-01-07 Colton

Какие проблемы вы с? Почему нужно было помещать одну карту на несколько отдельных страниц? – geocodezip

Я пытаюсь разместить Javascript во внешнем файле, а не на каждой странице. – Colton

Какой javascript? Какой внешний файл? Как вы включаете этот внешний файл? Пожалуйста, предоставьте [mcve], демонстрирующий вашу проблему. – geocodezip

У вас может быть только одна функция с заданным именем в области. Для того, чтобы загрузить карту на отдельные страницы, если <div> идентификатор же, вы можете использовать один и тот же файл с одной функции в ней:

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); 
}

включить его в <body> ваших страниц, как это:

<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>

доказательство концепции/живой пример

источник

2017-01-09 05:58:56 geocodezip

Спасибо! Как мне с этим сделать две карты? Одно место на странице. – Colton

Вы можете включить данные в разметку страницы, чтобы установить центр карты. – geocodezip

Как мне это сделать? – Colton

1 Различные карты на странице Использование Google Maps Javascript API

ответ

Смежные вопросы