Home » PHP » PHP Google Geocode Example

About Olayemi Odunayo

Olayemi Odunayo

I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.

PHP Google Geocode Example

In this example we will explain Google Map Geocoding, what it means and how we can manipulate the Google Map Geocoding API. For this example we will need:

  • A computer with PHP >= 5.5 installed
  • notepad++

1. Getting Started

Lets start by defining Google Map.

Want to be a PHP master?

Subscribe to our newsletter and download the PHP programming Cookbook right now!

In order to get you familiarized with PHP development, we have compiled a comprehensive guide about all major aspects of PHP programming. The perfect tool to boost your WEB development career. Besides reading them online you may download the eBook in PDF format!

 

According to wikipedia, Google Maps is a web mapping service developed by Google . It offers satellite imagery, street maps , 360° panoramic views of streets (Street View), real-time traffic conditions (Google Traffic), and route planning for traveling by foot, car, bicycle (in beta), or public transportation.

Another good but simpler definition below.

Google map is a web based mapping service that provides access to up-to-date data or information about cities,states countries, continents or regions world wide. Simply put google maps allows us access different geographic data. Google Map provides access it its service through an API (Application Programming Interface).
We can access this API in a number of ways:

  • Google Maps Javascript API: This allows you to access google maps service through javascript and according to its website it features a robust support.
    To learn more about the Javascript API Visit this tutorial
  • Google Maps embed API: You do not need any working knowledge of javascript to access Google Map in this way because you do not need to write any code. Just enter the neccessary location and copy the given code.
  • Google Street View Image Api.
  • Google Static Map Api: Embed a map image without JavaScript or dynamic page loading. With this method you embed a map image and you dont need javascript to do it.
  • Google Places API Javascript Library: Up-to-date information about millions of locations.

In this example we are going to develop web apps that use Google geocoding API.

1.1 Google Geocoding

According to Google, Geocoding is the process of converting addresses (like “1600 Amphitheatre Parkway, Mountain View, CA”) into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers on a map, or position the map. The reverse is also possible, it is called reverse Geocoding.
Reverse geocoding is the process of converting geographic coordinates into a human-readable address. The Google Maps Geocoding API’s reverse geocoding service also lets you find the address for a given place ID. Place IDs uniquely identify a place in the Google Places database and on Google Maps.

Google Map Example

Google Map Example

index.html

<!DOCTYPE html>
<html lang=eng>
	<head>
	<style>
 #map {
        height: 400px;
        width: 100%;
       }
	</style>

		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!DOCTYPE html>
<html lang=eng>
	<head>
	<style>
 #map {
        height: 400px;
        width: 100%;
       }
	</style>

		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<body>
<h1> Google Map Geocoding Example </h1>

<form method=post action="index.php">
<select name=cali>
<option value ="1600+Amphitheatre+Parkway,+Mountain+View,+CA">California</option>
</select>
<input type=submit name=button value=submit>
</form>
<?php
}
?>
</body>
</html>

The above html page contains a drop down list inside a form which has a single address. When the submit button is clicked, the form is submitted and the content of the Drop down list is transmitted to the server (to a script called index.php) .

index.php

<?php
if(isset($_POST["button"])){
	$lati=null;
	$longi=null;
$address = $_POST["cali"];
$address = urlencode($address);//properly encode the url
// google map geocode api url
$url = "http://maps.google.com/maps/api/geocode/json?address={$address}";//we are getting the response in json
// get the json response
$resp_json = file_get_contents($url);
// decode the json
$resp = json_decode($resp_json, true);
//the  response status would  be 'OK', if are able to geocode the given address 
if($resp['status']=='OK'){
// get the longtitude and latitude data
$lat = $resp['results'][0]['geometry']['location']['lat'];
$long = $resp['results'][0]['geometry']['location']['lng'];
?>
<div id=map style="width:100%;height:500px">

</div>
<script  async defer
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=drawMap"></script>
<script>
    function drawMap() {
        var pos = {lat: <?php echo $lat ?> , lng:<?php echo $long ?>};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: pos
        });
        var marker = new google.maps.Marker({
          position: pos,
          map: map
        });
      }

</script>
<?php
}
}
else{
	echo "DID NOT RECEIVE LATITUDE AND LONGITUDE DATA";
}
?>

In this script we process the content sent by the form (lines five and six) and call the geocoding API(lines eight to ten) and tell it to return the required data in json.

$url = "http://maps.google.com/maps/api/geocode/json?address={$address}"

In line 22 we load the google map API, in order to draw the map on a browser.

<script  async defer
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=drawMap"></script&gt

The async attribute allows the browser to continue rendering the rest of your page while the API loads. We pass our API key and add a callback function. (The callback function is called after the script has loaded completely).  In this case the function name is drawMap.
In line 26 we create an object which holds the coordinates of the region we want to be displayed. In line 27 we instatiate the map object. We pass our div tag, the zoom value and our coordinate object. In line 31 we create a marker object and pass our map to it. We have successfully used the google map geocoding API to draw a map.

2. Summary

In this example we learnt about Google Maps Geocoding API, how to use it to get the coordinates of a street or area and display on a map. We also learnt about the different ways we can access the Google Map service.

3. Download the source code

Download
You can download the full source code of this example here: phpgeocodingexample

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

Leave a Reply

2 Comments on "PHP Google Geocode Example"

Notify of
avatar
Sort by:   newest | oldest | most voted
Lawrence Dayhoff
Guest
First I would like to thank you for this code. It works just fine for me. I don’t know a lot about interfacing with google maps. PhP, CSS HTML and mysql are what I know. What I don’t know to do is display something like all the universities with in so many miles of a lat,long The site I am building is to assist veterans looking to further their education. The input form will have the city, state, and the number of miles to lint the search. I know you just like all of us are very busy. If you… Read more »
Dimitrios Kalemis
Guest

Small typo. Pleease change “initMap” to “drawMap”.

wpDiscuz