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 = "http://maps.googleapis.com/maps/api/js?key=<Your API Key>&sensor=false&callback=initMap";
headID.appendChild(script);
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);
map.setZoom(10);
map.setCenter(myLatlng);
var marker = new google.maps.Marker({
       position: myLatlng,
       map: map,
       title:"Hello"
   });
}
function onError(error) { 
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');
}

Deploy and test your HWC.