I'm trying to build an interactive map using google's map api v3. The idea is to populate a list of markers on the map with some text using asp.
Creating the map, original markers, and content was straightforward, but now I'd like a list of links to the various markers outside of the map. When an item on the list is clicked I'd like it to pan to the location and open the respective text box (infowindow).
Everything works except I can't get the info window to open. Can anyone suggest what I'm doing wrong here?
<script type="text/javascript">
var MapStart = new google.maps.LatLng(32.036020,34.760742);
var marker;
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var mapOptions = {
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: MapStart
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
<%
varCount = 0
while not rsListItem.EOF
varCount = varCount + 1
varLong = rsListItem.Fields.Item("custom_text1").Value
varLat = rsListItem.Fields.Item("custom_text2").Value
%>
var marker<%=varCount%> = new google.maps.Marker({
position: new google.maps.LatLng(<%=varLong%>,<%=varLat%>),
map: map,
animation: google.maps.Animation.DROP,
title : "<%=rsListItem.Fields.Item("heading").Value%>"
});
google.maps.event.addListener(marker<%=varCount%>, 'click', function() {
map.panTo(new google.maps.LatLng(<%=varLong%>, <%=varLat%>));
infowindow.setContent('<%=(rsListItem.Fields.Item("brief").Value)%>');
infowindow.open(map,marker<%=varCount%>);
});
<%
rsListItem.MoveNext()
Wend
rsListItem.Close()
Set rsListItem = Nothing
%>
}
$(document).ready(function() {
$("#map_list ul li").click(function() {
markerID = this.id;
markerContent = $("div.marker_brief",this).html();
varLong = $("div.marker_long",this).html();
varLat = $("div.marker_lat",this).html();
map.panTo(new google.maps.LatLng(varLong, varLat));
infowindow.setContent(markerContent)
infowindow.open(map,markerID);
});
});
</script>
<div id="map"></div>
<div id="map_list">
<ul>
<%
vtype=100160
Call ListItem(vtype,langId)
varCount = 0
while not rsListItem.EOF
varCount = varCount + 1
varLong = rsListItem.Fields.Item("custom_text1").Value
varLat = rsListItem.Fields.Item("custom_text2").Value
%>
<li id="marker<%=varCount%>"><%=rsListItem.Fields.Item("heading").Value%>
<div class="marker_brief"><%=rsListItem.Fields.Item("brief").Value%></div>
<div class="marker_long"><%=varLong%></div>
<div class="marker_lat"><%=varLat%></div>
</li>
<%
rsListItem.MoveNext()
Wend
rsListItem.Close()
Set rsListItem = Nothing
%>
</ul>
</div>
See Question&Answers more detail:os