google map ajax load
google map ajax load
help is required. I am trying to load a page inside div. my second page contain google map. result only show the div but map is not visible.
following is the code of page 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".result").load("gmap2.php");
google.maps.event.trigger(map, 'resize');
});
});
</script><title>Untitled Document</title>
</head>
<body>
<div class="result"></div>
<button id="button">Button</button>
</body>
</html>
and following is code of page 2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<!--script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script-->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&language=pk"></script>
<script>
var myCenter=new google.maps.LatLng(47.3239, 5.0428);
function initialize(){
var mapProp = {
center:myCenter,
zoom:10,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({ content:"hello world!" });
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="googleMap" style="width:700px;height:400px;"></div>
</body>
</html>
please help!