Hello everyone I am building a website and it has a checkbox if that box is checked it would display google map and if not it will hide it. When I load it without .hide() and .show() it works correctly but when I use hide() and show() methods it would load a portion of the map.
The code
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script>
<script>
var MAPID = "map";
function initialize(){
var loc = new google.maps.LatLng(23.70656905403075,-53.58581517968753);
var options = {
zoom : 8,
center : loc,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(MAPID),options);
var marker = new google.maps.Marker({
position : loc,
map : map,
draggable : true,
animation : google.maps.Animation.DROP,
title : "Hello world"
});
google.maps.event.addListener(marker,"dragend",function(e){
updateloc(this.position);
});
marker.setMap(map);
}
function updateloc(loc){
$("#lat").val(loc.lat());
$("#long").val(loc.lng());
}
$(document).ready(function(){
$("#map_canvas").hide();
$("#lat").hide();
$("#long").hide();
$("#theMap").change(function(){
if(this.checked)
$("#map_canvas").show();
else
$("#map_canvas").hide();
});
});
</script>
</head>
<body onload="initialize();" >
<form>
<input type="checkbox" id="theMap">
<div id="map" style="width:400px;height:400px"></div>
<input id="lat" />
<input id="long" />
</form>
</body>
</html>
I found someone with a similar problem http://www.csie.nctu.edu.tw/~wctang/mapv3test.html
and I did the
google.maps.event.trigger(map,'resize');and it fixed the problem.