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)

Solution 1

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://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Solution 2

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

Solution 3

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

Solution 4

obeattie answered your question pretty good. But from your example code, it seems like you also want the map to zoom to the area containing the markers. To do this with multiple markers, you can create a GLatLngBounds that you extend for each marker. You can then get the center and zoom that will fit for your collection of markers from the bounds object.

var markersBounds = GLatLngBounds(); var coord = null; for (coord in markerCoords){ coord = new GMarker(coord); map.addOverlay(); markersBounds.extend(coord); };

var markersCenter = markersBounds.getCenter();
var markersZoom = G_HYBRID_MAP.getBoundsZoomLevel(markersBounds);

map.setCenter(markersCenter, markersZoom);

I'm not 100% sure about the G_HYBRID_MAP.getBoundsZoomLevel, but if I remember correctly, G_HYBRID_MAP is an instance of GMapType.

View more solutions

Comments

[Maen]

Thanks, how about the last part of my question??? Is it possible to build the Script as a String and then pass it as variable?

[Matthew Lock]

Since you are going through the same latlng1 array twice why have a single for loop and call map1.addOverlay and latlngbounds in the same loop?