Home/ Questions/Q 7847377
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T17:52:31+00:00

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

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0