Using Google Maps API in PHP

First of all, I would like to wish you guys Happy New Year. 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.


Live Demo

In demo, you can enter all the fields and hit submit to get the Map of that address, Or you just enter any of the given form fields and it will display the Map. Let’s see the simple code:

Below is our code for HTML form:

<div id="mapform">
<form class="mapinfo" method="POST" action="#">
<input type="text" id="address" name="address" />
<input type="text" id="city" name="city" />
<input type="text" id="state" name="state" />
<input type="text" id="country" name="country" />
<input type="text" id="zip" name="zip" />
<input type="submit" id="submit" name="submit" />

We have included jQuery script and Google Map API js file in header of our page:

<script type="text/javascript" src=""></script>
<script src="" type="text/javascript"></script>

Below is the PHP code to take form values and pass it to Map API:

$add = urlencode($_POST['address']);
$city = urlencode($_POST['city']);
$state = urlencode($_POST['state']);
$country = urlencode($_POST['country']);
$zip = $_POST['zip'];


$output= json_decode($geocode); //Store values in variable
 // print_r($output);
if($output->status == 'OK'){ // Check if address is available or not
echo "<div class=\"display_map_details\">";
echo "<br/>";
echo "Latitude : ".$lat = $output->results[0]->geometry->location->lat; //Returns Latitude
echo "<br/>";
echo "Longitude : ".$long = $output->results[0]->geometry->location->lng; // Returns Longitude
echo "<br/>";
echo "Address : ".$loc=$output->results[0]->formatted_address;
echo "</div>";


And finally we have JS script to generate map after getting server response:

$(document).ready(function () {
function initialize() {

// Define the latitude and longitude positions
var latitude = parseFloat("<?php echo $lat; ?>"); // Latitude get from above variable
var longitude = parseFloat("<?php echo $long; ?>"); // Longitude from same
var latlngPos = new google.maps.LatLng(latitude, longitude);

// Set up options for the Google map
var myOptions = {
zoom: 13,
center: latlngPos,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
// Define the map
map = new google.maps.Map(document.getElementById("display_map"), myOptions);
 addMarker(latlngPos, 'Default Marker', map);

 google.maps.event.addListener(map, 'dragstart', function(event) {

addMarker(event.latlngPos, 'Click Generated Marker', map);

 var lat, lng, address;

 function addMarker(latlng,title,map) {
 var marker = new google.maps.Marker({
 position: latlng,
 map: map,
 title: title,
 animation: google.maps.Animation.DROP

google.maps.event.addListener(marker,'drag',function(event) {
 document.getElementById('lat').value =;
 document.getElementById('lng').value= event.latLng.lng();

google.maps.event.addListener(marker,'dragend',function(event) {
 document.getElementById('lat').value =;
 document.getElementById('lng').value = event.latLng.lng();
 google.maps.event.addListener(map, 'zoom_changed', function () {
 document.getElementById('zoom').value =map.getZoom();

google.maps.event.addDomListener(window, 'load', initialize);

This is one of the best and working tutorial would find in Web. You can share this tutorial with your friends and followers. Also your feedback and suggestions are welcome so please do comment if this script helps you in your projects. We are working on Maps API to bring some other useful and easy to use scripts for you guys. Again I wish a great year ahead to all the readers of InfoTuts :)

About sanjeev

Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

6 Responses so far.

  1. Thanks for this. With your help I succeed in implementing maps on my photoblog. Didn’t use a form but custom fields to store the coordinates.
    But the jquery part of your tutorial was very helpfull.

Leave a Reply

Your email address will not be published. Required fields are marked *