As we will cover this tutorial with live demo to implement Google Maps Geocoding API with a location marker on Google Map JavaScript and PHP, so the file structure for this example is following.
- index.php
- functions.php
- style.css
Step1: Include Bootstrap, jQuery and CSS
As we will create example HTML using Bootstrap, so in index.php file, we will include Bootstrap CSS and also jQuery to use to display Google Map. We will also include CSS file style.css to display Google map.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
Step2: Create HTML Form To Enter Address
In index.php file, we will create Form HTML to enter address and a submit button to display Google Map according to address on form submit.
<form action="" method="post">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<input type='text' name='searchAddress' class="form-control" placeholder='Enter address here' />
</div>
</div>
<div class="form-group">
<input type='submit' value='Find' class="btn btn-success" />
</div>
</div>
</form>
Step3: Create Google Geocoding API Function
In functions.php, we will create function getGeocodeData to get latitude, longitude and formatted address details into JSON format from particular address with Google Geocoding API and return as array to use in Google JavaScript Map. You also need to create Google Geocoding API Key to use here to get Geocoe details.
function getGeocodeData($address) {
$address = urlencode($address);
$googleMapUrl = "https://maps.googleapis.com/maps/api/geocode/json?address={$address}&key=YOUR_API_KEY";
$geocodeResponseData = file_get_contents($googleMapUrl);
$responseData = json_decode($geocodeResponseData, true);
if($responseData['status']=='OK') {
$latitude = isset($responseData['results'][0]['geometry']['location']['lat']) ? $responseData['results'][0]['geometry']['location']['lat'] : "";
$longitude = isset($responseData['results'][0]['geometry']['location']['lng']) ? $responseData['results'][0]['geometry']['location']['lng'] : "";
$formattedAddress = isset($responseData['results'][0]['formatted_address']) ? $responseData['results'][0]['formatted_address'] : "";
if($latitude && $longitude && $formattedAddress) {
$geocodeData = array();
array_push(
$geocodeData,
$latitude,
$longitude,
$formattedAddress
);
return $geocodeData;
} else {
return false;
}
} else {
echo "ERROR: {$responseData['status']}";
return false;
}
}
Step4: Display Google JavaScript Map with Address Marker
Now finally we will add code in index.php on Form submit to display Google JavaScript with address Marker using Geocoding response. We will call PHP function getGeocodeData() to get Geocoding response and passed to Google JavaScript Map. We also need to create JavaScript Google Map API Key to use here.
<?php
if($_POST) {
// get geocode address details
$geocodeData = getGeocodeData($_POST['searchAddress']);
if($geocodeData) {
$latitude = $geocodeData[0];
$longitude = $geocodeData[1];
$address = $geocodeData[2];
?>
<div id="gmap">Loading map...</div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>
<script type="text/javascript">
function init_map() {
var options = {
zoom: 14,
center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($("#gmap")[0], options);
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 $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
} else {
echo "Incorrect details to show map!";
}
}
?>
You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]