In this post we will take a look on working with Google map in Icenium. We will display Google map pinned with current location in a mobile view.
On creating Cross-Platform mobile application (Kendo UI Mobile) in Icenium, you will find by default references to work with Google map added in the project.
Next we need to create a view. In this view map will be rendered,
<div data-role="view" id="map" data-title="Map" data-show="showMap" data-stretch="true">
<div>
<div id="map_canvas" style="width: 100%; height: 100%; position: absolute;">
</div>
</div>
</div>
There are certain points worth discussing about the view.
- showMap function will be called whenever user is navigating to view.
- Style of map-canvas div is set to 100% width and height such that map will be displayed in whole view.
Now we need to write showMap function. In this function we will call PhoneGap navigatior.geolocation.getCurrentPosition function to get the longitude and latitude of current location of the user.
function showMap() {
navigator.geolocation.getCurrentPosition(
onSuccessShowMap,
onErrorShowMap
);
}
navigatior.geolocation.getCurrentPosition will call onSuccessShowMap function on success and onErrorShowMap on any exception in finding users current location. In onSuccessShowMap function we will render Google map in the view created previously.
Rendering of Google map can be done in three steps,
Very first we need to find longitude and latitude of the current location and that can be done as following,
Once longitude and latitude has been determined next we want to create the map option. You can read more about Google map options in Google map API documentation. So we are creating map option as following,
After creating map option we need to create the map. It takes two parameters. First HTML element on which you want to render the map and then map options. We have created a div with id map-canvas in map mobile view to render the map and in previous step, we created the map option.
At the last step we need to set the marker on the map with the current location. That can be done as following,
To render map you need to consolidate all the steps discussed above in onSuccessShowMap(position) function. After consolidating function should look like below,
function onSuccessShowMap(position) {
var latlng = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude);
var mapOptions = {
sensor: true,
center: latlng,
panControl: false,
zoomControl: true,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: true,
};
var map = new google.maps.Map(
document.getElementById('map_canvas'),
mapOptions
);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
console.log(marker);
console.log("map rendering");
}
</script>
In last we need to write onErrorShowMap function. In this function handle all the errors may encounter while reading current location of the user. I am leaving function like following
function onErrorShowMap(error) {
alert("error");
}
Now when you run application you should get map with user current location in the map view.
I hope you find this post useful. Thank for reading.
Helping Ninja Technologists 