How To Create Google Direction Map Shortcode In WordPress

PressTigers

How To Create Google Direction Map Shortcode In WordPress

September 15, 2015
Leave a comment

This article would explain how to create a short-code to display Google Direction Map and to use shortcode anywhere in posts/pages or in text widget with zero effort. A WordPress-specific code that lets you do nifty things with very little effort is “shortcode“. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut (source). Shortcodes can be used in page/post content or in text widget. When non-technical user is managing a site, then shortcodes are the ultimate help. Non technical user can add/remove page front-end look with the help of shortcodes.

Point to be noted here is that this article would not encompass an in-depth discussion on Google Direction Map code and how Google Direction Map API works. It will tell you about the use of Google Direction Map code that you can find easily on internet or from Google Map API. If you have any query regarding Google Direction Map API, don’t hesitate to contact us. For Google Direction Map API help, follow this link.

First we will look into the Google Direction Map code to display Google Direction Map on HTML pages. Below is its code for Google Map API JS file:

<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true”></script>

1	<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true”></script>

To display Map on HTML pages, its Map Script is as follows:

<script>
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var default_location = new google.maps.LatLng('.$lat.', '.$long.');
  function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer();
   var mapOptions = {
    zoom:12,
    center: default_location,
    panControl: false,
    zoomControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false
  };
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  directionsDisplay.setMap(map);
 }
 function calcRoute() {
  var start = default_location;
  var end = document.getElementById("end").value;
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
   }
  });
 }
 google.maps.event.addDomListener(window, "load", initialize);
 </script>

var directionsDisplay;

var directionsService = new google.maps.DirectionsService();

var map;

var default_location = new google.maps.LatLng('.$lat.', '.$long.');

function initialize() {

directionsDisplay = new google.maps.DirectionsRenderer();

var mapOptions = {

zoom:12,

center: default_location,

panControl: false,

zoomControl: false,

mapTypeControl: false,

scaleControl: false,

streetViewControl: false,

overviewMapControl: false

};

map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

directionsDisplay.setMap(map);

}

function calcRoute() {

var start = default_location;

var end = document.getElementById("end").value;

var request = {

origin:start,

destination:end,

travelMode: google.maps.TravelMode.DRIVING

};

directionsService.route(request, function(response, status) {

if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setDirections(response);

}

});

}

google.maps.event.addDomListener(window, "load", initialize);

</script>

HTML for Google Map and inputs for Google Direction Map are as follows:

<div id="map-canvas"></div>
 <div id="panel">
        <input type="text" id="end" name="saddr" placeholder="Your Location"/>
<input type="submit" value="Find Direction" onclick=”calcRoute();>
 </div>

</div>

Now, review the code and find the line listed below in Google Script code:

var default_location = new google.maps.LatLng(‘.$lat.’, ‘.$long.’);

Here $lat> and $long> are the two variables that are used to display user current position on map ($lat for latitude and $long> for longitude).

The function calcRoute()> is used to calculate the route distance or direction from your address to new address given by the user.

<input type="text" id="end" name="saddr" placeholder="Your Location"/>

1	<input type="text" id="end" name="saddr" placeholder="Your Location"/>

This input is used to get the Ending Address (Destination Address) from user.

Conversion Of Code To WordPress ‘shortcode’:

add_shortcode( "pt_google_map", "pt_google_map_function" );

1	add_shortcode( "pt_google_map", "pt_google_map_function" );

add_shortcode is a WordPress function used to create a shortcode. The function gets two arguments, first argument is name of the shortcode that we will be using and second argument is the function that will be called when this shortcode is used. The name of the shortcode should be unique. In our case, our shortcode name will be pt_google_map>. The pt> (PressTigers) concatenates with shortcode name to verify that its name is unique.

function pt_google_map_function($atts, $content = NULL){
   $default = array('lat' =&gt; '40.7143528', 'long' =&gt; '-74.0059731');
   extract(shortcode_atts($default, $atts));
   $html = "";
return $html;
}

function pt_google_map_function($atts, $content = NULL){

$default = array('lat' => '40.7143528', 'long' => '-74.0059731');

extract(shortcode_atts($default, $atts));

$html = "";

return $html;

}

The function pt_google_map_function() has one argument name $atts which contains the extra information given when the shortcode is being used. In our case, we will pass latitude and longitude. Our final code will be like this:

add_shortcode( "pt_google_map", "pt_google_map_function" );
 function pt_google_map_function($atts, $content = NULL){
   $default = array('lat' =&gt; '40.7143528', 'long' =&gt; '-74.0059731');
   extract(shortcode_atts($default, $atts));
   $html = "";
   $html .='
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"></script>
   <script>
     var directionsDisplay;
     var directionsService = new google.maps.DirectionsService();
     var map;
     var default_location = new google.maps.LatLng('.$lat.', '.$long.');
     function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapOptions = {
         zoom:12,
         center: default_location,
         panControl: false,
         zoomControl: false,
         mapTypeControl: false,
         scaleControl: false,
         streetViewControl: false,
         overviewMapControl: false
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        directionsDisplay.setMap(map);
     }
     function calcRoute() {
        var start = default_location;
        var end = document.getElementById("end").value;
        var request = {
          origin:start,
          destination:end,
          travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
         if (status == google.maps.DirectionsStatus.OK) {
           directionsDisplay.setDirections(response);
         }
        });
     }
     google.maps.event.addDomListener(window, "load", initialize);
    </script>
    <div id="map-canvas"></div>
    <div id="panel">
        <input type="text" id="end" name="saddr" placeholder="Your Location">
         <input type="submit" value="Find Direction" onclick=”calcRoute();”>
       </div> ';
    return $html;
 }

add_shortcode( "pt_google_map", "pt_google_map_function" );

function pt_google_map_function($atts, $content = NULL){

$default = array('lat' => '40.7143528', 'long' => '-74.0059731');

extract(shortcode_atts($default, $atts));

$html = "";

$html .='

var directionsDisplay;

var directionsService = new google.maps.DirectionsService();

var map;

var default_location = new google.maps.LatLng('.$lat.', '.$long.');

function initialize() {

directionsDisplay = new google.maps.DirectionsRenderer();

var mapOptions = {

zoom:12,

center: default_location,

panControl: false,

zoomControl: false,

mapTypeControl: false,

scaleControl: false,

streetViewControl: false,

overviewMapControl: false

};

map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

directionsDisplay.setMap(map);

}

function calcRoute() {

var start = default_location;

var end = document.getElementById("end").value;

var request = {

origin:start,

destination:end,

travelMode: google.maps.TravelMode.DRIVING

};

directionsService.route(request, function(response, status) {

if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setDirections(response);

}

});

}

google.maps.event.addDomListener(window, "load", initialize);

</script>

</div> ';

return $html;

}

How To Use ‘shortcode’ In Content Area or Posts/Pages:

Calculate your address latitude and longitude from this http://www.mapcoordinates.net/en. You need to enter your address only and it will give you the latitude and longitude values that you can then use in your shortcode:

[pt_google_map lat=”40.7143528,” long=”-74.0059731”>]>

You can style the inputs and Google Map div with custom CSS as you want. Below is the output of this shortcode. In our case, we have added some CSS for its Styling. See the screenshot below for the output of this shortcode:

google-map-shortcode-output