Google Map JavaScript API是Google提供的一組API,

 

可以讓設計師自訂或開發Google Map相關的應用程式


Google Maps Javascript API目前的版本是第三版,

 

所以下面的程式都是以第三版為主


如果你玩過第二版,

 

第三版已不需要事先向Goolge申請Key,而可以直接使用

 

相關資源 可以參考

 

https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-tw

http://app.essoduke.org/tinyMap/

 

完整範例(單一景點)


------------------------------------------------------------------------------


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(輸入緯度,輸入經度),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);
}
</script>
<title></title>
</head>


<body onload="initialize()">
<div id="mapDiv" style="width: 400px; height: 400px;"></div>
</body>
</html>

 

--------------------------------------------------------------------------

完整案例(多個景點)

 

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>搜尋水上商圈中各家超商門市</title>
<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>
</head>
<body>
<div id="map" style="width: 800px; height: 300px;"></div>
<script type="text/javascript">
var locations = [
['7-11 上龍門市嘉義縣水上鄉龍德村 11 指厝 75-90 號 05-2683050' ,23.421388,120.390368,1],
['7-11 中庄門市嘉義縣水上鄉中庄村 69 號 05-2892949',23.421286,120.438008,2],
['7-11 水上門市嘉義縣水上鄉水頭村 6 鄰中興路 134 號 05-2689754',23.430521,120.401825,3],
['7-11 北回門市嘉義縣水上鄉回歸村中三路三段 167 號 05-2843550',23.453296,120.414845,4],
['7-11 柳泰門市嘉義縣水上鄉柳鄉村柳子林路 185-20 號 05-2683409',23.439071,120.418062,5],
['7-11 新兆軒門市嘉義縣水上鄉民生村忠孝街 149 號 05-2840841',23.448122,120.433892,6],
['全家鎮安門市嘉義縣水上鄉寬士村崎子頭 31 之 2 號 05-2352125',23.437515,120.424240,7],
['全家福德門市嘉義縣水上鄉中正路 161 號 05-2681562',23.429281,120.406916,8],
['全家光隆門市嘉義縣水上鄉民生村忠孝街 145 號 05-2842230',23.447320,120.434107,9],
['全家水上機場門市嘉義縣水上鄉榮典路 1-1 號 05-2359354',23.454524,120.409253,10],
['萊爾富吳鳳門市嘉義市東區 6 吳鳳南路 647 號 05-2308340',23.455188,120.459436,11]]; 

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(23.431202,120.390955),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>

 

雞蛋貓異想世界 發表在 痞客邦 PIXNET 留言(0) 人氣()