Question

In my web application, I am using Google Maps JavaScript API v3. In a web page I am creating a google map using following code:

 var centerLatLng = new google.maps.LatLng(obj.centerlat, obj.centerlong);
 var myOptions = {
     center: centerLatLng,
     zoom: 17,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     draggable: true
 };

 var map = new google.maps.Map(document.getElementById("map_convas"), myOptions);

 var markerArray = obj.locations;
 var triangleCoords = new Array();

 for(var x=0;x<markerArray.length;x++){
      triangleCoords.push(new google.maps.LatLng(markerArray[x].latitude, markerArray[x].longitude));
 }

 var polypath = new google.maps.Polyline({
       path: triangleCoords,
       strokeColor: "#FF0000",
       strokeOpacity: 1.0,
       strokeWeight: 2
 });

 polypath.setMap(map);

This code shows map correctly. Then I have a button under that map. When I click on that button another google javascript map should be displayed in a div called map_convas_1, which is in the same page. Code for this I wrote is following:

 $('#secondmapbtn').unbind("click");
 $('#secondmapbtn').bind('click', function(){ 


      var centerLatLng2 = new google.maps.LatLng(secondcenterlat, secondcenterlong);
 var myOptions2 = {
     center: centerLatLng2,
     zoom: 17,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     draggable: true
 };
   $('#map_convas_2').show();
 var map2 = new google.maps.Map(document.getElementById("map_convas_2"), myOptions2);

 var secondMarkerArray = secondobj.locations;

 // putting markers in map 

     for(var i=0;i<markerArray.length;i++){
      var myLatlng = new google.maps.LatLng(secondMarkerArray[i].latitude, secondMarkerArray[i].longitude);

      var marker = new google.maps.Marker({
           clickable: true,
           position: myLatlng,
           map: map2,
           zIndex: i
      });
      marker.setIcon('marker_icon.png');
}
 });

HTML for both divs are

 <div id='map_convas'></div>
 <div id='map_convas_2'></div>

and css is:

 #map_convas{
position: absolute;
    border-radius: 8px;
    width:657px; 
    height:592px;
    top: 50px;
    left: 100px;
 }

 #map_convas_2{
position: absolute;
    border-radius: 8px;
    width:657px; 
    height:592px;
    top: 700px;
    left: 100px;
    display:none;
 }

After clicking button, second map is shown but its not showing correctly. I am attaching screenshots that how first and second maps look like. If I comment the first map instance code then second map works fine. It means that problem comes when I create second map instance. Does anybody know that why second map is not OK and how to solve this problem?

Answer 1

After this line

var map2 = new google.maps.Map(document.getElementById("map_convas_2"), myOptions2);

add

 google.maps.event.trigger(map2, 'resize');

 
You may need to move that new line down the code a little, or set a Timeout. The issue is that the .show() is taking some time to reset the map size in the DOM, and the API is being told the map still has zero size when it sets it up. Consequently you only get the minimum number of tiles to show a zero-size map in the top-left corner.