I have seen many developers find
difficulty in implementing Google Maps API in PHP. So we have created
this tutorial to make it easier to understand and use Google Maps API in
your web projects. You can use this in forms where you ask user to
enter their location and then with the help of Google Maps API you can
easily display their location/address in Map. This is most useful in
user oriented sites or membership based sites, where you ask user their
address/location and to make their profile look good you display their
location in Maps witch a marker pointing to the address.
You can use this code if you want to create a store locator. Why this is useful? Imagine if you have several addresses on your database, you will never want to manually pin point the latitude and longitude of each of those addresses.
That’s why we have the geocoding method. Just input the addresses and Google will try to identify the approximate location of that address.
The contents of this post include:
- Step 1: Basic HTML code.
- Step 2: Create form inside the body tag.
- Step 3: Put some example addresses before the form.
- Step 4: Create the PHP geocode() function.
- Step 5: The code when the user submitted the form.
- Complete Code on Google Maps Geocoding Example with PHP
- Live Demo
Step 1: Basic HTML code.
<! DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title >Live Demo of Google Maps Geocoding Example with PHP</ title > </ head > < body > </ body > </ html > |
Step 2: Create form inside the body tag.
< form action = "" method = "post" > < input type = 'text' name = 'address' placeholder = 'Enter any address here' /> < input type = 'submit' value = 'Geocode!' /> </ form > |
Step 3: Put some example addresses before the form.
< div id = 'address-examples' > < div >Address examples:</ div > < div >1. G/F Makati Cinema Square, Pasong Tamo, Makati City</ div > < div >2. 80 E.Rodriguez Jr. Ave. Libis Quezon City</ div > </ div > |
Step 4: Create the PHP geocode() function.
// function to geocode address, it will return false if unable to geocode address function geocode( $address ){ // url encode the address $address = urlencode( $address ); // google map geocode api url // get the json response $resp_json = file_get_contents ( $url ); // decode the json $resp = json_decode( $resp_json , true); // response status will be 'OK', if able to geocode given address 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' ]; // verify if data is complete if ( $lati && $longi && $formatted_address ){ // put the data in the array $data_arr = array (); array_push ( $data_arr , $lati , $longi , $formatted_address ); return $data_arr ; } else { return false; } } else { return false; } } |
Step 5: The code when the user submitted the form. Put it after the body tag.
<?php if ( $_POST ){ // get latitude, longitude and formatted address $data_arr = geocode( $_POST [ 'address' ]); // if able to geocode the address if ( $data_arr ){ $latitude = $data_arr [0]; $longitude = $data_arr [1]; $formatted_address = $data_arr [2]; ?> <!-- google map will be shown here --> <div id= "gmap_canvas" >Loading map...</div> <div id= 'map-label' >Map shows approximate location.</div> <!-- JavaScript to show google map --> <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> <?php // if unable to geocode the address } else { echo "No map found." ; } } ?> |
Comments
Post a Comment