Как обновить гиперссылку встроенной карты Google с маркером местоположения и информацией

Вопрос:

Я видел похожие вопросы, которые здесь остались без ответа, или они требуют обновления страницы, я надеюсь, что смогу получить ответ от кого-то, более знакомого с API Карт Google, чем я, и я бы хотел, чтобы это работало без необходимости обновления страница.

У меня есть встроенная карта Google на веб-странице, и у меня есть список местоположений в HTML-странице веб-страницы.

Я бы хотел, чтобы, когда посетитель нажимает на одно из мест, он показывает это местоположение на встроенной карте.

Звучит достаточно просто? Я читал документацию в течение 2 дней по API, и я не могу найти то, что ищу.

Я ожидаю, что позвоню в JS-функцию onClick ссылки, которая установит местоположение/маркер/InfoBox. Все, что мне нужно знать, — это как общаться с запечатленной картой по ссылке. Я могу самостоятельно разобраться с infoBox и остальным.

Спасибо тонну за чтение!

Если вам интересно, я использую следующую JS для вставки карты google:

function initialize() {

var mapOptions = {
zoom: 8,
panControl: false,
rotateControl: false,
scaleControl: false,
streetViewControl: false,
center: new google.maps.LatLng(51.004106,-114.135442),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("header"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

Лучший ответ:

Вероятно, вы захотите создать функцию для добавления маркера следующим образом:

function addMarker(map, lat, long, title, popupHtml) {
    var latLong = new google.maps.LatLng(lat, long);
    var markerOpts = { position: latLong, map: map, title: title };
    var marker = new google.maps.Marker(markerOpts);
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(popupHtml);
        infoWindow.open(map, marker);
    });
}

Затем в функции инициализации сделайте что-нибудь, чтобы привязать функцию к вашим ссылкам.

Оцените статью
TechArks.Ru
Добавить комментарий