Infowindow diferente para cada marcador array

[oscar009 0]

Olá pessoal ,

 

Esse forum tem sido de grande ajuda para mim , porém eu estou novamente com um novo problema .

Eu consegui montar o mapa com os icones , porém a infowindow que abre é igual para todos os marcadores adicionados.

 

Alguem porderia me ajudar a resolver esse problema, por exemplo : um marcador está na av. faria lima então a infowindow abre um balao com um texto da av.faria lima e outro está na av. paulista e abre um balão com um texto da av. paulista.

 

abaixo está o codigo com o exemplo no link.

Exemplo aqui

 

Agradeço desde já.

 

 

Código

 

$(document).ready(function() {

InitMap();

});

function LoadMap() {

var locations = new Array( [-23.560303,-46.657365, 1], [-23.5673552,-46.6936192, 4] );

var markers = new Array( );

var mapOptions = {

center: new google.maps.LatLng( -23.5536656,-46.6817746 ),

zoom: 13,

mapTypeId: google.maps.MapTypeId.ROADMAP,

scrollwheel: false

};

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

$.each(locations, function(index, location) {

var marker = new google.maps.Marker({

position: new google.maps.LatLng(location[0],location[1]),

map: map,

icon: 'img/marker-transparent.png'

});

var myOptions = {

content: '<div class="infobox">Aqui é av.Paulista</div>',

disableAutoPan: false,

maxWidth: 0,

pixelOffset: new google.maps.Size(-135, -200),

zIndex: null,

boxStyle: {

background: "#fff",

width: "",

height: "22px"

},

closeBoxMargin: "4px 4px 0px 2px",

closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",

infoBoxClearance: new google.maps.Size(1, 1),

position: new google.maps.LatLng(location[0], location[1]),

isHidden: false,

pane: "floatPane",

enableEventPropagation: false

};

marker.infobox = new InfoBox(myOptions);

marker.infobox.isOpen = false;

var myOptions = {

draggable: true,

content: '<div class="marker"><div class="marker-inner"></div></div>',

disableAutoPan: true,

pixelOffset: new google.maps.Size(-21, -58),

position: new google.maps.LatLng(location[0], location[1]),

closeBoxURL: "",

infoBoxClearance: new google.maps.Size( 1, 1),

isHidden: false,

// pane: "mapPane",

enableEventPropagation: true

};

marker.marker = new InfoBox(myOptions);

marker.marker.open(map, marker);

markers.push(marker);

google.maps.event.addListener(marker, "click", function (e) {

var curMarker = this;

$.each(markers, function (index, marker) {

// if marker is not the clicked marker, close the marker

if (marker !== curMarker) {

marker.infobox.close();

marker.infobox.isOpen = false;

}

});

if(curMarker.infobox.isOpen === false) {

curMarker.infobox.open(map, this);

curMarker.infobox.isOpen = true;

map.panTo(curMarker.getPosition());

} else {

curMarker.infobox.close();

curMarker.infobox.isOpen = false;

}

});

});

}

function InitMap() {

google.maps.event.addDomListener(window, 'load', LoadMap);

}

[Lucas Guima 164]

Cara, já trabalhei com a API do Google Maps e sempre achei tudo o que precisei na net ou em sua documentação, você já procurou?

 

E quando postar código, use a tag para código.