javascript - style - Ventana múltiple de Google Maps

infowindow google maps

Question

Actual Tengo un google maps que mostrará algunos marcadores en el mapa de mi base de datos ... Me gustaría agregar una ventana de información cuando los usuarios hagan clic en el marcador.

Lo hice funcionar, pero el problema es que solo se muestra en el último marcador que se cargó, ¿por qué?

Aquí está el código para generar el marcador y la ventana de información.

<script type="text/javascript">
function initialize() {
    var myOptions = {
        zoom: 3,
        center: new google.maps.LatLng(41.850033, -87.6500523),
        disableDefaultUI: true,
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    setMarkers(map, offices);
}


/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var offices = [<cfoutput>#officeList#</cfoutput>];

function setMarkers(map, locations) {
    // Add markers to the map
    // Marker sizes are expressed as a Size of X,Y
    // where the origin of the image (0,0) is located
    // in the top left of the image.
    // Origins, anchor positions and coordinates of the marker
    // increase in the X direction to the right and in
    // the Y direction down.
    var image = new google.maps.MarkerImage(''images/pin.png'',
    // This marker is 20 pixels wide by 32 pixels tall.
    new google.maps.Size(14, 26),
    // The origin for this image is 0,0.
    new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at 0,32.
    new google.maps.Point(0, 32));

    for (var i = 0; i < locations.length; i++) {
        var office = locations[i];
        var myLatLng = new google.maps.LatLng(office[1], office[2]);

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: office[0],
            zIndex: office[3]
        });

        var contentString = "Hello!!!";
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        google.maps.event.addListener(marker, ''click'', function() {
            infowindow.open(map, marker);
        });
    }
}
</script>

Answer 1

También me encontré con este problema.

Así es como lo arreglé:

Usé una función para vincular un marcador a una ventana de información.

var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: office[0],
            zIndex: office[3]
        });

var contentString = "Hello!!!";
var infowindow = new google.maps.InfoWindow;

bindInfoW(marker, contentString, infowindow);

}

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

Answer 2

http://www.codefx.biz/2011/01/google-maps-api-v3-multiple-infowindows

¡De esta manera también funciona!