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;
อย่าลืมต้องใส่ เเท็ก HTML ตามนี้ด้วยค่ะไม่งั้นมันจะไม่รู้ไปเเสดงที่ไหน
โค้ด: เลือกทั้งหมด
<div id="gmap_canvas"></div>
โค้ด: เลือกทั้งหมด
<!-- 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>
โค้ด: เลือกทั้งหมด
<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 https://developers.google.com/maps/docu ... -searchbox
การตั้งค่า YOUR_API_KEY
https://developers.google.com/maps/docu ... et-api-key