Cómo usar la API de google maps con varios marcadores en el mismo mapa

Question

Por lo tanto, tengo la siguiente secuencia de comandos para usar la API de Google Maps, todo está bien, pero necesito crear un mapa que tenga más de un marcador (el globo icono en forma de señalando algo) y necesito que cada uno de esos marcadores señale 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 de la escritura como una variable, permite decir algo como:

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

y mi <% = ScriptText%> será una cadena que voy a construir y asignar su valor a una variable Friend o Public llamada ScriptText, ¿seguirá ejecutándose 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, es necesario almacenar los parámetros de marcador en una especie de matriz que va a utilizar más tarde en-menos dos veces:

1. al añadir la superposición al mapa
2. cuando se añade a un objeto GLatLngBounds a calcular el punto central y el nivel de zoom

matriz o marcadores se vería 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 los marcadores que está LD aspecto algo 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)); 

cuanto a su pregunta sobre el uso de script del lado del servidor dentro JavaScript del lado del cliente, sí se puede mezclarlos entre sí. A juzgar por su descripción, creo que esto es lo que hay que 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> 

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

Answer 2

Tendrá que crear un nuevo GMarker para cada lugar que desee marca en el mapa. Hay bastante buena documentación disponible here para GMarker s.

Para crear un GMarker, verá en la documentación que primero necesita crear un GLatLng que represente la ubicación donde desea colocar el marcador. No has mencionado querer contenido en un globo, así que supongo que es solo el marcador que buscas. En su caso, el código sería probablemente algo parecido a esto:

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

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

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

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

Answer 3

obeattie respondió su 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 múltiples marcadores, puede crear un GLatLngBounds que extienda para cada marcador. Luego puede obtener el centro y el zoom que se ajustarán a su colección de marcadores desde el objeto de límites.

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

no estoy 100% seguro de la G_HYBRID_MAP. getBoundsZoomLevel, pero si no recuerdo mal, G_HYBRID_MAP es una instancia de GMapType.

Answer 4

no puedo editar mi post (véase más arriba), por lo que' Publicaré algunas revisiones. No es precisamente lo que quiere, es sólo un esbozo:

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

El ejemplo anterior también demuestra el uso de JavaScript ingenua de matrices [] {y} objetos. Deberías usar :) :)

Answer 5

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