Creating Google Maps Sample App with AngularJS and Onsen UI

Andi Pavllo
Feb 19, 2015 · 8 min read
Image for post
Image for post

This sample application has the purpose of demonstrating how to combine elements of Onsen UI, a framework for creating hybrid HTML5 apps, AngularJS, a JavaScript framework developed by Google, and Google Maps JavaScript API v3.

****Please note that this article was written in 2015. Onsen UI released its version 2 in October 2016 and many things have changed since then. If you are interested in map integration to your cordova app, also check out more recent article by Andi.****

This application has been developed using Monaca, a cloud based mobile app development environment that supports iOS/Android/Windows 8 hybrid apps in one source. The benefit of using Monaca to develop this sample application is dictated by the fact that this product provides a native support for Onsen UI, default templates and user-friendly development environment that allows developers to skip the installation and configuration of the frameworks used in this project.

The features implemented in this application are quite simple: the purpose is not to create a large application with complicated features, but to create a template which can be extended in the future. That’s why some elements, like the search bar and the settings page, have only been implemented without offering any real functionality, but, at the same time, are ready to be associated with any behaviour the programmer wishes to implement.

https://andipavllo.github.io/Google-Maps-Onsen-UI-Sample/www/index.html

The implemented features are:

  • Add Marker, via screen long press
  • Delete single Marker, via screen press (on the Marker)
  • Delete all Markers, via <ons-button>
  • Calculate the distance (partial and total) between the Markers, via <ons-button>
  • Menu, via <ons-sliding-menu>

The main interface consists of an <ons-sliding-menu> associated with two pages: map.html and settings.html. The first one will contain the map element and Onsen UI elements like <ons-button>. The user is free to navigate between these two pages using the sliding menu element.

You can try the app using the sample above, or directly from the browser by clicking here. The code is also available on GitHub at this link.

Except the HTML content illustrated above, the application contains two other key elements: controller.js and style.css.

Controllers

SlidingMenuController

MapController

After the map is loaded, it is necessary to add a listener related to the hard press event, which is associated with adding a new Marker. To implement this feature we have used the library Hammer.JS, which is natively included in Onsen UI.

After the map’s initialization occurred, the user is free to perform the basic implemented features that were listed before. Each one of these features is associated with a method, more precisely $scope.addOnClick(), $scope.deleteAllMarkers() and $scope.calculateDistance().

The first method, $scope.addOnClick(), is associated with the listener that was introduced above. First of all it takes the X and Y value of the hardclicked/hardpressed point on the screen and try to convert it in latitude and longitude coordinates. This step is necessary because the points displayed on Google Maps are encoded with this format. To perform this action, we use the function:

$scope.overlay.getProjection().fromContainerPixelToLatLng(point);

It is important to consider that the coordinates origin will start from the top-left point of the div when the map is contained, and not from the top-left of the device’s screen. That’s why, when we take the Y coordinate, we have to decrease is by (-) 44px, since 44px is the height of the <ons-toolbar> element which is situated on the top of the screen. After the coordinates conversion, our marker is ready to be added in the markers array and to be displayed on the map.

At this point it is necessary to create a listener associated with the click/press event on one of the markers. If a marker will be pressed, a ons.notification.confirm element will appear, asking the user if he wants to delete the marker. Based on the user’s choice, the relative action will be executed and an ons.notification.alert element will be displayed.

The method $scope.deleteAllMarkers() is very simple: it just scans the marker’s array and deletes any marker from the map. At the end, it deletes all the elements from the array and initialize the index variable to its initial value.

The last method is $scope.calculateDistance(), which calculates the distance from two or more markers on the map, using a formula that can easily be found on the web. To perform this operation, we don’t need to perform any conversion, as we did before, because the coordinates are expressed with the same encoding elaborated by the formula. After the elaboration is over, a ons.notification.confirm element will ask the user if he also wants to see the partial distances between the markers. The results of this choice will be again displayed with a ons.notification.alert element.

CSS

The lower layer will contain the Google Maps elements, like the map and the markers, meanwhile the upper layer will contain Onsen UI elements. This action has been performed mainly thanks to the z-indexproperty: assigning a lower z-index value to the maps elements will push them in a lower level than the Onsen UI elements, which have a higher value.

It is very important to specify the position of Onsen UI’s elements correctly, as to not overlap them on Google Maps’s ones. It’s also very important to consider the resolution of the screen to position the elements correctly. Also the element’s size is very important, for example a div that is too big will overlay the map, making impossible any interaction with it.

HTML

index.html

After the scripts and css sheets inclusion, we need to include a Google Map Key Script in our application, in order to be able to display the map content. To be honest, from the last version of Google Maps JavaScript API, a key is no more mandatory, but is highly recommended in order to monitor your data usage and purchase additional data quota. You can find additional information about how to obtain a free Google Maps API Key at this link.

The tag to include, in order to display the map, is:

<script type="text/javascript"     
src="https://maps.googleapis.com/maps/api/js">
</script>

At this point we can analyze the body content. As you can see, inside the body there is only an <ons-sliding-menu> element. It is the root of all the Onsen UI’s elements in the application and is characterized by some attributes as var="slidingMenu", which is used for the two way data binding inside AngularJS, menu-page="menu.html" which is the page that contains the HTML of the sliding menu, and main-page="map.html", which is the main page displayed by default. Furthermore, the menu, as explained before, is set by default as unswipeable by the attribute swipeable="false".

menu.html

map.html

Immediately above it, we can find a <ons-toolbar> element, which contains the title of the page and an <ons-toolbar-button> which is designed to open and close the sliding menu. For this reason, inside the <ons-toolbar> is placed another controller declaration, precisely ng-controller="SlidingMenuController".

The rest of the code is the one that displays the map, the search bar and the two <ons-button>.

Conclusion

Originally published at onsen.io on February 19, 2015.

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store