Home/ Questions/Q 6936341
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T12:13:16+00:00

The issue I am having is with the initialisation of the Google maps api.

  • 0

The issue I am having is with the initialisation of the Google maps api. When I have the maps api in a normal div that is set to be displayed it works perfectly and toggles up and down but when I set the display to none it does not load correctly. The map only loads half way down and the pin image is not displayed. Is there a work around for this or will this simply not function in a toggle slide that is initially not displayed.

The example page I have created is as below.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='scripts/jscripts/jquery-1.4.js'></script>

<style type="text/css">
.slideTogglebox{
    float:left;
    padding:8px;
    margin:16px;
    border:1px solid red;
    width:500px;
    height:350px;
    background-color:#000000;
    color:white;
    display:none;
}
.clear{
    clear:both;
}
</style>

</head>

<body>
<?php
$url ="http://maps.googleapis.com/maps/api/geocode/xml?address=PL329YN&sensor=false";
$getAddress = simplexml_load_file($url);
$lat = $getAddress->result->geometry->location->lat;
$lng = $getAddress->result->geometry->location->lng;
?>

<div class="clear">
<h3>slideToggle() example</h3> <a href="javascript:slideToggle()" id=slideToggle>Click Me</a>
<br/>
<div class="slideTogglebox" id='map_canvas'>

</div>

</div>

<script type="text/javascript">

function initialize() {

    <?php
    print "var lat = $lat;";
    print "var lng = $lng;";
    ?>

    var latlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var image = 'images/map/pin_green.png';
    var myLatLng = new google.maps.LatLng(lat, lng);
    var beachMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image
    });
}

var init = false;

$("#slideToggle").click(function () {

   if (!init) {
        initialize();
        init = true;
   }
   $('.slideTogglebox').slideToggle('slow');
});


</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There appears to be an issue with the new v3 api and jquery. It does seem to work with the v2 of the Google maps api without issue.

    Therefore to fix the problem I have called the initialize function from after the div toggles. Then I have set the background in the CSS to match the background on the page so that it appears to fadein after the toggle.

    <script type="text/javascript">

$("#slideToggle").click(function () {

   $('.slideTogglebox').slideToggle(function initialize() {

        <?php
        print "var lat = $lat;";
        print "var lng = $lng;";
        ?>

        var latlng = new google.maps.LatLng(lat, lng);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var image = 'images/map/pin_green.png';
        var myLatLng = new google.maps.LatLng(lat, lng);
        var beachMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image
        });
    });
});


</script>
    • 0