GoogleMaps InfoWindow appears in the corner

Question

here is my html code for creating a marker and infowindow (with ruby ​​on rails)

var marker=[] function initMap() { var latLng1 = new google.maps.LatLng(1.352083, 103.819836); var myOptions = { zoom: 12, center: latLng1, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); for(i=0;i<gon.astatic.length;i++){ var latLng = new google.maps.LatLng(gon.astatic[i][1], gon.astatic[i][2]); if(i<2){ marker[i] = new MarkerWithLabel({position: latLng, map: map,icon:"/assets/green_MarkerV.png" ,labelClass: "labels",labelContent: gon.astatic[i][3]});} else { marker[i] = new MarkerWithLabel({position: latLng, map: map,icon:"/assets/green_MarkerN.png" ,labelClass: "labels",labelContent: gon.astatic[i][3]}); } var iw =new google.maps.InfoWindow({content: 'HI' }); google.maps.event.addListener(marker[i],"mouseover",function(e){iw.open(map,marker[i]);}) } 

this gon is just some kind of "stupid" method that I use to transfer data from ruby ​​on the rails controller to javascript.

for all markers, all windows are displayed in the corner. But for my other map (which has only one marker with infowindow) it works fine.

What could be my problem? Why is this information displayed in the wrong position? Instead of just above the marker?

EDIT:

After the problem is half a day, I feel that the problem is google.maps.event.addListener(marker[i],"mouseover",function(e){iw.open(map,marker[i]);})

when the listener calls the callback, the value inside the marker is i, which is not an actual number, so the marker is displayed on the corner. I feel that the problem cannot pass the variable to addListener, you can only enter the actual number. How to solve this?

Answer 1

Each instance of the function declared inside the for loop has the same closure containing the value i , and therefore all your addListener calls essentially call iw.open(map, undefined) , since i will be at the end of the array at the end of the iteration.

See Closing JavaScript inside loops - a simple practical example for typical solutions to this problem and How JavaScript locks work for more information on closing JavaScript in general.

Answer 2

Problem with your MarkerWithLabel library. Infowindow will take a position with a marker. Try using this link http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html . It has everything that you want to implement. This does not work, then you can also set the position for the infowindow with the setPosition() function, just pass the latlng that you used to create the marker, and you're done.

Answer 3

I do not recommend using the new gem only for transferring data from ruby ​​to js ... you can do it just in different ways ... your code seems good, but I can not tell how gon handles your js script. Please take a look to this similar question, where I implemented the same dynamic map with dynamic markers and infowindows . This code works fine

see here