詳見: https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-tw
但對於他強大的多項功能並沒有一個整合的範例
以下是一個利用 Google Maps Javascript API V3 的範例
利用地址去查詢地圖 用一個新視窗去顯示 並標籤其地名
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps API - 地址查詢地圖 範例</title><script type="text/javascript">
<script type="text/javascript">
//跳出地圖新視窗
function popupMap( addr , name)
{
window.open('googlemap.php?addr='+addr+'&name='+name,'GoogleMap','toolbar=no,location=no,directories=no,status=no,bar=no,scrollbars=no,resizable=yes,copyhistory=no,width=600,height=450,screenX=150,screenY=150,top=150,left=150')
}
</script>
</head>
<body>
<div>
<a href="javascript:popupMap('110台灣 台北市信義區信義路五段7號', 'Taipei 101')">
<img src="http://hotel.network.com.tw/images/GmapTw.png" alt="google map btn" border="0">
</a>
</div>
</body>
</html>
googlemap.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var addr = <? echo $_GET["addr"]; ?>;
var name = <? echo $_GET["name"]; ?>;
$(document).ready(function(){
//利用地址換轉成座標
var dat={};
dat.address = addr;
dat.sensor = "false";
$.ajax({
url: 'http://maps.googleapis.com/maps/api/geocode/json',
type: 'GET',
dataType: 'html',
data: dat,
async: false,
success: function(data){
callback(data);
}
});
});
function callback(data)
{
var o=eval('(' + data + ')');
if(o.status=="OK")
{
var lat = o.results[0].geometry.location.lat;
var lng = o.results[0].geometry.location.lng;
initialize(lat,lng);
}
}
//初始化地圖
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//標註地址
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:name
});
}
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
沒有留言:
張貼留言