Question

i made an array of all the places that i need to mark in my map olso the info of each mark like this:

 var paises = [];
 paises.push([new google.maps.LatLng(4.214943141390651, -73.828125), '<div class="mCont"><h2 class="mPais">Colombia</h2><p class="mPInfo">Donec mattis faucibus hendrerit. Cras facilisis urna id odio venenatis a porta purus vehicula.</p></div>']);
 paises.push([new google.maps.LatLng(17.727758609852284, -4.21875), '<div class="mCont"><h2 class="mPais">Surafrica</h2><p class="mPInfo">Cras facilisis urna id odio venenatis a porta purus vehicula.</p></div>']);
 paises.push([new google.maps.LatLng(40.245991504199026, 126.826171875), '<div class="mCont"><h2 class="mPais">Korea</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);

also i had to create this function to set all marks and set the info on each mark and when i click the marker it open the info window and center the marker:

(function(i, marker){

        //creamos el evento click sobre las marcadores para que habran la ventana de informacion
         google.maps.event.addListener(marker, 'click', function(){
                var ll = paises[i][0];


                if(!infowindow){
                    infowindow= new google.maps.InfoWindow();
                    }
               infowindow.setContent(paises[i][1]);
               //open infowindow
               infowindow.open(map, marker);
               map.setCenter(ll);

            });
        })(i, marker);

The problem occurs when i tri to clic the last country of the array (Korea), the map zooms in to this last marker ….

Why this only happens with the last country i pushed in the array.

Tks in advance .. and sorry for my English

this is my entire code:

window.onload = function(){

var opt = {
    center:new google.maps.LatLng(25.641526,-36.416019),  
    mapTypeControlOptions:{
        position: google.maps.ControlPosition.TOP
        },
        zoom:3,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    scrollwheel:false,
    };


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


 var paises = [];
 paises.push([new google.maps.LatLng(4.214943141390651, -73.828125), '<div class="mCont"><h2 class="mPais">Colombia</h2><p class="mPInfo">Donec mattis faucibus hendrerit. Cras facilisis urna id odio venenatis a porta purus vehicula.</p></div>']);
 paises.push([new google.maps.LatLng(17.727758609852284, -4.21875), '<div class="mCont"><h2 class="mPais">Surafrica</h2><p class="mPInfo">Cras facilisis urna id odio venenatis a porta purus vehicula.</p></div>']);
 paises.push([new google.maps.LatLng(40.245991504199026, 126.826171875), '<div class="mCont"><h2 class="mPais">Korea</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(52.855864177853995, -1.7578125), '<div class="mCont"><h2 class="mPais">Inglaterra</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(52.5897007687178, 18.369140625), '<div class="mCont"><h2 class="mPais">Polonia</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(39.095962936305476, -98.349609375), '<div class="mCont"><h2 class="mPais">Estados Unidos</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(57.279042764977774, -107.841796875), '<div class="mCont"><h2 class="mPais">Canada</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(24.206889622398023, -103.0078125), '<div class="mCont"><h2 class="mPais">M&eacute;xico</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(15.114552871944102, -87.5390625), '<div class="mCont"><h2 class="mPais">Honduras</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(17.189877, -88.49765), '<div class="mCont"><h2 class="mPais">Belice</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(13.923403897723347, -89.208984375), '<div class="mCont"><h2 class="mPais">El Salvador</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(15.665354182093287, -90.2197265625), '<div class="mCont"><h2 class="mPais">Guatemala</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(9.145486056167277, -79.5849609375), '<div class="mCont"><h2 class="mPais">Panama</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(10.01212955790814, -84.111328125), '<div class="mCont"><h2 class="mPais">Costa Rica</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(18.312810846425442, -77.87109375), '<div class="mCont"><h2 class="mPais">Jamaica</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(-26.588527147308614, -70.3125), '<div class="mCont"><h2 class="mPais">Chile</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(7.710991655433229, -65.7421875), '<div class="mCont"><h2 class="mPais">Venezuela</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(42.682435398386204, 12.48046875), '<div class="mCont"><h2 class="mPais">Italia</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(-1.2303741774326018, -78.92578125), '<div class="mCont"><h2 class="mPais">Ecuador</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(-9.622414142924791, -75.234375), '<div class="mCont"><h2 class="mPais">Per&uacute;</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(18.250219977065594, -66.5771484375), '<div class="mCont"><h2 class="mPais">Puerto Rico</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
  paises.push([new google.maps.LatLng(-16.941915, -64.577637), '<div class="mCont"><h2  class="mPais">Bolivia</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
    var sombra = new google.maps.MarkerImage(
'http://localhost/masterdent/wp-content/themes/masterdent/images/shadow.png',
null,
null,
new google.maps.Point(28, 53)
);

var bounds = new google.maps.LatLngBounds();


     for(var i =0; i < paises.length; i++){

 var marker = new google.maps.Marker({
    position: paises[i][0],
    icon: 'http://localhost/masterdent/wp-content/themes/masterdent/images/pin.png',
    map:map,
    shadow:sombra
    });

    var infowindow;

    (function(i, marker){
         google.maps.event.addListener(marker, 'click', function(){
                var ll = paises[i][0];


                if(!infowindow){
                    infowindow= new google.maps.InfoWindow();
                    }
               infowindow.setContent(paises[i][1]);

               infowindow.open(map, marker);
               map.setCenter(ll);

            });
        })(i, marker);


 bounds.extend(paises[i][0]);
 }   
    map.fitBounds(bounds);
    })(i, marker);
     }

    })();

Answer 1

This is a classic for loop variable closure problem. Basically the i variable in your for loop is visible after it executes and thus whatever the i variable is set at after execution, that will be active still. Therefore, try making another function that does not use the looping variable. See example below:

for(var i =0; i < paises.length; i++){
   makemarker(paises[i]);
}

var infowindow;

function makemarker(obj)
{
    var marker = new google.maps.Marker({
        position: obj[0],
        icon: 'icon',
        map:map,
        });

    google.maps.event.addListener(marker, 'click', function()
    {
      map.setCenter(obj[0]);
      if(!infowindow)
      {
          infowindow= new google.maps.InfoWindow();
      }
      infowindow.setContent(obj[1]);
      infowindow.open(map, marker);
    }
   );
}