我想設置我的網站,以便每當用戶將鼠標懸停在地址上時,該地址的小型谷歌地圖就會彈出。我一直在閱讀Google Maps API文檔,但我很難找到實現這一點的簡單方法。看來我必須使用什麼谷歌所謂的「地理編碼」基礎上找到該地址的緯度和經度...這是測試頁面我到目前爲止:當用戶懸停在地址上時,如何顯示彈出式Google地圖?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
function codeAddress(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 20,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</head>
<body>
<div onMouseOver="codeAddress('1405 Harrison Street, Oakland, CA')">
1405 Harrison Street, Oakland, CA
</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
然而,這會導致地圖在map_canvas div中顯示...我真正想要的是使地圖顯示爲一個小彈出窗口,有點像工具提示。我怎樣才能做到這一點?另外,我如何設置它,以便當用戶鼠標懸停時,地圖消失?
我使用HTML和JavaScript到目前爲止,我的網站是在Coldfusion。