Necesito mostrar varios marcadores en un mapa, cada uno con su propio
infowindow. He creado los marcadores individuales, sin ningún problema,
pero no saben cómo crear un infowindows para cada uno.

Estoy generando un mapa utilizando la API V3 dentro de un ASP basado en la web,
con marcadores de ser creado a partir de un conjunto de DB registros. Los marcadores son
creado por el bucle a través de una rs y la definición de un marcador() con el
las variables relevantes:

            var myLatlng = new google.maps.LatLng(lat,long);
            var marker = new google.maps.Marker({
                    map: map,
                    position: myLatlng,
                    title: 'locationname',
                    icon: 'http://google-maps-icons.googlecode.com/files/park.png'
            });

Esto es la creación de todos los marcadores pertinentes en sus lugares correctos.

Lo que tengo que hacer ahora, y no estoy seguro de cómo lograr es darle a cada
de ellos sus propias infowindow que puedo usar para mostrar
la información y los enlaces pertinentes a ese marcador.

Fuente

                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script language="javascript">
$(document).ready(function() {
//Google Maps 
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(-26.66, 122.25),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- While locations_haslatlong not BOF.EOF -->
<% While ((Repeat1__numRows <> 0) AND (NOT locations_haslatlong.EOF)) %>
var myLatlng = new google.maps.LatLng(<%=(locations_haslatlong.Fields.Item("llat").Value)%>,<%=(locations_haslatlong.Fields.Item("llong").Value)%>);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: '<%=(locations_haslatlong.Fields.Item("ldescription").Value)%>',
icon: 'http://google-maps-icons.googlecode.com/files/park.png',
clickable: true,
}); 
<% 
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
locations_haslatlong.MoveNext()
Wend
%>           
<!-- End While locations_haslatlong not BOF.EOF -->
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(marker, 'dblclick', function() {
map.setZoom(14);
});
});

