CODEWITHSUNDEEP
cssgoogle-mapshtml
Merle_the_Pearl
Merle_the_Pearl

Reputation: 1521

Google Maps API v3 inside another Div

This is a drop down Div - which works with everything except GoogleMap.

I get half the map showing or maybe a 1/4 of it... When I get rid of the div's all works fine... Or is there a workaround without div's? Ideas... I tried declaring table, p etc... No luck...

Javascript Drop Down Code and Div calls

   <script type="text/javascript">
   function showElement(layer){
   var myLayer = document.getElementById(layer);
   if(myLayer.style.display=="none"){
   myLayer.style.display="block";
   myLayer.backgroundPosition="top";
   } else { 
   myLayer.style.display="none";
   }
   }
   </script>

  <div class=catlist>
  <table border=0 cellpadding=4>
  <tr>
  <td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td>
  <td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS 
  Map</b></a></td>
  </tr></table>
  </div>
  <div class="qlist" id="ed" style="display:none;">

  <div id="map" style="width: 500px; height: 250px;"></div>

  </div>

Adding the Google Javascript...

This is the actual Google Maps Javascript... Cold Fusion Plots the # markers... This works fine outside of divs... Code suggested above works to display the correct map interface... But the centering of the plot is not working... And marker shows at top left corner with above code provided...

  <div id="map" style="width: 500px; height: 250px;"></div>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript">
  </script> 

  <script type="text/javascript"> 

  var locations = [ 
["#bsname#", #gpslat#, #gpslong#, #busid#], 
  ]; 

  var map = new google.maps.Map(document.getElementById('map'), { 
  zoom: 15, 
  center: new google.maps.LatLng(#gpslat#, #gpslong#), 
  mapTypeId: google.maps.MapTypeId.ROADMAP
  }); 

  var infowindow = new google.maps.InfoWindow(); 

  var marker, i; 

  for (i = 0; i < locations.length; i++) {   
  marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map 
  }); 

  google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
    } 
  })(marker, i)); 
  } 

</script>

Upvotes: 2

Views: 4240

Answers (2)

Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

The changes I made were:

  • triggering a resize when the div is expanded
  • centering the map after the resize
  • making map and locations variables global.

The jsfiddle is here:

http://jsfiddle.net/Mgp9z/9

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };

// CHANGED locations and map now global so they refer to the same thing in both initialize and showElement

var locations = [ 
["a", 40.2, -88.8, "k"], 
  ]; 

var map;

function initialize() {
   map = new google.maps.Map(document.getElementById('map'), { 
  // CHANGED
      zoom: 10, 
  center: new google.maps.LatLng(40.2, -88.8), 
  mapTypeId: google.maps.MapTypeId.ROADMAP
  }); 

  var infowindow = new google.maps.InfoWindow(); 

  var marker, i; 

  for (i = 0; i < locations.length; i++) {   
  marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map 
  }); 

  google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
    } 
  })(marker, i)); 
  } 

      }
function showElement(layer){
   var myLayer = document.getElementById(layer);
   if(myLayer.style.display=="none"){
   myLayer.style.display="block";
   myLayer.backgroundPosition="top";

   // *** add the trigger here ***
   google.maps.event.trigger(map, 'resize');
   var mylat=locations[0][1];
   var mylng=locations[0][2];
   map.setCenter(new google.maps.LatLng(mylat,mylng));

   } else { 
   myLayer.style.display="none";
   }
}

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
<div class=catlist>
  <table border=0 cellpadding=4>
  <tr>
Lat:   <input type="text" id="mylat" value="40.2">
Lng:   <input type="text" id="mylng" value="-88.8">
      <!-- <td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td> -->
  <td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS 
  Map</b></a></td>
  </tr></table>
  </div>
  <div class="qlist" id="ed" style="display:none;">

  <div id="map" style="width: 500px; height: 250px;"></div>

  </div>
  </body>
</html>

Upvotes: 5

Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

Making the map resize after you show the div should work:

From the docs: "Developers should trigger this event on the map when the div changes size:" google.maps.event.trigger(map, 'resize') .

EDIT - I'll be more specific, please try again

function showElement(layer){
   var myLayer = document.getElementById(layer);
   if(myLayer.style.display=="none"){
   myLayer.style.display="block";
   myLayer.backgroundPosition="top";

   // *** add the trigger here ***
   google.maps.event.trigger(map, 'resize')

   } else { 
   myLayer.style.display="none";
   }
}

Demo: http://jsfiddle.net/Mgp9z/

Upvotes: 1

Related Questions