webapp で、ajax を使用してページ (地図を含む googlemap.asp) を読み込んでいます。
jquery.load を使用して「googlemap.asp」を div にロードしていますが、左上隅に小さな地図しか表示されないため、div で設定したサイズ 320 x 600 になりません。この方法でロードすると、マップが正しくレンダリングされません。
しかし、「googlemap.asp」をブラウザに直接(ajaxなしで)ロードすると、正しく表示されるので、ajaxでロードするときに何らかの形でリフレッシュする必要があると思いますか?
これは私が持っているものです:
<div id="map_canvas" style="height:600px; width:320px;" ></div>
window.onload=googleMaploadScript();
function googleMaploadScript() {
var script =document.createElement("script");
script.type="text/javascript";
script.src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
var address1 = document.getElementById('address').value;
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(57.109577,12.286513),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
codeAddress(address1);
}
function codeAddress(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
どういうわけか間違った順序でロードしたと思います。それが正しくレンダリングされていない理由ですか、それとも開始時に div が表示されていない可能性がありますか?
ご意見ありがとうございます。