Ionic framework seems to be promising in developing cross platform mobile applications. Currently it works very well on Android and IOS , but limited on Windows Phone. Lets have a small introduction on how to implement google maps using Ionic Framework as a beginner view.
Lets start with implementation of View using HTML5 Ionic template
<ion-view title="Map Demo
<ion-pane>
<ion-content overflow-scroll="true" ng-controller="MapController">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-pane>
</ion-view>
Please add this script to the index page
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true"></script>
Controller Implementation probably app.js or controller.js
.controller('MapController', ['$scope', function($scope) {
function initialize() {
var latLng = new google.maps.LatLng(17.80303,79.0345);
var mapOptions = {
center: latLng ,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var marker = new google.maps.Marker({
position: latLng ,
map: map,
title: 'Map Demo'
});
$scope.map = map;
}
google.maps.event.addDomListener(window, 'load', initialize);
}]);
Thats it, Happy coding
