How to use google maps API with multiple markers on the same map

Question

So, i have the following script to use the google maps API, its all fine, but i need to create a map that has more than one Marker (the balloon shaped icon pointing to something) and i need each of those markers to point on a different area of the map (i.e. different coordinates), how can i do it?

<script type="text/javascript">

         function load() {

        var map = new GMap2(document.getElementById("map"));
        var marker = new GMarker(new GLatLng(<%=coordinates%>));

        var html="<img src='simplemap_logo.jpg' width='20' height='20'/> " +
             "<%=maptitle%><br/>" +
             "<%=text%>";



        map.setCenter(new GLatLng(<%=coordinates%>), <%=zoom%>)
        map.setMapType(G_HYBRID_MAP);
        map.addOverlay(marker);
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GMapTypeControl());


        marker.openInfoWindowHtml(html);
        }

        //]]>
        </script>

One more question, if i pass the Script text as a variable, lets say something like:

<script type="text/javascript">
<%=ScriptText%>
</script>

and my <%=ScriptText%> will be a string which i will build and assign its value to a Friend or Public variable called ScriptText, will it still run and work properly? (i am doing this to make my script dynamic and different based on how i build it as a STRING, due to my illiteracy in javascripting ;P)

Answer 1

You'll need to create a new GMarker for each place you want to mark on the map. There is quite good documentation available here for GMarkers.

To create a GMarker, you'll see from the documentation that you first need to create a GLatLng representing the location you want to drop the marker. You haven't mentioned wanting any content in a balloon, so I'm assuming it's just the marker you're after. In your case, the code would probably look something like this:

var markerCoords = [
    new GLatLng(<latitude>, <longitude>),
    new GLatLng(<latitude>, <longitude>),
    [...]
];

for (coord in markerCoords){
    map.addOverlay(new GMarker(coord));
};

I'm sure you can probably tell exactly what's going on here, but just in case, I create an array of GLatLng objects (this can be of any length [within bounds haha]), and then iterate over it, adding markers to the map for each GLatLng defined in the array.

If you are planning on creating a lot of markers, you'll probably find it useful to use the Marker Manager, which will speed up rendering a lot of markers simultaneously (by not rendering off-screen markers and condensing on-screen ones if there are a lot in one region of the screen).

Answer 2

obeattie and gregers are both right. In general, you need to store the marker parameters in some kind of array which you will later use at-least twice:

1. when adding the overlay to the map
2. when adding it to a GLatLngBounds object to calculate the center point and zoom level

The array or markers would look like an array of objects, something like:

var latlng1 = [
    new GLatLng( 48.1234, -120.1234 ),
    new GLatLng( 48.5678, -120.5678 ),
    new GLatLng( 48.9101, -120.9112 ),
    new GLatLng( 48.1121, -120.1314 ),
    new GLatLng( 48.3145, -120.1516 ),
    new GLatLng( 48.1617, -120.1718 ),
    new GLatLng( 48.1819, -120.1920 ),
    new GLatLng( 48.2021, -120.2122 )
];

The code for adding markers would look something similar to:

  // assume that map1 is an instance of a GMap2 object

  // #0 -- google maps api requires us to call setCenter first before calling any other operation on the map
  map1.setCenter( new GLatLng( 0, 0 ), 0 );

  // #1 -- add markers
  for ( var i = 0; i < latlng1.length; i++ )
  {
    var marker = new GMarker( latlng1[ i ] );
    map1.addOverlay( marker );
  }

  // #2a -- calculate center
  var latlngbounds = new GLatLngBounds( );
  for ( var i = 0; i < latlng1.length; i++ )
  {
    latlngbounds.extend( latlng1[ i ] );
  }

  // #2b -- set center using the calculated values
  map1.setCenter( latlngbounds.getCenter( ), map1.getBoundsZoomLevel( latlngbounds ) );

As for your question about using server side script inside client side javascript, yes you can mix them together. Judging by your description, i think this is what you need to do:

<script type="text/javascript">
    var latlng1 = new Array( );
</script>
<script type="text/javascript">
    <%
        do until rs.eof
            %>
            latlng1.push( new GLatLng( parseFloat( '<%= rs( "Lat" ) %>' ), parseFloat( '<%= rs( "Lng" ) %>' ) ) );
            <%
            rs.movenext
        loop
    %>
</script>

I've posted an article at: http://911-need-code-help.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 3

I am unable to edit my post (see above), so I'll post some revisions. Its not precisely what you want, its just a rough outline:

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( ) )
    {
     // initialize map etc here and other yada yada
     for ( var i in markers )
     {
      map.addOverlay( create_gmarker( markers[ i ] ) );
     }
    }
}

The example above also demonstrates naive usage of javascript [arrays] and {objects}. You should use some :)

Answer 4

I have something like this but events doesn't work. Can I add listeners inside an constructor of object?

//Localization object onstructor
function Localization(width, height, description, img_source){
    this.point = new GLatLng(width, height);
    this.marker = new GMarker(this.point);
    this.description = description;
    this.img_source = img_source;
    GEvent.addListener(this.marker, "click", function(){marker.openInfoWindowHtml(this.description);});
}

//map localizations to show on map
var localizations = [
    new Localization( 52.9015797, 15.2602200, 'Poznań1', 'eye1' ),
    new Localization( 52.9025797, 15.1602200, 'Poznań2', 'eye2' ),
    new Localization( 52.9035797, 15.2702200, 'Poznań3', 'eye3' ),
    new Localization( 52.9045797, 15.2102200, 'Poznań4', 'eye4' ),
]

var map = new GMap2(document.getElementById("mapa"));
map.setCenter(localizations[3].point, 13);
map.setUIToDefault();


for(i=0; i < localizations.length; i++){
    localization=localizations[i];
    map.addOverlay(localization.marker);
    localization.marker.openInfoWindowHtml(localization.description);
}