Google maps doesn't show (on click button) - php

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 e.g. 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.