取得 Google Map
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
#user_gmap{ width:600px;height:400px; margin:20px20px 0px; border:solid 1px #111; }
#user_glink {width:600px; text-align:right; font-size:10px; font-weight:normal; padding:0px; height:20px; margin:0px;}
</style>
<script type="text/javascript">
function GetMap() {
var str1 = "test";
var text = $("#a1").val();
//alert(text);
//取得json格式網址期參數必須編碼
var ajaxUrl = "http://maps.googleapis.com/maps/api/geocode/json?address=" + encodeURIComponent(text) + "&sensor=false&language=zh-TW&hl=zh-TW"
var json = "";
$.ajax({
async: false,
type: 'POST',
url: ajaxUrl,
dataType: 'text',
success: function (s1) { //執行成功後接收回傳值
//alert(s1);
json = s1;
}
});
var addJson = JSON.parse(json);
var lat = addJson.results[0].geometry.location.lat;
var lng = addJson.results[0].geometry.location.lng;
//alert(lat);
var mapdiv = document.getElementById('user_gmap');
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(lat, lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map(mapdiv, myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: ''
});
var infowindow = new google.maps.InfoWindow({
content: '<strong></strong><br />',
size: new google.maps.Size(200, 200)
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
</script>
<input type="text" value="" id="a1" />
<input type="button" value="OK" onclick="GetMap()" />
<div id="user_gmap"></div>
標籤: Google
0 個意見:
張貼留言
訂閱 張貼留言 [Atom]
<< 首頁