Today i tried to add google maps in contact page using Google Maps JavaScript API v3.
To add map first we need to create API key by login to Google Account at https://code.google.com/apis/console
1. Click the Services link from the left-hand menu.
2. Activate the Google Maps JavaScript API v3 service.
3. Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.
You can see following line in below map html code
center: { lat: 9.9671114, lng: 76.2890811}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyACrmq-Z7Qixx3TegmLgaL95TRApnxUDVc">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: 9.9671114, lng: 76.2890811},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Following PHP code will help you to get those values (lat: 9.9671114, lng: 76.2890811}) by using your address that you have added in google map
<?php
$address = 'HostOnNet.com, Venus Chambers, Valanjambalam 39/1636, S A Rd, Ernakulam South Ernakulam, Kerala 682016 India'; // Google HQ
$prepAddr = str_replace(' ','+',$address);
$geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false');
$output= json_decode($geocode);
$lat = $output->results[0]->geometry->location->lat;
$long = $output->results[0]->geometry->location->lng;
echo $address.'<br>Lat: '.$lat.'<br>Long: '.$long;
?>
