CODEWITHSUNDEEP
javascriptgoogle-maps-api-3coldfusion
Merle_the_Pearl
Merle_the_Pearl

Reputation: 1521

Google Maps Div display: none Not Centering

I've got the problematic Google Map div not showing properly 

<div id="g#arena.aid#" style="width: 600px; height: 300px; display: none"></div>

Not showing - code show map is div - but is not centered... Not centering on the marker...

Can't seem to find solution... Headache...

So listing arena's... The desire is to hide their map until called... Calling with with an image:

    <img src="../images/gps1.png" height=25 border=0 alt="Show Map" 
           onclick="javascript:showElement('g#arena.aid#'); google.maps.event.trigger(document.getElementById('g#arena.aid#'),'resize');">

Here is javascript - which displays maps fine but it is not centered on the marker...

A body onload is required for the map...

  <body onload="initialize()">

  <script type="text/javascript">
    function initialize() {

    var #arena.aid#Latlng = new google.maps.LatLng(
        #arena.agpslat#,#arena.agpslong#);

    var #arena.aid#Options = {
        zoom: 15,
        center: #arena.aid#Latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(
        document.getElementById("g#arena.aid#"),
        #arena.aid#Options);

    var marker = new google.maps.Marker({
        position: #arena.aid#Latlng,
        map: map,
        title: '#JsStringFormat(arena.arenaname)#'
       });
    }

  google.maps.event.addDomListener(window, 'load', initialize);

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

  </script>

As related this code shows maps fine - but does not center marker - thoughts?

This is generated script... Shows full map - but not centered...

      <img src="../images/gps1.png" height=25 border=0 alt="Show Map" 
    onclick="javascript:showElement('gxoazormo'); google.maps.event.trigger(document.getElementById('gxoazormo'),'resize');">


   <div id="gxoazormo" style="width: 600px; height: 300px; display: none"></div>


    <script type="text/javascript">
      function initialize() {

    var xoazormoLatlng = new google.maps.LatLng(
        51.0914344788,-114.200531006);

    var xoazormoOptions = {
        zoom: 15,
        center: xoazormoLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(
        document.getElementById("gxoazormo"),
        xoazormoOptions);

    var marker = new google.maps.Marker({
        position: xoazormoLatlng,
        map: map,
        title: 'Bowness Sportsplex'
     });
    }

      google.maps.event.addDomListener(window, 'load', initialize);

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

     </script>

Upvotes: 0

Views: 518

Answers (1)

MisteriousDeveloper
MisteriousDeveloper

Reputation: 11

var currCenter = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);

and it gets centered...

Upvotes: 1

Related Questions