5 Comentarios

  1. 6

    El problema es que en la llamada a addListener()

    Mientras que el bucle a través de su conjunto de registros y escribir el javascript de nuevo y de nuevo y de nuevo y de nuevo para añadir un marcador en el mapa, sólo llame a la escucha de eventos de una sola vez. También, usted nunca realmente crear objetos de la InfoWindow tipo, por lo que no tiene nada que llame open() en.

    La rápido y sucio solución es agregar esto después de crear su marker pero antes de terminar su While bucle.

    var infowindow = new google.maps.InfoWindow({ 
    content: '<%=(locations_haslatlong.Fields.Item("field_or_fields_containing_data_for_info_window").Value)%>' 
    });
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });

    Pero no hacer esto, usted está utilizando VB para escribir totalmente redundante Javascript para usted, cuando usted podría estar usando VB para ir a buscar lo que necesita y, a continuación, Javascript vamos a hacer el trabajo que necesita hacerse con los datos.

    La mejor manera de hacer lo que usted está tratando de hacer es reescribir su VB para crear una matriz de objetos de Javascript, cada uno que contiene un parque de la información. A continuación, el uso de Javascript para recorrer la matriz y configurar los marcadores y sus asociados un infowindows para usted.

    Esbozar la solución propuesta:

    // Create an array to hold a series of generic objects
    // Each one will represent an individual marker, and contain all the 
    // information we need for that marker.  This way, we can reuse the data
    // on the client-side in other scripts as well.
    var locations_array = [<%
    While (
    (Repeat1__numRows <> 0) 
    AND (NOT locations_haslatlong.EOF)
    ) 
    %>
    { 
    latitude: <%=(locations_haslatlong.Fields.Item("llat").Value)%>,
    longitude: <%=(locations_haslatlong.Fields.Item("llong").Value)%>,
    title: "<%=(locations_haslatlong.Fields.Item("ldescription").Value)%>",
    infoWindowContent: "<%=(locations_haslatlong.Fields.Item("field_or_fields_containing_data_for_info_window").Value)%>"
    },
    <% 
    Repeat1__index=Repeat1__index+1
    Repeat1__numRows=Repeat1__numRows-1
    locations_haslatlong.MoveNext()
    Wend
    %>];
    var x = locations_array.length;
    while (--x) {
    // Grab an individual park object out of our array
    var _park = locations_array[x]
    var myLatlng = new google.maps.LatLng(_park.latitude,_park.longitude);
    var marker = new google.maps.Marker({
    map: map,
    position: myLatlng,
    title: _park.title,
    icon: 'http://google-maps-icons.googlecode.com/files/park.png',
    clickable: true,
    }); 
    var infowindow = new google.maps.InfoWindow({ 
    content: _park.infoWindowContent
    });
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });
    }
    • Gracias, esto me ha puesto en el camino a la iluminación (y mejor comprensión de la utilización de Matrices demasiado). Sólo se ve como algunos de los JS de salida que voy es un poco buggy, lo que está causando el mapa no carga. Firebug es reportar el siguiente problema: falta } después de la lista de la propiedad, de la Línea 85 he tiraron una copia de la resultante de código fuente en: sites.google.com/site/forestproductswa La única diferencia acerca de esta línea es que el resultado del campo que se usa para rellenar infoWindowContent en esa línea tiene un espacio. Todo parece perfecto lo contrario, y todo equilibrado.
    • disculpas, tuve un error en la matriz de generación de la porción. (Cuando nos pueblan title y infoWindowContent estamos a la espera de las cadenas, y por lo tanto debe poner comillas alrededor de los datos. Yo los había dejado fuera de mi respuesta original.) He editado mi respuesta.
    • Gracias, finalmente han descubierto.
    • Excelente! Me alegro de que podría ser de alguna ayuda!
    • Tratando de averiguar la manera «correcta» de hacer esto – se ve impresionante. …Creo que te refieres: locations_array[x]
    • actualizado, y gracias por las capturas!

  2. 0

    Aquí es algo que funciona (RoR /Rails /Ruby on Rails):

    <script type="text/javascript">
    function initialize() {
    var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(48.842, 2.34),
    // HYBRID ROADMAP SATELLITE TERRAIN
    mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
    <% @tiles.each do |tile| %>
    var image_id<%= tile.id %> = '<%= tile.photo.url(:icon) %>';
    var myLatLng_id<%= tile.id %> = new google.maps.LatLng(<%=h tile.lat %>,<%=h tile.long %>);
    var tileMarker_id<%= tile.id %> = new google.maps.Marker({
    position: myLatLng_id<%= tile.id %>,
    map: map,
    clickable: true,
    icon: image_id<%= tile.id %>
    });
    var infowindow_id<%= tile.id %> = new google.maps.InfoWindow({ 
    content: '<a href="<%= tile.photo.url(:original) %>"> <img src="<%= tile.photo.url(:large) %>" height="400" ALIGN="left" border="None"></a>'
    //'Tile: <%= tile.id %><BR/> User: <%= tile.user_id %>'
    });
    google.maps.event.addListener(tileMarker_id<%= tile.id %>, 'click', function() {
    infowindow_id<%= tile.id %>.open(map,tileMarker_id<%= tile.id %>);
    });
    <% end %>
    }

    Hubo un problema en el VB/… código que fue contestado antes, el infowindow objeto debe ser único por hacer clic marcador. La Demo en: http://www.geodepollution.org/

  3. 0

    He probado el código de Sean Vieira, yo estaba luchando para obtener el infowindow mostrar a mí mismo marcadores correspondientes Info.

    Si tienes el mismo problema, intente:
    Aquí estamos estableciendo info (puede quedarse con cualquier nombre ) y, a continuación, éste va a usar.

    var marker = new google.maps.Marker({
    map: map,
    position: myLatlng,
    title: _park.title,
    info :    _park.infoWindowContent,    // note info here  
    clickable: true,
    });  

    siguiente ver el Contenido, así que estamos utilizando la información que desea establecer en el Marcador

     google.maps.event.addListener(marker , 'click', function() {
    infowindow.setContent(this.info);
    infowindow.open(map,this);
    });

    Esto funcionó para mí.

    Ref: https://tommcfarlin.com/multiple-infowindows-google-maps/

Dejar respuesta

Please enter your comment!
Please enter your name here