google maps api .... showing a markers infowindow from a link outside of the map

Question

Welcome To Ask or Share your Answers For Others

google maps api .... showing a markers infowindow from a link outside of the map

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

google maps api .... showing a markers infowindow from a link outside of the map

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

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:42:54+0000

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>

Categories

google maps api .... showing a markers infowindow from a link outside of the map

google maps api .... showing a markers infowindow from a link outside of the map

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags