谷歌地图，点击链接后打开信息窗口 [英] Google Maps, open info window after click on a link

问题描述

我有这个代码来显示谷歌地图:

i have this code to display a google map:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {

        var mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(40.714364, -74.005972),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);


        var locations = [
            ['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
        ];


        var marker, i;
        var infowindow = new google.maps.InfoWindow();


        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });


        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: locations[i][3]
            });


            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }

    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="googlemap" style="width: 100%; height: 500px;"></div>
<a href="#">Open Info Window</a>

那不是最终代码，因为我想添加更多标记.

That's not the final code, because i want add more markers.

问题是，我需要外部链接来打开标记的信息窗口.


例如:

The problem is, that i need external links to open the info window of a marker.


For Example:

链接 1 从标记 1 打开信息窗口
链接 2 从标记 2 中打开信息窗口
等等...

Link 1 opens the info window from marker 1
Link 2 opens the info window from marker 2
etc...

我需要一个类似这样的链接:

I need a link something like this:

<a href="javascript:marker(0)">Open Info Window One</a>

这是我在 jsfiddle 中的代码:http://jsfiddle.net/fJ4jG/3/

Here is my code in jsfiddle: http://jsfiddle.net/fJ4jG/3/

我找到了几个解决方案，但我不知道如何将此代码与我的代码一起使用.它应该像这样工作:http://www.geocodezip.com/v3_MW_example_map2.html

I found couple of solutions, but i don't know how to use this code together with my code. It should work like this: http://www.geocodezip.com/v3_MW_example_map2.html

感谢大家的帮助！

推荐答案

该示例的作用是创建一个存储标记的数组.因此，当创建标记时，它们会被推送到该标记数组.当您点击链接时，您会发送一个带有函数的索引，该函数是对数组中标记的引用.

What that example does is it creates an array where it stores the markers. So when the markers are created, they get pushed to that markers array. When you click on the link you send an index with the function that is a reference to the marker in the array.

所以 JavaScript 看起来像这样:

So JavaScript looks like this:

var markers = [];
// The array where to store the markers

function initialize() {

        var mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(40.714364, -74.005972),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);


        var locations = [
            ['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
        ];


        var marker, i;
        var infowindow = new google.maps.InfoWindow();


        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });


        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: locations[i][3]
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));

            // Push the marker to the 'markers' array
            markers.push(marker);
        }

    }
    google.maps.event.addDomListener(window, 'load', initialize);

    // The function to trigger the marker click, 'id' is the reference index to the 'markers' array.
    function myClick(id){
        google.maps.event.trigger(markers[id], 'click');
    }

并在您的 HTML a 标签中添加 myClick 函数，如下所示:

And in your HTML a tag you add the myClick function like this:

<a href="#" onclick="myClick(0);">Open Info Window</a>

示例:http://jsfiddle.net/fJ4jG/9/

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