i’m trying to include google maps in my hybrid app,and i’m coming across
a problem where the function is running but the google map is not
getting shown.
search.html
this is the page where the map is to be shown, here the share location
option come up but after sharing too,it doesn’t show the page
<style>
#map {
width: 100%;
height: 100%;
}
.scroll {
height: 100%;
}
</style>
<ion-view title="Map">
<ion-nav-buttons side="left">
<button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content >
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-view>
index.html
<html>
<head >
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/flaticon/flaticon.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/app.css">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/datepicker.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
app.js
this is the main js file where the states are defined and i don’t think i have done any mistake here
angular.module('starter', ['ionic', 'starter.controllers'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/connect",
views: {
'menuContent': {
templateUrl: "templates/search.html",
controller: 'GpsCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/main');
});
controllers.js
here is the controller part defined , the GpsCtrl is for the map. the
page is getting opened and asking for location permissions on browser
but then it is not showing the map
angular.module('starter.controllers', ['angular-datepicker'])
.controller('MainCtrl', function($scope) {
})
.controller('GpsCtrl', function($scope) {
ionic.Platform.ready(function() {
var myLatlng = new google.maps.LatLng(12.96,77.65);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
navigator.geolocation.getCurrentPosition(function(pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location"
});
});
$scope.map = map;
});
});
menu.html
this is the file for the sidemenu
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close ng-click="login()">
Login
</ion-item>
<ion-item nav-clear menu-close href="#/app/connect">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/registration">
Browse
</ion-item>
<ion-item nav-clear menu-close href="#/app/main">
Main
</ion-item>
<ion-item nav-clear menu-close href="#/app/resu">
Result
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>