Location tracking made easy with Google Maps APIs

Hey Guys,

We come across situations where locating a place becomes imperative; whether it's a venue for an event, site office or anything. Just to make sure that this problem is overcome, you need to add google maps support in your extensions, website and applications wherever necessary. This can be achieved with the help of certain information like the IP address, Latitudes and Longitudes.

In this blog, we are going to see how to use Google maps APIs to show the map (based on location)

 

Following are the steps to achieve this.

 Requirements

You need to enable curl library for your PHP configuration.

Step 1: Calculate latitude and longitude from your location.

 

// Pass location Here 

$location="pune "

$address = str_replace(" ", "+", $location);
$url = "http://maps.google.com/maps/api/geocode/json?address=$address&sensor=true";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_PROXYPORT, 3128);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
curl_close($ch);
$response_a = json_decode($response);
// Get latitude and longitude
$lat = $response_a->results[0]->geometry->location->lat; 
$long = $response_a->results[0]->geometry->location->lng;

 

 Step 2: Include google  javascript source for the Map

 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
lat = "<?php echo $lat; ?>"
lon = "<?php echo $long; ?>"
       var myLatlng = new google.maps.LatLng(lat,lon);
       var mapOptions = {
       zoom: 10,
       center: myLatlng
  }

  var map = new google.maps.Map(document.getElementById('event-map'), mapOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

 

 Step 3: Show Map

 

<div id="jticketing-event-map" class="well">
<!-- begin: dynamic map -->
<div id="event-map" >
<?php echo "Loading Map";?>
</div>

<div class="row-fluid" itemprop="location" itemscope itemtype="http://schema.org/Place">
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">
<i class="icon-map-marker"></i>
     <strong><?php echo 'Location : '; ?></strong>

<?php echo $this->item->location; ?>

</span>
</div>
<hr class="hr hr-condensed"/>
<div class="pull-right">
<a href="http://maps.google.com/?q=<?php echo urlencode($this->item->location); ?>" target="_blank"><?php echo "Full Map"; ?></a>
</div>
</div>
</div>

  Hope this helps. :)