Opening wrong info window Google Maps v3

Question

Possible Duplicate:
Google Maps JS API v3 - Simple Multiple Marker Example

On my project, you can create markers on the map, and then open a infowindow to put some infos and save then on a database, but when you create a marker, and then another marker, if you click on the first marker it open the infowindow of the second marker.

What can be wrong ? This is my code: (This is a simplified code, for full code access here)

var marker;
var infoWindow;
function goma()
{
  google.maps.event.addDomListener(teste, 'click', function() 
   {
     doMark = true;     
     doMark2 = false;           
    });
    markNow()

    function markNow(){   

//Marker1
google.maps.event.addListener(map, "click", function(event) 
{

    if (doMark == true && doMark2 == false){


    marker = new google.maps.Marker({
                 position: event.latLng, 
                 map: map, icon: 'Imagens/Oficina.png',
                 shadow: 'Imagens/Oficinasombra.png',
                 draggable : true,
                 animation: google.maps.Animation.DROP});
    google.maps.event.addListener(marker,'click',showWindow);

    doMark = false;
    }

    //Marker2
    else if (doMark2 == true && doMark == false){

   marker = new google.maps.Marker({
                 position: event.latLng, 
                 map: map, icon: 'Imagens/Lojas.png',
                 shadow: 'Imagens/Oficinasombra.png',
                 draggable : true,
                 animation: google.maps.Animation.DROP});
    google.maps.event.addListener(marker,'click',showWindow);


    doMark2 = false;
    }
}
);
var html = "<table>" +
   "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
   "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" +
   "<tr><td>Tipo:</td> <td><select id='type'>" +
   "<option value='oficina' SELECTED>oficina</option>" +
   "<option value='restaurante'>restaurante</option>" +
   "</select> </td></tr>" +
   "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/>     </td></tr>";

}

function showWindow(event) 
{
infoWindow.setContent(html); 
infoWindow.open(map,marker); 
}

score 3 · Answer 1 · answered Sep 15 '12 at 19:42

Calling infowindow.open(map, marker) calls the last marker as you have seen.You need to identify the marker clicked to attach the infowindow to this.

Change infowindow.open(map, marker); to infowindow.open(map, this);

As the page you indicated was not working I had to use an older version to run a demo. This my code for markNow()

function markNow(){   

google.maps.event.addListener(map, "click", function(event) 
{
    if (doMark == true){
    alert("Marker 1 Chosen");
    marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    icon: 'Imagens/Oficina.png',
    });
    }
    if (doMark2 == true){
    alert("Marker 2 Chosen");
    marker = new google.maps.Marker({ 
    position: event.latLng,
    map: map,
    icon: 'Imagens/Lojas.png',
    });
    }
    //if (doMark ==1)
    google.maps.event.addListener(marker, "click", function() 
    {
        infowindow.open(map, this);

    }


    );

}
);
var html = "<table>" +
   "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
   "<tr><td>Ensdereco:</td> <td><input type='text' id='address'/></td> </tr>" +
   "<tr><td>Tipo:</td> <td><select id='type'>" +
   "<option value='oficina' SELECTED>oficina</option>" +
   "<option value='restaurante'>restaurante</option>" +
   "</select> </td></tr>" +
   "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/>        </td></tr>";

infowindow = new google.maps.InfoWindow({content: html});
}

score 2 · Accepted Answer · answered Sep 14 '12 at 06:14

2

Actually a separate listener should be attached to each marker in your function markNow( )-

 marker = new google.maps.Marker({
                     position: event.latLng, 
                     map: map, icon: 'Imagens/Oficina.png',
                     shadow: 'Imagens/Oficinasombra.png',
                     draggable : true,
                     animation: google.maps.Animation.DROP});
google.maps.event.addListener(marker,'click',showWindow);

And then-

function showWindow(event) 
{
infoWindow.setContent(html); 
infoWindow.open(map,marker); 
}

answered Sep 14 '12 at 06:14

Shiridish

4,942
5
33
64

Hope this solves your problem. Let me know if you have an issue – Shiridish Sep 14 '12 at 06:15
I tried to put this code on my project, inside the markNow(); and out of the functions, but don't worked =/. – Fred Vicentin Sep 14 '12 at 11:25
can you show the code with the change you have made? There may be a mistake somewhere – Shiridish Sep 14 '12 at 11:48
I updated my code, take a check =), I dont know why dont work. The markers dont open, you can check my full code on the link that I had put on my ask, if you want – Fred Vicentin Sep 14 '12 at 12:03
You have some errors. Your `var html` is actually not accessible in the showWindow. So you should declare the var html in the global scope along with var marker; and var infoWindow; and then assign the text as you did. See if this change solves. – Shiridish Sep 14 '12 at 12:19
Seems your problem is solved? Did it? – Shiridish Sep 14 '12 at 12:26
Dont worked =/, i put the html on the global, but still dont working, dont open any infowindow, what I need to remove of the code when I put your code ? – Fred Vicentin Sep 14 '12 at 12:56
You can check my code on the example page and see the sorcecode if you want to check the problem =), thank you for the patience – Fred Vicentin Sep 14 '12 at 13:14
I have actually seen that an info window was opened yesterday when clicked on a marker with text box, etc. I dont know why you have changed your code again. The problem is that you haven't initialized infoWindow(you have commented that code). Write this in showWindow()-`infoWindow = new google.maps.InfoWindow({content: html});` – Shiridish Sep 15 '12 at 04:14

score 0 · Answer 3 · edited May 23 '17 at 12:01

0

This is a problem with closures in that your loop variable is always referencing the last value.

See Google Maps JS API v3 - Simple Multiple Marker Example.

edited May 23 '17 at 12:01

Community

1
1

answered Sep 13 '12 at 21:21

Chad Killingsworth

14,360
2
34
57

Opening wrong info window Google Maps v3

3 Answers3