Google maps doesn't show (on click button)

Question

I am having problems generating a Google map and showing it on my page. This is my view. What can I do to make this work properly?

<?php 
    $telephones = $this->telephones;
    $telephonesa = array();
    foreach($telephones as $telephone){
        array_push($telephonesa, $telephone);
    }
?>

<div id="googleMap" style="width:500px;height:380px;"></div>

// client-side
<script>
var object = {};
    object.dist = 100000;
    $(document).ready(function() {
        $( "#getclosest" ).click(function() {
            $.mobile.loading( 'show' );
            getLocation();
        });
    });

    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
        else{
            alert("Geolocation is not supported by this browser.");
        }
    }

    function showPosition(position)
    {
        var currlat = position.coords.latitude;
        var currlon = position.coords.longitude;

        getClosest(currlat, currlon);
    }

    function getClosest(currlat, currlon){

        var telephones = <?php echo json_encode($telephonesa); ?>;

        var length = telephones.length,
            element = null;
        for (var i = 0; i < length; i++) {
            element = telephones[i];
            object.distance = getDistanceBetweenLatLongs(currlat, currlon, element.Location.Longitude, element.Location.Latitude);

            if (object.distance < object.dist){
                object.dist = object.distance;
                object.index = i;
            }
        }

        showToilet(object.index);
    }

    function showToilet(index){
        var telephones = <?php echo json_encode($telephonesa); ?>;
        var telephone = telephones[index];

        showGooglemaps(telephone.Location.Latitude, telephone.Location.Longitude);
    }

    function showGooglemaps(lat,lon){
        google.maps.visualRefresh = true;
        var myCenter=new google.maps.LatLng(lat,lon);
        var marker;

        function initialize()
        {
            var mapProp = {
                center:myCenter,
                zoom:13,
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("googleMap")
                ,mapProp);


            marker=new google.maps.Marker({
                position:myCenter,
                animation:google.maps.Animation.BOUNCE
            });

            marker.setMap(map);

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

        }
        $("#getclosest").hide();
        $.mobile.loading( 'hide' );

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

As you can see I have a function 'ShowGooglemaps' that I call but the output shows nothing ...

Answer 1

The load -event of window fires when all ressources have been loaded, but the function ShowGooglemaps will be called when you click on the button. At this time usually the load -event already has been fired(and will not fire again, and the callback also will not be executed immediately as it eg jQuery's ready-listener does) .

This line:

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

..is useless, initialize will never be called.

There is no need to wrap the code that initializes the map into the initialize -function, simply execute the code without waiting for the load -event.