Multiple Markers on a Google Map

StackOverflow https://stackoverflow.com/questions/606515

Question

I added a google map with two markers (i am just testing), the code is:

function load() {

    var map = new GMap2(document.getElementById("map"));


    var marker = new GMarker(new GLatLng(<%=coordinates%>));
    var marker2 = new GMarker(new GLatLng(31.977211,35.951729));
    var html="<%=maptitle%><br/>" +
         "<%=text%>";
    var html2="<img src='simplemap_logo.jpg' width='20' height='20'/> " +
         "<%=maptitle%><br/>" +
         "<%=text%>" + "Alper";
    map.setCenter(new GLatLng(<%=coordinates%>), 5);
    map.setMapType(G_HYBRID_MAP);
    map.addOverlay(marker);
    map.addOverlay(marker2);
    map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GMapTypeControl());


    marker.openInfoWindowHtml(html);
    marker2.openInfoWindowHtml(html2);
    }

The problem is, only one markers text is showing (the white triangle with text inside it) the other is not visible, why? Another thing, i have a table of Maps, its like: mapID, mapCoordinates, mapMarkerTitle, mapMarkerText, i can retrieve this table, but i want a way to be able to pass all its records to my javascript and create a Marker for each Map i have in my table, i know this is two much, but can anyone suggest or help me with the code? as i know nothing about javascript :D

The HTML OUTPUT is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
    Untitled Page
</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAANgu3GlobW5KtQorgXrnJ_xTHM4EYhrvsce8mdg4KdiCoPfCQKxSOZ_5sjy4O31twg6cxfZqam24TCw"
      type="text/javascript"></script>

    <script type="text/javascript">

     function load() {

    var map = new GMap2(document.getElementById("map"));


    var marker = new GMarker(new GLatLng(32.523251,35.816068));
    var marker2 = new GMarker(new GLatLng(31.977211,35.951729));
    var html="maen<br/>" +
         " maen tamemi";
    var html2="<img src='simplemap_logo.jpg' width='20' height='20'/> " +
         "maen<br/>" +
         " maen tamemi" + "Alper";
    map.setCenter(new GLatLng(32.523251,35.816068), 5);
    map.setMapType(G_HYBRID_MAP);
    map.addOverlay(marker);
    map.addOverlay(marker2);
    map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GMapTypeControl());



    marker2.openInfoWindowHtml(html2);
    marker.openInfoWindowHtml(html);
    }

    //]]>
    </script>

    <script type="text/javascript">

      function pageLoad() {
      }

    </script>

</head>
<body onload = "load()">
    <form name="form1" method="post" action="Xhome.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDI5NDcxNTY4ZGTjxbb38769ZB2N9Ow9kAzPz2PIqA==" />
</div>

    <div id="map" style="width:400px;height:300px" >

    </div>
    </form>
</body>
</html>
Was it helpful?

Solution

In response to the second part of your question:

i want a way to be able to pass all its records to my javascript and create a Marker for each Map i have in my table

I have (as an example - written a year or so ago) the following code:

In the code-behind I have something like this (c# I'm afraid):

[WebMethod]
public LatitudeLogitudeMessage[] GetPoints(string postCodes)
{
    string[] postCodeArray = postCodes.Split(",".ToCharArray());

    LatitudeLogitudeMessage[] pointArray = 
                   new LatitudeLogitudeMessage[postCodeArray.Length];
    int index = 0;
    foreach (string postCode in postCodeArray)
    {
        pointArray[index] = GetPoint(postCode);
        index++;
    }

    return pointArray;
}

LatitudeLogitudeMessage is a custom class that looks like this:

public class LatitudeLogitudeMessage
{
    public decimal? Latitude { get; set; }
    public decimal? Longitude { get; set; }
    public string Message { get; set; }
    public string Details { get; set; }
    public string Address { get; set; }

    public LatitudeLogitudeMessage(string addressToFind)
    {
        Address = addressToFind;
        Details = addressToFind.Replace(",", ",<br />");
    }
}

The GetPoint method bascially fills in those details.

In the code infront I then had:

PageMethods.GetPoints(address, showPoints);

Which calls the GetPoints method on the code behind, and passes the result to showPoints:

function showPoints(latLongs)
{
  GLog.write("Showing points");
  var points = [];
  var latLngBounds = new GLatLngBounds();

  for (var i = 0; i < latLongs.length; i++)
  {
    if ("" == latLongs[i].Message)
    {
      points[i] = new GLatLng(latLongs[i].Latitude, latLongs[i].Longitude);
      var marker = 
            new GMarker(points[i], {title: latLongs[i].Details, clickable: false});
      map.addOverlay(marker);
      latLngBounds.extend(points[i]);
    }
    else
    {
      GLog.write(latLongs[i].Message);
    }
  }

  if (points.length > 1)
  {
    var bounds = new GBounds(points);
    var center = new GLatLng(
         (latLngBounds.getSouthWest().lat() 
           + latLngBounds.getNorthEast().lat()) /2.,
         (latLngBounds.getSouthWest().lng() 
           + latLngBounds.getNorthEast().lng()) /2.);
    var newZoom = map.getBoundsZoomLevel(latLngBounds, map.getSize());
    map.setCenter(center, newZoom);
  }
  else
  {
    map.setCenter(points[0], defaultZoomLevel);
  }
}

So this takes the array of points, and iterates over them creating a marker as it goes, centering on the first item in the list (not clever, but it worked for me).

OTHER TIPS

Try the Marker Manager API, it's easier to deal with. Here's the Google example:

function setupMap() {
 if (GBrowserIsCompatible()) {
   map = new GMap2(document.getElementById("map"));
   map.addControl(new GLargeMapControl());
   map.setCenter(new GLatLng(41, -98), 4);
   window.setTimeout(setupWeatherMarkers, 0);
 }
}

function getWeatherMarkers(n) {
  var batch = [];
  for (var i = 0; i < n; ++i) {
    batch.push(new GMarker(getRandomPoint(), 
      { icon: getWeatherIcon() }));
  }
  return batch;
}

function setupWeatherMarkers() {
  mgr = new GMarkerManager(map);
  mgr.addMarkers(getWeatherMarkers(20), 3);
  mgr.addMarkers(getWeatherMarkers(200), 6);
  mgr.addMarkers(getWeatherMarkers(1000), 8);
  mgr.refresh();
}

I don't think Google maps can show more than one info window at a time, so when you open the second one, the first one closes.

Edit: Markers also don't automatically open the information window automatically when you click on them. You need to attach a click handler to the marker that calls the showInfoWindowHtml method. I use a helper function that creates a marker and adds the click handler automatically.

function createMarkerHtml(point, title, html) {
    var marker = new GMarker(point, { title: title });
    GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
    return marker;
}

map.addOverlay(createMarkerHtml(new GLatLng(<%=coordinates%>), "Marker 1", html));
map.addOverlay(createMarkerHtml(new GLatLng(31.977211,35.951729), "Marker 2", html2));
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top