โดย thatsawan » 13/11/2015 11:46 pm
The Google Maps Geocoding API คือ เทคโนโลยีสำหรับการระบุตำแหน่งพิกัดทางภูมิศาสตร์ ขอยกตัวอย่างเช่น ต้องการค้นหาตำแหน่ง "ซอยเสนานิคม แขวง ลาดยาว เขต จตุจักร กรุงเทพมหานคร 10900 ประเทศไทย" ผลที่ได้จะได้ พิกัดทางภูมิศาสตร์ออกมา ดังตัวอย่าง
http://maps.googleapis.com/maps/api/geo ... ={{สถานที่}}
ตัวอย่าง
http://maps.googleapis.com/maps/api/geo ... s=เสนานิคม
ผลที่ได้
โค้ด: เลือกทั้งหมด
{
"results" : [
{
"address_components" : [
{
"long_name" : "ซอยเสนานิคม",
"short_name" : "ซอยเสนานิคม",
"types" : [ "point_of_interest", "establishment" ]
},
{
"long_name" : "แขวง ลาดยาว",
"short_name" : "แขวง ลาดยาว",
"types" : [ "sublocality_level_2", "sublocality", "political" ]
},
{
"long_name" : "เขต จตุจักร",
"short_name" : "เขต จตุจักร",
"types" : [ "sublocality_level_1", "sublocality", "political" ]
},
{
"long_name" : "กรุงเทพมหานคร",
"short_name" : "กรุงเทพมหานคร",
"types" : [ "locality", "political" ]
},
{
"long_name" : "กรุงเทพมหานคร",
"short_name" : "กรุงเทพมหานคร",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "ประเทศไทย",
"short_name" : "TH",
"types" : [ "country", "political" ]
},
{
"long_name" : "10900",
"short_name" : "10900",
"types" : [ "postal_code" ]
}
],
"formatted_address" : "ซอยเสนานิคม แขวง ลาดยาว เขต จตุจักร กรุงเทพมหานคร 10900 ประเทศไทย",
"geometry" : {
"location" : {
"lat" : 13.8340589,
"lng" : 100.5723563
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 13.8354078802915,
"lng" : 100.5737052802915
},
"southwest" : {
"lat" : 13.8327099197085,
"lng" : 100.5710073197085
}
}
},
"partial_match" : true,
"place_id" : "ChIJ2TGfGf2c4jARuLhIDW7U_Po",
"types" : [
"bus_station",
"transit_station",
"point_of_interest",
"establishment"
]
}
],
"status" : "OK"
}
วิธีที่จะดึงข้อมูลมาใส่
โค้ด: เลือกทั้งหมด
$address = urlencode($address); // $address = เสนานิคม เราสามารถ Get หรือ ทำเป็นฟอร์มรับค่ามาก่อนได้
$url = "http://maps.google.com/maps/api/geocode/json?sensor=false&address={$address}";
$resp_json = file_get_contents($url);
print_r($resp_json); exit; // เมื่อปริ้นค่าออกมาจะได้ข้อมูล Json เเบบตัวอย่างข้างต้น
$resp = json_decode($resp_json, true); // เอาออกจาก Json สะ เอามาใช้ต่อ
หลังจากนั้นก็เตรียมข้อมูล ไปแสดงผล
Google Map จะแสดงผลตาม ลองติจูล ละติจูล
โค้ด: เลือกทั้งหมด
if($resp['status']=='OK'){
// get the important data
$lati = $resp['results'][0]['geometry']['location']['lat'];
$longi = $resp['results'][0]['geometry']['location']['lng'];
$formatted_address = $resp['results'][0]['formatted_address'];
print_r($lati); echo '<hr>'; // 13.8340589
print_r($longi); echo '<hr>';//100.5723563
print_r($formatted_address);//ซอยเสนานิคม แขวง ลาดยาว เขต จตุจักร กรุงเทพมหานคร 10900, Thailand
exit;
ตอนเเสดงผลก็เอาที่เราเตรียมไว้มาใส่ใน JavaScript
อย่าลืมต้องใส่ เเท็ก HTML ตามนี้ด้วยค่ะไม่งั้นมันจะไม่รู้ไปเเสดงที่ไหน
โค้ด: เลือกทั้งหมด
<!-- JavaScript to show google map -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init_map() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>)
});
infowindow = new google.maps.InfoWindow({
content: "<?php echo $formatted_address; ?>"
});
google.maps.event.addListener(marker, "click", function () {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
- 2015-11-13_23-28-34.png (265.51 KiB) Viewed 4232 times
อีกนิดเราสามารถใส่ CSS ปรับขนาดของการแสดงผลได้ค่ะ
โค้ด: เลือกทั้งหมด
<style>
#gmap_canvas{
width:50%;
height:30em;
}
</style>
ศึกษาเพิ่มเติม
https://developers.google.com/maps/docu ... ding/intro
http://www.w3schools.com/googleapi/goog ... _basic.asp
นอกจากวีนี้เเล้วยังมีอีกหลายวิธีที่จะสร้าง Google map มาติดหน้าเว็บของเรา
Google Maps Javascript API
หน้าตาของมันก็จะมีฟอร์มค้นหามาให้เราเลย เพียงเเค่เราตั้งค่า YOUR_API_KEY
- 2015-11-13_23-38-59.png (316.68 KiB) Viewed 4232 times
https://developers.google.com/maps/docu ... -searchbox
การตั้งค่า YOUR_API_KEY
https://developers.google.com/maps/docu ... et-api-key
- 2015-11-13_21-43-36.png (29.28 KiB) Viewed 4232 times
- 2015-11-13_21-49-41.png (32.76 KiB) Viewed 4232 times
- 2015-11-13_21-50-21.png (7.11 KiB) Viewed 4232 times
- 2015-11-13_21-43-52.png (15.8 KiB) Viewed 4232 times
The Google Maps Geocoding API คือ เทคโนโลยีสำหรับการระบุตำแหน่งพิกัดทางภูมิศาสตร์ ขอยกตัวอย่างเช่น ต้องการค้นหาตำแหน่ง "ซอยเสนานิคม แขวง ลาดยาว เขต จตุจักร กรุงเทพมหานคร 10900 ประเทศไทย" ผลที่ได้จะได้ พิกัดทางภูมิศาสตร์ออกมา ดังตัวอย่าง
[b][color=#FF0040]http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address={{สถานที่}}[/color][/b]
ตัวอย่าง http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=เสนานิคม
ผลที่ได้
[code=php]
{
"results" : [
{
"address_components" : [
{
"long_name" : "ซอยเสนานิคม",
"short_name" : "ซอยเสนานิคม",
"types" : [ "point_of_interest", "establishment" ]
},
{
"long_name" : "แขวง ลาดยาว",
"short_name" : "แขวง ลาดยาว",
"types" : [ "sublocality_level_2", "sublocality", "political" ]
},
{
"long_name" : "เขต จตุจักร",
"short_name" : "เขต จตุจักร",
"types" : [ "sublocality_level_1", "sublocality", "political" ]
},
{
"long_name" : "กรุงเทพมหานคร",
"short_name" : "กรุงเทพมหานคร",
"types" : [ "locality", "political" ]
},
{
"long_name" : "กรุงเทพมหานคร",
"short_name" : "กรุงเทพมหานคร",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "ประเทศไทย",
"short_name" : "TH",
"types" : [ "country", "political" ]
},
{
"long_name" : "10900",
"short_name" : "10900",
"types" : [ "postal_code" ]
}
],
"formatted_address" : "ซอยเสนานิคม แขวง ลาดยาว เขต จตุจักร กรุงเทพมหานคร 10900 ประเทศไทย",
"geometry" : {
"location" : {
"lat" : 13.8340589,
"lng" : 100.5723563
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 13.8354078802915,
"lng" : 100.5737052802915
},
"southwest" : {
"lat" : 13.8327099197085,
"lng" : 100.5710073197085
}
}
},
"partial_match" : true,
"place_id" : "ChIJ2TGfGf2c4jARuLhIDW7U_Po",
"types" : [
"bus_station",
"transit_station",
"point_of_interest",
"establishment"
]
}
],
"status" : "OK"
}
[/code]
วิธีที่จะดึงข้อมูลมาใส่
[code=php]
$address = urlencode($address); // $address = เสนานิคม เราสามารถ Get หรือ ทำเป็นฟอร์มรับค่ามาก่อนได้
$url = "http://maps.google.com/maps/api/geocode/json?sensor=false&address={$address}";
$resp_json = file_get_contents($url);
print_r($resp_json); exit; // เมื่อปริ้นค่าออกมาจะได้ข้อมูล Json เเบบตัวอย่างข้างต้น
$resp = json_decode($resp_json, true); // เอาออกจาก Json สะ เอามาใช้ต่อ
[/code]
หลังจากนั้นก็เตรียมข้อมูล ไปแสดงผล
Google Map จะแสดงผลตาม ลองติจูล ละติจูล
[code=php]
if($resp['status']=='OK'){
// get the important data
$lati = $resp['results'][0]['geometry']['location']['lat'];
$longi = $resp['results'][0]['geometry']['location']['lng'];
$formatted_address = $resp['results'][0]['formatted_address'];
print_r($lati); echo '<hr>'; // 13.8340589
print_r($longi); echo '<hr>';//100.5723563
print_r($formatted_address);//ซอยเสนานิคม แขวง ลาดยาว เขต จตุจักร กรุงเทพมหานคร 10900, Thailand
exit; [/code]
ตอนเเสดงผลก็เอาที่เราเตรียมไว้มาใส่ใน JavaScript
อย่าลืมต้องใส่ เเท็ก HTML ตามนี้ด้วยค่ะไม่งั้นมันจะไม่รู้ไปเเสดงที่ไหน
[code=php]
<div id="gmap_canvas"></div> [/code]
[code=php]<!-- JavaScript to show google map -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init_map() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>)
});
infowindow = new google.maps.InfoWindow({
content: "<?php echo $formatted_address; ?>"
});
google.maps.event.addListener(marker, "click", function () {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>[/code]
[attachment=5]2015-11-13_23-28-34.png[/attachment]
อีกนิดเราสามารถใส่ CSS ปรับขนาดของการแสดงผลได้ค่ะ
[code=php] <style>
#gmap_canvas{
width:50%;
height:30em;
}
</style> [/code]
ศึกษาเพิ่มเติม
https://developers.google.com/maps/documentation/geocoding/intro
http://www.w3schools.com/googleapi/google_maps_basic.asp
นอกจากวีนี้เเล้วยังมีอีกหลายวิธีที่จะสร้าง Google map มาติดหน้าเว็บของเรา
[size=100][b]Google Maps Javascript API [/b][/size]
หน้าตาของมันก็จะมีฟอร์มค้นหามาให้เราเลย เพียงเเค่เราตั้งค่า YOUR_API_KEY
[attachment=4]2015-11-13_23-38-59.png[/attachment]
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
การตั้งค่า YOUR_API_KEY
https://developers.google.com/maps/documentation/geocoding/get-api-key
[attachment=3]2015-11-13_21-43-36.png[/attachment]
[attachment=2]2015-11-13_21-49-41.png[/attachment]
[attachment=1]2015-11-13_21-50-21.png[/attachment]
[attachment=0]2015-11-13_21-43-52.png[/attachment]