I am currently working on a web page that consists of two containers. The mainmapdiv container covers the entire page, while the mainhomediv container is positioned on top of the mainmapdiv. My goal is to hide the mainhomediv container and show a Google Map on the mainmapdiv when a user clicks on an image with the id of 'mapbutton'. Here is the code:
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mainmapdiv"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
var map;
$(document).ready(function(){
//Click on button to display map
$('#mapbutton').click(function(){
$('#mainhomediv').fadeTo("slow",0);
$('#mainhomediv').css({opacity: 0});
initialize();
});
//Click on Home to get back home div
$('#home').click(function(){
$('#mainhomediv').fadeTo("slow",1);
$('#mainhomediv').css({opacity: 1});
});
});
HTML CODE
<body>
<!--This is the primary container-->
<div id='#mainmapdiv' class='mainmapdiv'>
<div id='#mainhomediv' class='mainhomediv'>
.
//There is an image with id='mapbutton' somewhere in this section
.
.
</div>
</div>
</body>
When I click the image, the mainhomediv container is hidden perfectly, but the map does not display on the mainmapdiv.
I have included the following scripts:
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/apijs?sensor=false"></script>