使用新版谷歌地圖Google Maps JavaScript API V3遇到的幾個問題

By James Qi, 2011年1月27日

新版谷歌地圖API

Google地圖API确實是個好東西，我們很多網站上都嵌入了，一直用的是V2，雖然知道有了V3但也不想輕易改動，這次在做新網站的時候才準備實施，也遇到幾個問題記錄如下：

浏覽器兼容性問題

原始例子代碼如果前後有<div></div>包含的話，會在部分浏覽器中無法顯示，例如IE6、IE7中正常，但IE8和Chrome中看不到，同事一起折騰了好一陣子，算是搞好了，需要根據<!DOCTYPE html>标準在css代碼中嚴格定義高度、寬度，并帶有px的字樣：

<div id="map_canvas" style="width:500px; height:400px">正在載入地圖，請稍等...</div>

如果缺少了px或者使用的100%都有可能在部分浏覽器中無法顯示，這個小小的問題都花去好好多個小時！

信息框代碼變更

從V2到V3，一些函數都發生了變化，官方網站中的例子也不是很全，為了實現以前的信息框，又去找了一些資料才搞定。整個例子代碼如下：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var query = "武漢市發展大道176号興城大廈";
var display = "<b>單位：</b>武漢市勁捷電子信息有限公司";
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
}

function codeAddress() {
var address = query;
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
});
var infowindow = new google.maps.InfoWindow({
content:"<b>地址：</b>"+address+"<br>"+display
});
infowindow.open(map, marker);
} else {
alert("未能解析該地址的原因: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:400px"></div>
</body>

V3 缺少GoogleBar和AdSense

以前V2中添加GoogleBar很方便，讓不能自動解析找到地址的浏覽者自己重新輸入地址查找，新版本中卻沒有這個功能，嵌入AdSense的功能也沒有加入，我搜索了網上的帖子，一年多都沒有解決這兩個問題。替換的辦法是另外嵌入Local Search代碼或者旁邊放置AdSense代碼，總之麻煩多了。

現在也看不到V3有特别的好處，隻是可以不需要以前的API Key了。

上面代碼顯示出來的地圖例子如下：

自由标簽

發表新回應

救星啊！感謝寶貴經驗

div 上定義地圖大小缺少了px字樣，IE除了quirk模式外死活出不來地圖。。通過搜索找到樓主的寶貴經驗~~感激不盡~~

回覆

我們也是反複試出來的

一些小的細節确實容易出問題而難以發現，我們也是反複試出來的，期間也找了很多别人寫下的資料，我們的經驗教訓能幫到其他人就很高興了！

回覆

我郁悶，我的現在在IE上面還是顯示不出來，一片空白，他提示

我郁悶，我的現在在IE上面還是顯示不出來，一片空白，他提示是“确實标識符，字符串或者數字”

回覆

那隻有對着google maps

那隻有對着google maps api的官方網站仔細查看，另外就是在網上搜索其他人的代碼例子。我也是反反複複才搞好的。

回覆

這問題就是坑爹的

還好Baidu大神把新聞組也搜出來，在新聞組裡面找到了答案，所有的Map容器的父節點都必需有高度

回覆

tab

v2版有 infowindowtabs 帶标簽的信息窗口

現在v3沒了tabs信息窗口

請問知道實現V3的TAB信息窗口

回覆

我對google maps

我對google maps api的研究并不深，隻是勉強實現自己需要的功能，您說的tab不知道是不是我上面說的google bar，如果是的，我們是在地圖邊上放上一個像google bar的輸入框來實現的，如果不是的，那我還不清楚了，您需要在網上其他地方再找，抱歉。

回覆

tab

infowindowtab 不是 google bar

是多個信息窗口以标簽的形式 V2有infowindowtab函數提供很方便

雖找不到，還是謝謝你的解答··

回覆

你好，怎麼加經緯度呢？

你好，怎麼加經緯度呢？center: new google.maps.LatLng(）

回覆

google maps api中經緯度的代碼

下面是我嵌入需要顯示的經緯度的代碼，其中用php加入了經緯度，僅供參考：

function initialize() {
    var myLatlng = new google.maps.LatLng(<?php print $latitude ?>, <?php print $longitude ?>);
    var myOptions = {
      zoom: 11,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    map.setCenter(myLatlng);