Skip to content

Instantly share code, notes, and snippets.

@aaronksaunders
Last active August 29, 2015 13:57
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaronksaunders/9734056 to your computer and use it in GitHub Desktop.
Save aaronksaunders/9734056 to your computer and use it in GitHub Desktop.
A Pen by aaron k saunders.

Google Maps Directive in Ionic

trying to use two tabs with a leaflet directive in each one and as soon as the two maps are rendered in the page... everything seems to lock up.

<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,600,300,700'
rel='stylesheet' type='text/css'>
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=weather,visualization&sensor=false&language=en&v=3.14"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="https://rawgithub.com/nlaplante/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
</head>
<body>
<ion-nav-bar animation="nav-title-slide-ios7" class="bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="tabs.html" type="text/ng-template">
<ion-tabs tabs-type="tabs-icon-top" tabs-style="tabs-positive">
<ion-tab title="MAP ONE" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="MAP TWO" icon="ion-ios7-information" href="#/tab/about" >
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="MAP ONE" ng-if="onTabOne" >
<ion-content has-header="true" has-tabs="true" padding="true">
<button ng-click="hideMap = !hideMap">HIDE MAP</button>
<button ng-click="addMarker()">ADD MARKER</button>
<google-map center="center" zoom="zoom" >
<markers models='markers' coords="'self'" icon='map.marker.icon' click="'onClicked'">
<windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
<p ng-non-bindable>This is an info window at {{ latitude | number:4 }}, {{ longitude | number:4 }}!</p>
<p class="muted" ng-non-bindable>{{title}}!</p>
</windows>
</markers>
</google-map>
</ion-nav-view >
</ion-view>
</script>
<script id="about.html" type="text/ng-template">
<ion-view title="MAP TWO" ng-if="onTabTwo">
<ion-content has-header="true" has-tabs="true" padding="true">
<div >
<google-map id='map2' center="center" zoom="zoom">
<markers models='markers' coords="'self'" icon='map.marker.icon'>
<windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
<p ng-non-bindable>This is an info window at {{ latitude | number:4 }}, {{ longitude | number:4 }}!</p>
<p class="muted">My marker will stay open when the window is popped up!</p>
</windows>
</markers>
</google-map>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
angular.module('ionicApp', ['ionic','google-maps'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "about.html",
controller: 'AboutTabCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('AboutTabCtrl', function($scope,$log) {
$scope.onTabTwo = true;
$scope.onTabOne = false;
angular.extend($scope, {
center: {
latitude: 45,
longitude: -73
},
markers: [],
zoom: 8
});
$scope.map = {};
})
.controller('HomeTabCtrl', function($scope,$log, $timeout) {
angular.extend($scope, {
center: {
latitude: 38.89,
longitude: -77.13,
},
markers: [{
latitude: 38.89,
longitude: -77.00,
title: 'Marker 2'
}],
zoom:8
});
$scope.map = { };
$scope.onTabTwo = false;
$scope.onTabOne = true;
google.maps.visualRefresh = true;
var onMarkerClicked = function (marker) {
debugger;
marker.showWindow = true;
//window.alert("Marker: lat: " + marker.latitude + ", lon: " + marker.longitude + " clicked!!")
};
$scope.addMarker = function() {
var m = {
latitude: 38.89,
longitude: -77.03,
title: 'm' + new Date(),
};
$scope.markers.push(m);
$log.log('$scope.markers ' + $scope.markers);
alert('added');
};
});
.angular-google-map-container { height: 400px; }
.marker-labels {
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 40px;
border: 1px solid black;
white-space: nowrap;
}
.angular-google-map {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment