Cómo usar la API de Google Maps con múltiples marcadores en el mismo mapa

Question

Entonces, tengo el siguiente script para usar la API de Google Maps, todo está bien, pero necesito crear un mapa que tenga más de un Marcador (el ícono en forma de globo que señala algo) y necesito cada uno de esos marcadores para apuntar a un área diferente del mapa (es decir, diferentes coordenadas), ¿cómo puedo hacerlo?

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

Una pregunta más, si paso el texto del Script como variable, digamos algo como:

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

y mi <% = ScriptText% > será una cadena que construiré y asignaré su valor a una variable Friend o Public llamada ScriptText, ¿se ejecutará y funcionará correctamente? (Estoy haciendo esto para hacer que mi script sea dinámico y diferente en función de cómo lo construyo como STRING, debido a mi analfabetismo en javascripting; P)

Answer 1

obeattie y gregers tienen razón. En general, debe almacenar los parámetros del marcador en algún tipo de matriz que luego usará al menos dos veces:

1. al agregar la superposición al mapa
2. al agregarlo a un objeto GLatLngBounds para calcular el punto central y el nivel de zoom

La matriz o los marcadores se verían como una matriz de objetos, algo así como:

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

El código para agregar marcadores se vería similar a:

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

En cuanto a su pregunta sobre el uso del script del lado del servidor dentro de JavaScript del lado del cliente, sí, puede mezclarlos. A juzgar por su descripción, creo que esto es lo que debe hacer:

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

He publicado un artículo en: http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 2

Deberá crear un nuevo GMarker para cada lugar que desee marcar en el mapa. Hay bastante buena documentación disponible aquí para GLatLng s.

Para crear un <=>, verá en la documentación que primero necesita crear un <=> que represente la ubicación donde desea colocar el marcador. No ha mencionado querer ningún contenido en un globo, por lo que supongo que es solo el marcador que busca. En su caso, el código probablemente se vería así:

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

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

Estoy seguro de que probablemente pueda decir exactamente lo que está pasando aquí, pero por si acaso, creo una matriz de <=> objetos (esto puede ser de cualquier longitud [dentro de los límites jaja]), y luego iterar sobre él , agregando marcadores al mapa para cada <=> definido en la matriz.

Si planea crear muchos marcadores, probablemente le resulte útil usar el Administrador de marcadores , que acelerará la representación de muchos marcadores simultáneamente (al no mostrar marcadores fuera de la pantalla y condensarlos en la pantalla si hay muchos en una región de la pantalla) .

Answer 3

obeattie respondió a tu pregunta bastante bien. Pero a partir de su código de ejemplo, parece que también desea que el mapa se acerque al área que contiene los marcadores. Para hacer esto con varios marcadores, puede crear un GLatLngBounds que extiendes para cada marcador. Luego, puede obtener el centro y el zoom que se ajustarán a su colección de marcadores del objeto de límites.

    var markersBounds = GLatLngBounds ();     var coord = null;     para (coord en markerCoords) {         coord = nuevo GMarker (coord);         map.addOverlay ();         markersBounds.extend (coord);     };

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

map.setCenter(markersCenter, markersZoom);

No estoy 100% seguro de G_HYBRID_MAP. getBoundsZoomLevel , pero si recuerdo correctamente, G_HYBRID_MAP es una instancia de GMapType .

Answer 4

Tengo algo como esto pero los eventos no funcionan. ¿Puedo agregar oyentes dentro de un constructor de objeto?

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