Using the GPS and Google Maps in your publication

Luk Dhondt 12-09-2012 How-To

In this tutorial I will explain how you can integrate Google Maps into your Twixl Publisher publication.
To integrate Google Maps we will use a "Web viewer" in the Twixl Publisher Plugin.

If you are unfamiliar with web viewers, you may want to check the following article in our documentation first: http://docs.twixlmedia.com/wiki/pages/p9t2B4p9/Web_Viewers.html

1) Create a new HTML web page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Google maps - Twixl</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">
      html { height: 100%; }
      body { height: 100%; margin: 0; padding: 0; }
      #map_canvas { height: 100%; width: 100%; }
    </style>
 </head>

<body>
	<div id="map_canvas"></div>
</body>
</html>
Explanation:

<div id="map_canvas"></div>
The div map_canvas will be the placeholder for the map.

<style type="text/css">
      html { height: 100%; }
      body { height: 100%; margin: 0; padding: 0; }
      #map_canvas { height: 100%; width: 100%; }
</style>
The inline CSS above will make your HTML page scalable. So you can easily change width and height from your canvas in InDesign.

2) Add Google API

First you need to provide a link to the Google Maps API and add the initialize function to the header of your HTML page. The URL contained in the script tag is the location of a JavaScript file that loads all of the symbols and definitions you need for using the Google Maps API. This script tag is required.


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
 function initialize() {

 var mapOptions = {
 center: new google.maps.LatLng(51.01471, 3.651465),
 zoom: 11,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };

 var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
</script>
Also edit the body tag in your page so we call the initialize function on page load.


<body onload="initialize()">
Explanation:

var mapOptions = {
center: new google.maps.LatLng(51.01471, 3.651465),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
In the variable mapOptions you define the map options:
  • Latitudes and Longitudes (center the map on a specific point)
  • Zoom Levels (Where zoom 0 corresponds to a map of the Earth fully zoomed out, and higher zoom levels zoom in at a higher resolution.)
  • Map Types  (ROADMAP,  SATELLITE, HYBRID and TERRAIN)

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
When you create a new map instance, you specify a <div> HTML element in the page as a container for the map. HTML nodes are children of the JavaScript document object, and we obtain a reference to this element via the document.getElementById() method.

Current result:

3) Add pins to the map



var marker = new google.maps.Marker({

position: new google.maps.LatLng(51.01471,3.651465),

map: map,

});

To add a default pin to your map you need to add this javascript code in the initialize function after the map variable.

Custom pin:



var image = 'http://website.com/pin_icon.png';

var marker = new google.maps.Marker({

position: new google.maps.LatLng(51.01471,3.651465),

map: map,

icon: image

});

Other options for the marker are:
  • clickable (boolean)
  • draggable (boolean)
  • flat (boolean) -> removes shadow
  • title (string) -> rollover text
  • zIndex (number)

4) Events marker & map



google.maps.event.addListener(marker, 'click', function() {
 alert('demo alert');
 });

You also can add events to your markers and map with: google.maps.event.addListener In the event function you can place URL's, alerts, infoWindows, ...

Events:

  • click
  • dblclick
  • mouseup
  • mousedown
  • mouseover
  • mouseout

5) Current GPS location

in order to add the current GPS location, first we change the Google API url to:



<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Then add this after the map variable:



// Check for geolocation support
 if (navigator.geolocation) {
 // Get current position
 navigator.geolocation.getCurrentPosition(function (position) {
 // Success!
 var center = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

 var image = 'http://i.stack.imgur.com/orZ4x.png';
 var marker = new google.maps.Marker({
 position: center,
 map: map,
 title:"Twixl Demo",
 icon: image,

 });

});
 }
 else {
 // No geolocation fallback:
 markOutLocation(51.01471, 3.651465);
 }

Current result: Overview code:

The code below will display a pin with the current location


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Google maps - Twixl</title>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

 <style type="text/css">
 html { height: 100%; }
 body { height: 100%; margin: 0; padding: 0; }
 #map_canvas { height: 100%; width: 100%; }
 </style>

 <script src="http://maps.google.com/maps/api/js?sensor=true"></script>

 <script type="text/javascript">
 function initialize() {

 var mapOptions = {
 center: new google.maps.LatLng(51.01471, 3.651465),
 zoom: 11,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };

 var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

 // Check for geolocation support
 if (navigator.geolocation) {
 // Get current position
 navigator.geolocation.getCurrentPosition(function (position) {
 // Success!
 var center = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

 var image = 'http://i.stack.imgur.com/orZ4x.png';
 var marker = new google.maps.Marker({
 position: center,
 map: map,
 title:"Twixl",
 icon: image,
 });
 });
 }
 else {
 // No geolocation fallback:
 markOutLocation(51.01471, 3.651465);
 }
 }
 </script>

 </head>

<body onload="initialize()">
 <div id="map_canvas"></div>
</body>
</html>

Tweet this article: Using the GPS and Google Maps in your publication

Share this post to your network.

Download the free trial of Twixl Publisher

Start using Twixl Publisher immediately, preview the result on your own device, share your creations with a colleague or client, get started!
Need any help? Visit our documentation site.

Download the trial Check out the documentation today

× Free trial/download