Como usar o Google Maps API com vários marcadores no mesmo mapa

Question

Então, eu tenho o seguinte script para usar a API do Google Maps, é tudo bem, mas eu preciso para criar um mapa que tem mais de um marcador (o balão em forma de ícone apontando para alguma coisa) e eu preciso de cada um desses marcadores ao ponto em uma área diferente do mapa (ou seja, coordenadas diferentes), como posso fazê-lo?

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

Mais uma pergunta, se eu passar o texto do roteiro como uma variável, permite dizer algo como:

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

e meu <% = ScriptText%> será uma string que eu vou construir e atribuir o seu valor a uma variável amigo ou público chamado ScriptText, vai ainda correr e trabalho corretamente? (Eu estou fazendo isso para fazer a minha dinâmica roteiro e diferente com base em como eu construí-lo como uma string, devido ao meu analfabetismo no JavaScripting; P)

Answer 1

obeattie e Gregers dois estão certos. Em geral, você precisa armazenar os parâmetros de marcador em algum tipo de variedade que você vai usar mais tarde a-menos duas vezes:

1. ao adicionar a sobreposição ao mapa
2. ao adicioná-lo a um GLatLngBounds objeto para calcular o ponto central e o nível de zoom

A matriz ou marcadores seria parecido com um array de objetos, algo 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 )
];

O código para adicionar marcadores seria algo semelhante 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 ) );

Quanto à sua pergunta sobre o uso de script do lado do servidor dentro javascript do lado do cliente, sim, você pode misturá-los juntos. A julgar por sua descrição, eu acho que isso é o que você precisa fazer:

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

Eu publiquei um artigo em: http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 2

Você precisará criar um novo GMarker para cada lugar que você deseja marcar no mapa. Não é muito bom documentação disponível aqui para GMarkers.

Para criar um GMarker, você verá a partir da documentação que você precisa primeiro criar uma GLatLng representando o local que você quer deixar cair o marcador. Você não mencionou querendo qualquer conteúdo em um balão, então eu estou supondo que ele é apenas o marcador que você está depois. No seu caso, o código seria provavelmente algo parecido com isto:

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

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

Eu tenho certeza que você provavelmente pode dizer exatamente o que está acontecendo aqui, mas apenas no caso, eu criar uma matriz de objetos GLatLng (pode ser de qualquer comprimento [dentro de limites haha]), e, em seguida, iterar sobre ele, acrescentando marcadores para o mapa para cada GLatLng definido na matriz.

Se você está pensando em criar um monte de marcadores, você provavelmente vai achar que é útil para usar o marcador Gestor , o que irá acelerar o processamento de um lote de marcadores simultaneamente (por não prestação de fora da tela marcadores e condensar os na tela se há muito em uma região da tela) .

Answer 3

obeattie respondi a sua pergunta muito bom. Mas a partir de seu código de exemplo, parece que você também quer que o mapa para ampliar a área que contém os marcadores. Para fazer isso com vários marcadores, você pode criar um GLatLngBounds que se estendem para cada marcador. Você pode então obter o centro e zoom que vai caber para sua coleção de marcadores do objeto limites.

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

Eu não estou 100% certo sobre a G_HYBRID_MAP. getBoundsZoomLevel , mas se bem me lembro, G_HYBRID_MAP é uma instância de GMapType .

Answer 4

Eu tenho algo assim, mas os eventos não funciona. Posso adicionar ouvintes dentro de um construtor 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);
}