Skip to Content

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

Capture.PNG

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.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply