ansaurus

Question

Answer 1

+1 A:

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();
}

Diodeus 2009-03-03 14:36:49

Answer 2

+1 A:

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));

Matthew Crumley 2009-03-03 14:39:38

But the second one is not being showed at all, i close the first one and the second doesn't appear, i also click on the marker body itself, it doesn't show the information window again, not even for the one that used to show...

Maen 2009-03-03 14:43:00

Answer 3

+1 A:

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).

Zhaph - Ben Duguid 2009-03-03 17:37:17

Answer 4

A:

I'll outline the method for adding multiple markers with separate tooltips below:

var map;
var markers = new Array( );
markers.push(
    {
        latlng: new GLatLng( parseFloat( '47.59' ), parseFloat( '-120.65' ) ),
        name: 'Some html here'
    }
);
markers.push(
    {
        latlng: new GLatLng( parseFloat( '48.84' ), parseFloat( '-122.59' ) ),
        name: 'Some html here as well'
    }
);
markers.push(
    {
        latlng: new GLatLng( parseFloat( '47.83' ), parseFloat( '-120.01' ) ),
        name: 'And some more html...'
    }
);
function create_gmarker( marker )
{
    var gmarker = new GMarker( marker.latlng );
    GEvent.addListener( gmarker, 'click', function( ) {
                gmarker.openInfoWindowHtml( marker.name );
        }
    );
    return gmarker;
}
function initialize_gmap( )
{
    if ( GBrowserIsCompatible( ) )
    {
        map = new GMap2( document.getElementById( 'map1div' ) );
        map.addControl( new GSmallMapControl( ) );
        map.addControl( new GMenuMapTypeControl( ) );
        map.setCenter( markers[ 0 ].latlng, 0 );
        for ( var i in markers )
        {
            map.addOverlay( create_gmarker( markers[ i ] ) );
        }
    }
}

Also See if this page helps (view source this page to see the code):

Salman A 2009-05-19 08:02:20

ansaurus

tags:

views:

answers:

Multiple Markers on a Google Map

related questions