Login
Status page

Help

Documentation

  1. Twixl Help
  2. More features
  3. How to's

How to use GPS or Google Maps in your Twixl app?

Twixl Support Team Updated: - Created :

    In this KB-article, we'll explain how you can integrate Google Maps into content of your app. The following types of content are supported:

    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>
    Click to copy

    The inline CSS above will make your HTML page scalable. So you can easily change width and height from your canvas (also 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>
    Click to copy

    Also edit the body tag in your page so we call the initialize function on page load.

    <body onload="initialize()">
    Click to copy

    Explanation: 

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

    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);
    Click to copy

    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.

    3. Add pins to the map

    var marker = new google.maps.Marker({

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

map: map,

});
    Click to copy

    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

});
    Click to copy

    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');
 });
    Click to copy

    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>
    Click to copy

    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);
 }
    Click to copy

    6. 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>
    Click to copy