谷歌地图v3打开infowindow点击外部HTML链接 [英] google maps v3 open infowindow on click of external html link

问题描述

不管有人能帮助我，我已经设置了谷歌地图一切都很好。我唯一不知道如何做的是打开一个基于ID的信息窗口来自一个不在JS中的外部html链接。

Wonder if anyone can help me, I have setup a google map all works nicely. The only thing I cant work out how to do is to open an info window based on ID from an external html link that's not in the JS.

function initialize() {
// Create the map 
// No need to specify zoom and center as we fit the map further down.
var map = new google.maps.Map(document.getElementById("map"), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
});
infowindow = new google.maps.InfoWindow();
// Custom markers
var icon = "img/marker.png";

// Define the list of markers.
// This could be generated server-side with a script creating the array.
var markers = [
    { val:0, lat: -40.149049, lng: 172.033095, title: "Title", html: "<div style='text-align:left'><h4 style='color:#0068a6;font-size:16px;margin:0px 0px 10px 0px;'>Title</h4><strong>Telephone</strong><br /><br />Address</div>" },
    { val:1, lat: -41.185765, lng: 174.827516, title: "Title", html: "<div style='text-align:left'><h4 style='color:#0068a6;font-size:16px;margin:0px 0px 10px 0px;'>Title</h4><strong>Telephone</strong><br /><br />Address</div>" },
];
// Create the markers ad infowindows.
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
  // Create the marker
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.title,
        icon: icon,
        id: data.val
    });

    // Create the infowindow with two DIV placeholders
    // One for a text string, the other for the StreetView panorama.
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    title.innerHTML = data.html;
    content.appendChild(title);
    // Open the infowindow on marker click
    google.maps.event.addListener(marker, "click", function() {
        infowindow.setContent(content);
        infowindow.open(map, this);
        map.setCenter(this.position);
        console.log(this.id);
    });
}

// Zoom and center the map to fit the markers
// This logic could be conbined with the marker creation.
// Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
    var data = markers[index];
    bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
}

<p id="1">link to open marker</p>

感谢任何帮助

理查德：）

推荐答案

<a href="javascript:show(7)">The Golden Goose</a>

然后在你的js中有一个打开infowindow的函数（比如show（））来自该链接的属性（开头ID 7）。

Then in your js have a function to open the infowindow (such as show()) which takes the properties from that link (opening id 7).

function show(id){
  myid = id;
  if(markers[myid]){
    map.panTo(markers[myid].getPoint());
    setTimeout('GEvent.trigger(markers[myid], "click")',500);
    map.hideControls();
  }
}

这是我之前用过的一个标记的功能来自v2的经理。您必须确保在设置时为每个标记设置一个ID，然后您可以调用它。

That's the function I used previously with one of the marker managers from v2. You have to make sure you set an id for each marker as you set it and then you can call it.

我确定的一件事（为了简化问题）是为了确保地图标记集/数组与我在页面上使用的sql结果完全相同。这样，使用id是一块蛋糕。

The one thing I made sure of (to simplify matters) was to make sure the map marker set/array was exactly the same as the sql result I used on the page. That way, using id's was a piece of cake.

这篇关于谷歌地图v3打开infowindow点击外部HTML链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！