How to show current location on Google Map in Icenium

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.

image

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.

clip_image002

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,

image

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,

image

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.

image

At the last step we need to set the marker on the map with the current location. That can be done as following,

image

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.

image

I hope you find this post useful. Thank for reading.

Advertisements

One thought on “How to show current location on Google Map in Icenium

  1. Thanks for the example! Is it possible to use custom images for the markers? I am also trying to figure how I can call other code when the markers are tapped. I need to know which marker is tapped so I can display different information based on the marker.

    Warren

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s