Google Maps Geocoding Example with PHP From Shakti Jha

on
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.
Google-maps
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
    $url = "http://maps.google.com/maps/api/geocode/json?address={$address}";
    // 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" src="http://maps.google.com/maps/api/js"></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>
    <?php
    // if unable to geocode the address
    }else{
        echo "No map found.";
    }
}
?>

Live Demo

View the live demo by clicking the button below:
LIVE DEMO HERE

Thanks

Regards
Shakti Jha

Happy Coding!!!!

Comments

Post a Comment