Menu
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>
959
After constructing an InfoWindow, you must call open to display it on the map. The user can click the close button on the InfoWindow to remove it from the map, or the developer can call close() for the same effect.
An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map. Info windows appear as a Dialog to screen readers.
You need to store your markers in an array that can be used later. Right now the code
markerID = this.id;
Is just going to be set to "marker1", it isn't actually the marker object. You need to create a collection of markers:
var markers = new Array();
After you create a marker you need to store it in the array:
markers.push(marker);
When your <li> element receives a click event you need to retrieve the marker from the array of markers:
marker = markers[this.id];
Here is a working example:
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var MapStart = new google.maps.LatLng(38.634036,-111.785889);
var markers;
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
markers = new Array();
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: MapStart
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
$("#map_list ul li").each(function(index) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng($(this).children(".marker_long").text(), $(this).children(".marker_lat").text()),
map: map,
animation: google.maps.Animation.DROP,
title : $(this).children(".marker_title").text(),
brief: $(this).children(".marker_brief").text()
});
google.maps.event.addListener(marker, 'click', function() {
map.panTo(new google.maps.LatLng(marker.position.Sa, marker.position.Ta));
infowindow.setContent(marker.brief);
infowindow.open(map,marker);
});
markers.push(marker);
});
}
$(document).ready(function(){
$("#map_list ul li").click(function(){
marker = markers[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,marker);
});
});
</script>
</head>
<body onload='initialize();'>
<div id="map" style="width: 450px; height: 350px;"></div>
<div id="map_list">
<ul>
<li id="0">
<div class="marker_title">Salt Lake City</div>
<div class="marker_brief">Capital of Utah</div>
<div class="marker_long">40.763901</div>
<div class="marker_lat">-111.901245</div>
</li>
<li id="1">
<div class="marker_title">Provo</div>
<div class="marker_brief">Location of BYU</div>
<div class="marker_long">40.25228</div>
<div class="marker_lat">-111.659546</div>
</li>
</ul>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
