今天介紹大家如何結合Widget與Google Maps JavaScript API V3
首先可以到下列網址,去了解一下目
前最新版的Google Maps V3
http://code.google.com/intl/zh-TW/apis/maps/documentation/v3/
有
玩過google map的人一定有玩過用地址,來查地圖這個功能
這個範例主要就是利用Widget載入Google
map,然後可以做簡單的地址查詢功能
直接看範例
<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>
</head>
<body style="padding: 0px; margin: 0px">
<div id="map_canvas" style="width: 100%; height: 100%; display: block">
</div>
<div id="map_search" style="width: 100%; height: 100%; display: none">
<input id="address" type="text" value="" />
<input type="button" value="Geocode" onclick="Search()" />
<input type="button" value="Back to map" onclick="ChangeMap()" />
</div>
</body>
</html>
<script type="text/javascript">
//載入地圖 sample code
//參考：http://code.google.com/intl/zh-TW/apis/maps/documentation/v3/examples/map-simple.html
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
navigationControl: true,
mapTypeControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var geocoder = new google.maps.Geocoder();
</script>
<script type="text/javascript">
function SetMapType(type) {
//改變MapType
map.set_mapTypeId(type);
ChangeMap();
}
function ChangeMap() {
//切換到Map模式
map_canvas.style.display = "block";
map_search.style.display = "none";
}
function ChangeSearch() {
//切換到Search模式
map_canvas.style.display = "none";
map_search.style.display = "block";
}
</script>
<script type="text/javascript">
//地址搜索 sample code
//參考：http://code.google.com/intl/zh-TW/apis/maps/documentation/v3/examples/geocoding-simple.html
function Search() {
ChangeMap();
var address = document.getElementById("address").value;
if (geocoder) {
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.set_center(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
<script type="text/javascript">
////////////建立第1層Menu///////////////
var menuMapType = widget.menu.createMenuItem(1001);
menuMapType.text = "MapType";
widget.menu.append(menuMapType);
var menuSearch = widget.menu.createMenuItem(1002);
menuSearch.onSelect = function() { SetMapType(google.maps.MapTypeId.SATELLITE) };
menuSearch.text = "Search";
menuSearch.onSelect = ChangeSearch;
widget.menu.append(menuSearch);
////////////建立第2層Menu///////////////
//建立一個ROADMAP的MenuItem
var menuItem1 = widget.menu.createMenuItem(2001);
menuItem1.text = "ROADMAP";
menuItem1.onSelect = function() { SetMapType(google.maps.MapTypeId.ROADMAP) };
menuMapType.append(menuItem1);
//建立一個SATELLITE的MenuItem
var menuItem2 = widget.menu.createMenuItem(2002);
menuItem2.text = "SATELLITE";
menuItem2.onSelect = function() { SetMapType(google.maps.MapTypeId.SATELLITE) };
menuMapType.append(menuItem2);
//建立一個HYBRID的MenuItem
var menuItem3 = widget.menu.createMenuItem(2003);
menuItem3.text = "HYBRID";
menuItem3.onSelect = function() { SetMapType(google.maps.MapTypeId.HYBRID) };
menuMapType.append(menuItem3);
//建立一個TERRAIN的MenuItem
var menuItem4 = widget.menu.createMenuItem(2004);
menuItem4.text = "TERRAIN";
menuItem4.onSelect = function() { SetMapType(google.maps.MapTypeId.TERRAIN) };
menuMapType.append(menuItem4);
</script>