[英]How to have a hyperlink update an embedded google map with a location marker and information
我在這里看到了類似的問題無法解答,或者需要刷新頁面,希望我可以從比我更熟悉Google Maps API的人那里得到答案,並且我希望這種方法無需刷新就可以解決這一頁。
我在網頁上有一個嵌入式Google地圖,並且在網頁的HTML中有一個位置列表。
我希望這樣,當訪問者單擊某個位置時,它會在嵌入式地圖上顯示該位置。
聽起來很簡單吧? 我已經閱讀了兩天的API文檔,但似乎找不到我想要的東西。
我希望能夠調用將設置位置/標記/ InfoBox的鏈接的JS函數onClick。 我基本上只需要知道如何通過鏈接與嵌入的地圖進行通信。 我可以自己整理信息框,其余的可以整理。
非常感謝您的閱讀!
如果您想知道,我正在使用以下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);
});
}
然后在initialize函數中執行一些操作以將該函數附加到鏈接。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.