Home/ Questions/Q 7600539
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T22:56:05+00:00

I’m trying to build an interactive map using google’s map api v3. The idea

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0