Question

开始玩弄Google Maps API V3。我有一些HTML数据坐标列表。然而，地图在地图上填充时，我想要发生的是当您点击地图外部的实际链接（即地点1）时，它会触发infowindow也会打开。

HTML：

<div id="map"></div> 

<div id="places"> 
    <div class="map-location" data-coordinates='{"lat" : 40.71837, "long" : -74.00608}'> 
    <a href="http://link1.com">Place 1</a> 
    </div> 
    <div class="map-location" data-coordinates='{"lat" : 40.71435, "long" : -74.00597}'> 
    <a href="http://link2.com">Place 2</a> 
    </div> 
    <div class="map-location" data-coordinates='{"lat" : 40.71803, "long" : -74.00305}'> 
    <a href="http://link3.com">Place 3</a> 
    </div> 
    <div class="map-location" data-coordinates='{"lat" : 40.74238, "long" : -73.98946}'> 
    <a href="http://link4.com">Place 4</a> 
    </div> 
</div> 

JS：

var map; 
var infowindow = new google.maps.InfoWindow(); 
var myOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(40.71938, -74.00552), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

map = new google.maps.Map(document.getElementById('map'), myOptions); 

// grab data attributes from html 
$('.map-location').each(function(index){ 
    var rLat = $(this).data("coordinates").lat; 
    var rLong = $(this).data("coordinates").long; 
    var rName = $(this).find('a').html(); 
    var rHref = $(this).find('a').attr("href"); 
    var contentString = '<a href="' + rHref + '" target="_blank">' + rName + '</a>'; 
    var myLatLng = new google.maps.LatLng(rLat, rLong); 

    var otherMarkers = new google.maps.Marker({ 
    position: myLatLng, 
    map: map 
    }); 

    // click actions 
    google.maps.event.addListener(otherMarkers, 'click', (function(otherMarkers, index) { 
    return function() { 
    infowindow.setContent(contentString); 
    infowindow.open(map, otherMarkers); 
    } 
    })(otherMarkers, index)); 
}); 

如何去建立一个点击每个链接触发地图上的信息窗口盒子？

Answer 1

这个例子是完成你正在尝试做的事：

http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar.htm

希望这有助于！

Answer 2

让你的JS这样的： 使函数外全局数组：

var infoArray = new Array(); 
var markerArray = new Array(); 

并保存信息窗口的每个实例：

var map; 
var infowindow = new google.maps.InfoWindow(); 
var myOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(40.71938, -74.00552), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

map = new google.maps.Map(document.getElementById('map'), myOptions); 

// grab data attributes from html 
$('.map-location').each(function(index){ 
    var rLat = $(this).data("coordinates").lat; 
    var rLong = $(this).data("coordinates").long; 
    var rName = $(this).find('a').html(); 
    var rHref = $(this).find('a').attr("href"); 
    var contentString = '<a href="' + rHref + '" target="_blank">' + rName + '</a>'; 
    var myLatLng = new google.maps.LatLng(rLat, rLong); 

    var otherMarkers = new google.maps.Marker({ 
    position: myLatLng, 
    map: map 
    }); 
markerArray[myLatLng] = otherMarkers; 

    // click actions 
    google.maps.event.addListener(otherMarkers, 'click', (function(otherMarkers, index) { 
    return function() { 
    infowindow.setContent(contentString); 
    infowindow.open(map, otherMarkers); 
    } 
    })(otherMarkers, index)); 

}); 

infoArray[myLatLng] = infowindow; 

，并就HTML功能：

<div id="map"></div> 

<div id="places"> 
    <div class="map-location" > 
    <a href="http://link1.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 1</a> 
    </div> 
    <div class="map-location" > 
    <a href="http://link2.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 2</a> 
    </div> 
    <div class="map-location" > 
    <a href="http://link3.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 3</a> 
    </div> 
    <div class="map-location" > 
    <a href="http://link4.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 4</a> 
    </div> 
</div> 

并制作JS功能：

function infoOpen(lat,lng){ 
    var myLatLng = new google.maps.LatLng(lat,lng); 
    infoArray[myLatLng].open(map,markerArray[myLatLng]); 
} 

使地图变量也是全局的。

还可以根据你自己定制它。