このコードは、jsfiddle やその他の JavaScript サンドボックス アプリでは完全に機能しますが、私の Web サイトでは機能しません。
HTML :
<div id="mapcontainer" style="position:absolute;width:280px;height:160px;"></div>
JS:
<script src="http://maps.googleapis.com/maps/api/js?key=*********************************&sensor=false"></script>
<script>
var myCenter = new google.maps.LatLng(33.436150, -117.623090);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
google.maps.event.trigger(map, 'resize')
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
次のようになります。
上の 2/3 が歪んでいて、下の 1/3 が正常であることに注目してください。どうすればこれを修正できますか?