GoogleMaps InfoWindow appear at a corner

Question

here is my code in html to generate 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 'stupid' method I use to pass data from ruby on rails controller to javascript.

for all marker,the infowindow all appear at corner. But for my another map(which have only one marker with infowindow)it works fine.

This infowindow shift to corner What might be my problem?why this infowindow appear in wrong position?Instead of just above the marker?

EDIT:

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

when the listener calls back,the value inside marker is i ,which is not a actual number,so the marker display at a corner.I feel the problem is can't pass variable into addListener,can only put in actual number.How to solve this?

score 2 · Answer 1 · answered Sep 11 '14 at 11:06

2

The problem is with your MarkerWithLabel library. Infowindow take position from marker. Try use this link http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html . It has all the things that you want to implement. It it's not work then you can also set position for infowindow with setPosition() function just pass latlng that you used to create marker and you are done.

answered Sep 11 '14 at 11:06

Dipak Gupta

7,321
1
20
32

Thank you~your link is help full,but my info window syntax same as this link,and the infowinds works fine for single marker.so I think is some internal problem? – Sep 12 '14 at 01:39

score 2 · Accepted Answer · edited May 23 '17 at 12:33

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

See JavaScript closure inside loops – simple practical example for sample solutions to this problem, and How do JavaScript closures work for more information about closures in JavaScript in general.

score 1 · Answer 3 · edited May 23 '17 at 11:45

1

i dont recommend using new gem just to pass data from ruby to js...you can do this simply by many ways...your code seems good but i cannot say how gon is handling your js script.Please take a look at this similar question where i have implemented the same dynamic map with dynamic markers and infowindows.This code is working great

see here

edited May 23 '17 at 11:45

Community

1
1

answered Sep 16 '14 at 10:28

Milind

4,535
2
26
58

GoogleMaps InfoWindow appear at a corner

3 Answers3