谷歌地图不完全加载
问题描述:
我是新的在这个网站上,我有一些问题,我的网站页面。 我想在我的网站上显示谷歌地图它工作正常,但是当我使用它下标签jquery(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min .js)我用它来逐个展示内容。它没有正确加载。 请查看我的网站上位置图标签下的地图。链接如下所示。谷歌地图不完全加载
http://www.21flats.com/beta/property_detail/16/8/Ranikhet/Ranikhet.html
<script type="text/javascript">
var lat=document.getElementById('lat').value;
var lon=document.getElementById('lon').value;
setTimeout(getlocation(lat,lon), 100);
function getlocation(lat,lon)
{
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(lat,lon),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick = function() {
var marker = this;
var latLng = marker.getPosition();
infoWindow.setContent('<h3>This is my project:</h3>' +
latLng.lat() + ', ' + latLng.lng());
infoWindow.open(map, marker);
};
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat,lon)
});
google.maps.event.addListener(marker1, 'click', onMarkerClick);
});
}
</script>
<div id="map" style="width: 640px;height: 450px;border:1px solid #999999;"></div>
..m using this how can i call "google.maps.event.trigger(map, 'resize')" this function in my function.
答
我认为这是一个很好的机会,你的问题是相关的事实,地图位于一个隐藏的div(封闭jQuery的选项卡),然后点击时才显示在标签上。
我也遇到过这个问题,并使用在这个线程提出的解决方案解决了这个问题:Google map display from a hidden area
答
试试这个,它很容易通过只是改变你想要的纬度经度&控制和也把标记图像通过你的自我。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(25.2894045564648903, 51.49017333985673);
var settings = {
zoom: 12,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Area name</h1>'+
'<div id="bodyContent">'+
'<p align="left" >P.O.Box : 666666 - Dubai, UAE <br> Tel : (+971) 789789789</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var companyImage = new google.maps.MarkerImage('images/marker.png',
new google.maps.Size(100,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyPos = new google.maps.LatLng(25.2894045564648903, 51.49017333985673);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyImage,
title:"Location Name",
zIndex: 3});
google.maps.event.addListener(companyMarker, 'click', function() {
infowindow.open(map,companyMarker);
});
}
</script>
<body onLoad="initialize()">
<div id="map_canvas" style="width:400px; height:460px"></div>
</body>
答
我的答案中有一些语法错误,请忽略它。 现在我的工作已经完成。 我使用并制作另一个谷歌地图的文件,并通过点击我的标签调用该框架。谷歌地图工作非常好..
我也遇到了同样的问题。无论如何感谢您的支持。 – 2012-02-02 13:12:27