1.先在view頁面放一個DIV 需有id(map) 且需先定義大小

 

<div id="map" style="width:500px;height:500px"></div>

 

2.引用所需的js函式程式庫

 

<script type="text/javascript" src="HTTP://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="HTTPs://maps.google.com/maps/api/js?sensor=false"></script>

 

3.新增script語法

 

<script type="text/javascript">
$(document).ready(function () {

 

initialize();//
codeAddress("多奇\r\n臺北市杭州南路一段116巷25號\r\n02-23222480", "臺北市杭州南路一段116巷25號 ");
codeAddress("新興", "臺北市中山區中山北路二段13號");

 

});

 

var geocoder;
var map;// = document.getElementById('map');
初始化地圖
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
給定顯示資料(title),及位址(address),將會反查座標
function codeAddress(title,address) {
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({
title:title,
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}

 

</script>

 

創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()