Всем добрый день!
Возникла такая ситуация: Необходимо сделать на сайте 2 карты.
1 карта просто будет указывать адрес одного места.
Вторая карта должна работать так - при клике на определенное место (например, ул. Академика Королева 12, этот адрес помещается в див)
С первой картой никаких проблем не возникло, карта замечательно подключается.
Код:
<div id="map_google"></div>
function initMap() {
// Create a map object and specify the DOM element for display.
var map = new google.maps.Map(document.getElementById('map_google'), {
center: {lat: 55.702444, lng: 37.668007},
scrollwheel: false,
zoom: 18
});
var image = 'img/ellipse.png';
var beachMarker = new google.maps.Marker({
position: {lat: 55.702544, lng: 37.669001},
map: map,
icon: image
});
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNgOsJrHOAPFi0tSwatrBx6GPGb8oGVxA&callback=initMap" async defer></script>
А вот со второй уже начинается :(
Код:
<div id="map_google_form"></div>
function initMap() {
// Create a map object and specify the DOM element for display.
var map_form = new google.maps.Map(document.getElementById('map_google_form'), {
center: {lat: 55.702444, lng: 37.668007},
scrollwheel: false,
zoom: 18
});
var image_form = 'img/ellipse.png';
var beachMarkerForm = new google.maps.Marker({
position: {lat: 55.702544, lng: 37.669001},
map: map_form,
icon: image_form
});
}
<script async defer src="https://maps.googleapis.com/maps/api/jsAIzaSyDgZ5FuYufDQ4yVYW55S9i1qaf152jI1nA&callback=initMap"
type="text/javascript"></script>
Получается: когда подключаю и для первой и для второй карты скрипты, то не работает ничего. Если я отключаю скрипт с одним key api, то работает только одна карта (которая под div Адрес)
Возникает несколько вопросов:
1) Что я делаю не так? По-любому где-то я что-то упустила.
2) Как правильно делать в такой ситуации? Как подключать сразу две карты?
3) Как реализовать получение адреса из карты и помещение его в div Адрес? Как это правильно делается?
Всем заранее спасибо за помощь и лучей добра! :)
Простой
