The present code is a Google Maps geocoding case with PHP and we likewise utilize some Google Maps JavaScript to demonstrate the geo-coded information on the guide
You can utilize this code on the off chance that you need to make a store locator. Why this is helpful? Suppose you have a few locations on your database, you will never need to physically stick point the scope and longitude of every one of those addresses
That is the reason we have the geocoding strategy. Simply input the addresses and Google will endeavor to distinguish the rough area of that address.
Code Here
Step by step Code
Step 1: Create container.php
</head>
<body class=””>
<div role=”navigation” class=”navbar navbar-default navbar-static-top”>
<div class=”container”>
<div class=”navbar-header”>
<button data-target=”.navbar-collapse” data-toggle=”collapse” class=”navbar-toggle” type=”button”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a href=”#” class=”navbar-brand”>PHPCODE</a>
</div>
<div class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
</ul>
</div><!–/.nav-collapse –>
</div>
</div>
<div class=”container” style=”min-height:500px;”>
<div class=”>
</div>
Step 2: Create footer.php
<div class=”insert-post-ads1″ style=”margin-top:20px;”>
</div>
</div>
</body></html>
Step 3 : Create Function.php
<?php
// function to geocode address 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;
}
}
?>
Step 4: Create index.php
<?php
include(‘functions.php’);
?>
<!DOCTYPE html>
<html>
<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>phpcode : Demo Google Maps Geocode Address with PHP</title>
<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” />
<?php include(‘container.php’);?>
<div class=”container”>
<h2>Google Maps Geocode Address with PHP</h2>
<?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!”;
}
}
?>
<br>
<div>
<div><strong>You can enter below example address or enter any other address to see map :</strong></div>
<div>1. Central Market Delhi</div>
<div>2. Fortis Hospital Noida</div>
</div>
<br>
<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>
<div style=”margin:50px 0px 0px 0px;”>
<a class=”btn btn-default read-more” style=”background:#3399ff;color:white” href=”#”>Back to Tutorial</a>
</div>
</div>
<?php include(‘footer.php’);?>
Step 5 Style.css
#gmap{
width:100%;
height:30em;
}
Download DEMO
Leave a Reply