摘要:[PHP&JavaScript]使用Google Maps Geocoding地址轉換，並運用Google Maps JavaScript API顯示地圖
在新網站時，有一部分是需要顯示Google Map給訪客知道的，但又出於人性懶得申請Google api key，想直接像平時查詢Google Map一樣使用，
而筆者把查詢到的Google Maps Geocoding Example with PHP內的資料，重新做了一次，且把圖標給改變了
好奇之下，請求了Google大神，看看大神們有沒有辦法直接使用Google Map，查到了以下資訊：
Google Maps Geocoding Example with PHP
而此次要介紹的就是「使用Google Maps Geocoding地址轉換，並運用Google Maps JavaScript API顯示地圖」此一主題
會運用到的技術有：
-
PHP urlencode
參考資料：http://php.net/manual/en/function.urlencode.php
urlencode()：用來將字串編碼，在資料傳遞的時候，如果直接傳遞中文會出問題，所以在傳遞資料時，通常會使用urlencode先編碼之後再傳遞
-
PHP file_get_contents
參考資料：http://php.net/manual/en/function.file-get-contents.php
file_get_contents()：將整個文件讀入一個字串
-
PHP json_decode
參考資料：http://php.net/manual/en/function.json-decode.php
json_decode()：處理JSON轉為變數資料以便程式處理
-
PHP array_push
參考資料：http://php.net/manual/en/function.array-push.php
array_push()：一個或多個單元加入陣列末尾
-
Google Maps Geocoding API
參考資料：https://developers.google.com/maps/documentation/geocoding/intro
-
Google Maps JavaScript API
參考資料：https://developers.google.com/maps/documentation/javascript/
而筆者把查詢到的Google Maps Geocoding Example with PHP內的資料，重新做了一次，且把圖標給改變了
並寫出部分註解，好讓讀者可以理解程式碼的動作，有興趣的讀者可複製到自己的環境下執行
(實作範例地址為勤美綠園道)
「google_map.php」
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> <!--語系UTF-8-->
</head>
<body>
<style>
/*設定gmap_canvas顯示區(寬與高)*/
#gmap_canvas{
width:100%;
height:30em;
}
</style>
<!--地圖顯示區-->
<div id="gmap_canvas"></div>
<?php
//-----Google map value Start-----
$set_address="台中市西區公益路68號"; //填寫所要的地址，Example地址為勤美綠園道
$data_array = geocode($set_address);
$latitude = $data_array[0];
$longitude = $data_array[1];
$data_address = $data_array[2];
//-----Google map value End-----
//-----function start-----
function geocode($address){
/*用來將字串編碼，在資料傳遞的時候，如果直接傳遞中文會出問題，所以在傳遞資料時，通常會使用urlencode先編碼之後再傳遞*/
$address = urlencode($address);
/*可參閱：(https://developers.google.com/maps/documentation/geocoding/intro)*/
$url = "http://maps.google.com/maps/api/geocode/json?address={$address}&language=zh-TW";
/*取得回傳的json值*/
$response_json = file_get_contents($url);
/*處理json轉為變數資料以便程式處理*/
$response = json_decode($response_json, true);
/*如果能夠進行地理編碼，則status會回傳OK*/
if($response['status']='OK'){
//取得需要的重要資訊
$latitude_data = $response['results'][0]['geometry']['location']['lat']; //緯度
$longitude_data = $response['results'][0]['geometry']['location']['lng']; //精度
$data_address = $response['results'][0]['formatted_address'];
if($latitude_data && $longitude_data && $data_address){
$data_array = array();
//一個或多個單元加入陣列末尾
array_push(
$data_array,
$latitude_data, //$data_array[0]
$longitude_data, //$data_array[1]
'<b>地址: </b> '.$data_address //$data_array[2]
);
return $data_array; //回傳$data_array
}else{
return false;
}
}else{
return false;
}
}
//-----function end-----
?>
</body>
</html>
<!-----google map Start----->
<!--可參閱：(https://developers.google.com/maps/documentation/javascript/3.exp/reference)-->
<script src="http://maps.google.com/maps/api/js?language=zh-TW"></script>
<script>
function init_map() {
/*地圖參數相關設定 Start*/
var Options = {
zoom: 14, /*縮放比例*/
center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>) /*所查詢位置的經緯度位置*/
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), Options);
/*地圖參數相關設定 End*/
/*自行設定圖標 Start*/
var image = {
url: 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png', /*自定圖標檔案位置或網址*/
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32), /*自定圖標大小*/
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>), /*圖標經緯度位置*/
icon: image
});
/*自行設定圖標 End*/
/*所查詢位置詳細資料 Start*/
infowindow = new google.maps.InfoWindow({
content: "<?php echo $data_address; ?>"
});
infowindow.open(map, marker);
/*所查詢位置詳細資料 End*/
}
/*
事件偵聽器
(可參閱：https://developers.google.com/maps/documentation/javascript/events)
*/
google.maps.event.addDomListener(window, 'load', init_map);
</script>
<!-----google map End----->
執行後畫面如下：
