Skip to Content
Author's profile photo Jamie Cawley

Google Maps API/Phonegap HWC Example

After creating a project with a workflow add a HtmlView into your Start screen with the key set as “map_canvas”.


Open your projects Custom.js and add the following changes…

function customBeforeWorkflowLoad() {

var headID = document.getElementsByTagName("head")[0];

var script = document.createElement("script");

script.type = "text/javascript";

script.src = "<Your API Key>&sensor=false&callback=initMap";


return true;


var map;
function initMap() {
document.getElementById("map_canvas").style.height = window.innerHeight + 'px';
var mapOptions = {
           center: new google.maps.LatLng(0, 0),
           zoom: 1,
           icon: google.maps.SymbolPath.CIRCLE,
           mapTypeId: google.maps.MapTypeId.ROADMAP
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
navigator.geolocation.getCurrentPosition(setMyLoc, onError,{maximumAge:60000, timeout:5000, enableHighAccuracy:true});

function setMyLoc(position){
var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({
       position: myLatlng,
       map: map,

function onError(error) {
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');

Deploy and test your HWC.

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.