Skip to content

Instantly share code, notes, and snippets.

@junerockwell
Last active September 18, 2022 05:36
Show Gist options
  • Save junerockwell/6437dca42fdfe0f7c696 to your computer and use it in GitHub Desktop.
Save junerockwell/6437dca42fdfe0f7c696 to your computer and use it in GitHub Desktop.
ngMap for Ionic
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', [
'ionic',
'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'MainCtrl'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app');
});
angular.module('starter.controllers', [])
.controller('MainCtrl', function($scope) {
$scope.clicked = function() {
$ionicModal.fromTemplateUrl('templates/map.html', {
scope: $scope
}).then(function(modal) {
$scope.mapModal = modal;
$scope.mapModal.show();
});
};
$scope.closeMapModal = function() {
$scope.mapModal.hide();
}
})
<ion-modal-view >
<ion-header-bar class="bar-dark" >
<h1 class="title">Map</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeMapModal()">Close</button>
</div>
</ion-header-bar>
<ion-content >
<map center="36.168930,-115.189049" zoom="15" style="width: 100%;height: 100%;margin:0;padding:0">
<!-- <info-window id="1" position="{{center}}" visible="true">
<div ng-non-bindable="">
Chicago, IL<br>
LatLng: {{chicago.lat()}}, {{chicago.lng()}}, <br>
World Coordinate: {{worldCoordinate.x}}, {{worldCoordinate.y}}, <br>
Pixel Coordinate: {{pixelCoordinate.x}}, {{pixelCoordinate.y}}, <br>
Tile Coordinate: {{tileCoordinate.x}}, {{tileCoordinate.y}} at Zoom Level {{map.getZoom()}}
</div>
</info-window> -->
<marker
position="36.168930,-115.189049"
title="Hello Marker"
animation="Animation.DROP"
draggable="true"
visible="true"></marker>
</map>
</ion-content>
</ion-modal-view>
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content class="aclass">
<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" expose-aside-when="large">
<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="clicked()">
Show a Map
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment