The Techjoomla Blog

Stay updated with all the latest happenings at Techjoomla. From news about the developments in your favourite extensions to Tips & Tricks about the Joomla CMS, Framework & Development.
Font size: +
2 minutes reading time (320 words)

Location tracking made easy with Google Maps APIs

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.


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 = "$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);
$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=""></script>
<script src=""></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);


 Step 3: Show Map


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

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

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

<hr class="hr hr-condensed"/>
<div class="pull-right">
<a href="<?php echo urlencode($this->item->location); ?>" target="_blank"><?php echo "Full Map"; ?></a>

  Hope this helps. :)



Stay Informed

When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.

Shika v1.0 Beta 4 is out!
Shika Learning Reimagined Webinar!

Related Posts


Blog Topics