To display geographic information using Google Map is a very important and demanding feature of website. To integrate Google Map is a difficult task for PHP beginners. In this tutorial we are going to explain how to integrate Google Map API using PHP and display the location on Google Map.
A simple HTML form to capture user address detail:
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Google Map API Integrate Using PHP </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div class='web'>
<h1>How To Load Data On Page Scroll Using JQuery</h1> <br />
<div class='inner'>
<form class="mapinfo" method="POST" action="index.php">
<label>Address</label>
<input type="text" id="address" name="address" />
</br>
<label>city</label>
<input type="text" id="city" name="city" />
</br>
<label>state</label>
<input type="text" id="state" name="state" />
</br>
<label>country</label>
<input type="text" id="country" name="country" />
</br>
<label>zip</label>
<input type="text" id="zip" name="zip" />
</br>
<input type="submit" id="submit" name="submit" />
</form>
</div>
</div>
</body>
</html>
PHP Code to call google map api and fetch the detail:
<?php
if(isset($_POST['submit'])){
$address = urlencode($_POST['address']);
$city = urlencode($_POST['city']);
$state = urlencode($_POST['state']);
$country = urlencode($_POST['country']);
$zip = $_POST['zip'];
$resultGeoCode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$address.',+'.$city.',+'.$state.',+'.$country.'&sensor=false');
$output= json_decode($resultGeoCode);
if($output->status == 'OK'){
$latitude = $output->results[0]->geometry->location->lat; //Returns Latitude
$longitude = $output->results[0]->geometry->location->lng; // Returns Longitude
$location = $output->results[0]->formatted_address;
}
}
?>
Javascript code to generate map after getting the response from google map api:
<script type="text/javascript">
$(document).ready(function () {
function initialize() {
// Define the latitude and longitude positions
var latitude = parseFloat("<?php echo $latitude; ?>"); // Latitude get from above variable
var longitude = parseFloat("<?php echo $longitude; ?>"); // 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) {
//infowindow.open(map,marker);
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,
icon:'marker.png',
draggable:true,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker,'drag',function(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value= event.latLng.lng();
});
google.maps.event.addListener(marker,'dragend',function(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
alert(marker.getPosition());
});
google.maps.event.addListener(map, 'zoom_changed', function () {
document.getElementById('zoom').value =map.getZoom();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
});
</script>
Thanks for sharing. You can use our code of SMS API PHP for SMS notifications, signup messages, alert, reminder, and OTP. Make sure you have read developer guide that helps you to do SMS API integration into websites/applications/software in this language.
ReplyDelete