Question

13

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

rated 0 times [ 16] [ 3] / answers: 1 / hits: 45030 / 16 Years ago, tue, march 3, 2009, 12:00:00

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

madelyn

Add To Favorites

Follow

Total Points: 449

Total Questions: 100

Total Answers: 100

Location: Seychelles

Member since Fri, May 7, 2021

3 Years ago

madelyn questions

1 Select value doesnt change the first time I trigger onChange event when using setSate React

Tue, Jan 11, 22, 00:00, 2 Years ago

1 React Native performance slow

Wed, Jul 28, 21, 00:00, 3 Years ago

1 MUI Datatable custom toolbar

Wed, Jul 14, 21, 00:00, 3 Years ago

1 Multi row swiper not working in react from swiper.js

Sat, Nov 7, 20, 00:00, 4 Years ago

1 How to make step wizard form in ReactJs?

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 16 Years ago marinalyssak · Accepted Answer

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:

when adding the overlay to the map

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