I have three states in my simple ionic project. I want to add a map to home page after logged in. When I tried to add a map in map.html file which is a template file, it appears when map.html opened via browser. However, when I try to reach this state(map.html) by using $stateProvider the map does not appear.
My map.html file is :
<!DOCTYPE html>
<html ng-app="starter">
<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 href="css/style.css" rel="stylesheet">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 400px;
}
</style>
</head>
<body ng-controller="mapctrl">
<ion-header-bar class="bar-dark"> <h1 class="title">Home Page</h1></ion-header-bar>
<ion-view>
<div id="map" ng-init="initMap()"></div>
<button ng-click="goOther()" class="button button-block button-dark">For more detail please click!</button>
</ion-view>
</body>
</html>
My app.js is :
var app =angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider
.state('login',{
url:'/login',
templateUrl:'templates/login.html',
controller:'loginctrl'
})
.state('map',{
url:'/map',
templateUrl:'templates/map.html',
controller:'mapctrl'
})
.state('other',{
url:'/other',
templateUrl:'templates/other.html',
controller:'otherctrl'
})
$urlRouterProvider.otherwise('/login');
}])
app.controller('loginctrl',function($scope,$state){
$scope.goMap = function(){$state.go('map');};
})
app.controller('mapctrl',function($scope,$state){
$scope.goOther = function(){
$state.go('other');};
$scope.initMap = function () {
console.log("deneme");
var myLatlng = new google.maps.LatLng(51.5120, -0.12);
var mapOptions = {
zoom: 14,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
};
})
app.controller('otherctrl',function($scope,$state){
$scope.goLogin = function(){$state.go('login');};
});
I've also tried to add the map directly in map.html file but it doesn't appear,either.
Thanks in advance.
Google maps works only with https in chrome and it may not have any dependency with $stateProvider
Related
I'm having issues where my module is not loading my map, giving an Error: $injector:modulerr
Module Error. I'm fairly certain I instantiated my module correctly with...
var app = angular.module("MapApp", ["openlayers-directive"]);
app.controller('MapController', ['$scope', function MapController($scope){
angular.extend($scope, {
center:{
lat: 40.060620,
lon: -77.523182,
zoom: 17
}
});
}]);
And then use this within my html...
<!DOCTYPE html>
<html lang="en" ng-app="MapApp">
<head>
<meta charset="UTF-8">
<title>ShipList</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../js/ol.js"></script>
<script src="../lib/angular.min.js"></script>
<link rel="stylesheet" href="../css/ol.css"/>
<script src="../js/Map.js"></script>
...
<!--Later in my body tag, I'm declaring my Controller-->
<div class="overlay" ng-controller="MapController">
<openlayers id="mapid"></openlayers>
But I'm still getting the module instantiation error. I think I'm not loading the OpenLayers directive correctly? I also tried loading the same dependencies from CDNs for OpenLayers and such see here in this JSFiddle. If it matters, I also defined the height, width, and zoom properties of my map in my style sheet.
.angular-openlayers-map {
height: 800px;
width: 100%;
float: left;
z-index: 1;
position: relative;
}
I don't see any references for open layers javascript file. Please check the following demo.
Demo
var app = angular.module("demoapp", ["openlayers-directive"]);
app.controller("DemoController", [ '$scope', function($scope) {
$scope.showDetails = function(id) {
alert('lat: '+ id.lat+', '+'lon: '+id.lon);
};
angular.extend($scope, {
center: {
lat: 42.9515,
lon: -8.6619,
zoom: 9
},
finisterre: {
lat: 42.907800500000000000,
lon: -9.265031499999964000,
label: {
show: false,
},
onClick: function (event, properties) {
alert('lat: '+ properties.lat+', '+'lon: '+properties.lon);
}
},
santiago: {
lat: 42.880596200000010000,
lon: -8.544641200000001000,
label: {
show: true
}
},
santacomba: {
lat: 43.0357404,
lon: -8.8213786,
label: {
message: "Santa Comba",
show: false,
},
onClick: function (event, properties) {
alert('lat: '+ properties.lat+', '+'lon: '+properties.lon);
}
}
});
}]);
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.min.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular-sanitize.min.js"></script>
<script src="https://tombatossals.github.io/angular-openlayers-directive/dist/angular-openlayers-directive.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.min.css" />
<link rel="stylesheet" href="http://tombatossals.github.io/angular-openlayers-directive/dist/angular-openlayers-directive.css" />
<!-- Demo Styles -->
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="DemoController">
<h1>Open Layers Demo</h1>
<p>Click on the <em>map marker</em> for <strong>Fisterra</strong> or <strong>Santa Comba</strong>to see the latitude and longitude.</p>
<p>Click on the map marker <em>popover</em> for <strong>Santiago de Compostela</strong> to see the latitude and longitude.</p>
<openlayers ol-center="center" height="400px" width="100%">
<ol-marker ol-marker-properties="santiago"><p ng-click="showDetails(santiago)">Santiago de Compostela</p></ol-marker>
<ol-marker ol-marker-properties="finisterre" class="hidden"><span></span></ol-marker>
<ol-marker ol-marker-properties="santacomba"></ol-marker>
</openlayers>
</body>
</html>
I am using Intel XDK to try and get the google maps displayed on the screen at the location set in Intel XDK. However, I am having issues with actually displaying the map on the screen, after spending many hours researching trying to figure out why it isn't working I have hit a brick wall and I have no idea how to proceed from here.
So any help will be greatly appreciated to point me in the right direction, thanks in advance.
Index.html class
<!DOCTYPE html>
<html>
<!--
* Please see the included README.md file for license terms and conditions.
-->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->
<style>
100% ; } #viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
#-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } #viewport { user-zoom: fixed ; min-zoom: 100% ; }
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<!-- <script src="lib/mc/hammer.js"></script> -->
<!-- <script src="lib/ft/fastclick.js"></script> -->
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>-->
<script src="https://maps.googleapis.com/maps/api/js?key=MyApiKey&callback=initMap"></script>
<script src="js/app.js"></script>
<script src="js/Maps.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
<script type="application/javascript" src="xdk/ad/jqm_subpage.js"></script>
</head>
<body id="afui" class="v2" onload="navigator.geolocation.getCurrentPosition(onSuccess, onError)">
<!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
<!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
<!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
<div class="upage vertical-col left" id="mainpage" data-role="page"><a class="widget uib_w_2 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="maps" href="#Maps" data-transition="fade">Maps</a>
<a class="widget uib_w_3 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="gps">GPS</a>
</div>
<div class="upage" id="Maps" data-role="page" >
<div class="upage-outer" >
<div class="upage-content ac0 content-area vertical-col left" id="page_70_37"><a class="widget uib_w_4 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button">Button</a>
<div id="map" style="height: 500px; width: 300px; margin: 0; padding: 0;">
</div>
<div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_6" data-uib="jquery_mobile/footer" data-ver="0">
<h1>footer</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"></div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
</div>
<div class="outer-element uib_w_5 uib_crossbar botbar fixed bar-bg thumb-bg bar-gutter" data-uib="layout/bottom_crossbar" data-ver="1" data-anim="{'style':'overlap', 'v':400, 'side':'bottom', 'dur':500}">
<div class="sidebar-content content-area vertical-col">
</div>
</div>
</div>
</body>
</html>
App.js
var latitude;
var longitude;
var onSuccess = function(position) {
alert(
latitude = position.coords.latitude;
longitude = position.coords.longitude;
};
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
var locationOptions = {
maximumAge: 10000,
timeout: 6000,
enableHighAccuracy: true
};
Maps.js
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 16,
center: new google.maps.LatLng(latitude,longitude)//{latitude, longitude}
});
//var marker = new google.maps.marker({position: LatLng, map:map});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
/* // stops the text directions when un commented
var control = document.getElementById('floating-panel');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
*/
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var start = new google.maps.LatLng(latitude,longitude)//{latitude, longitude};
var end = '10 Downing Street, Downing Street, London';
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
Index_User_Scripts
/*jshint browser:true */
/*global $ */(function()
{
"use strict";
/*
hook up event handlers
*/
function register_event_handlers()
{
/* button Button */
$(document).on("click", ".uib_w_1", function(evt)
{
/* your code goes here */
});
/* button #maps */
$(document).on("click", "#maps", function(evt)
{
/*global activate_page */
activate_page("#Maps");
initMap();
//calculateAndDisplayRoute();
});
/* button #gps */
$(document).on("click", "#gps", function(evt)
{
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
}
document.addEventListener("app.Ready", register_event_handlers, false);
})();
You need to have permission to use Google API. I used the Google Maps widget and tried with two locations, Statue of Liberty and Taj Mahal. I was able to make it work in emulator as well as on the Intel XDK Preview apps on my phones. Details are in this post:
http://hodentekmobile.blogspot.com/2016/07/intel-xdk-controls-6-using-google-map.html
Here are the settings I used for the widget:
i got a problem when i try my html.
and when i see on web element i got this error
"Cannot read property 'controller' of undefined"
this is my app.js
angular.module('underscore', [])
.factory('_', function() {
return window._; // assumes underscore has already been loaded on the page
});
// 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'
angular.module('your_app_name', [
'ionic',
'angularMoment',
'your_app_name.controllers',
'your_app_name.directives',
'your_app_name.filters',
'your_app_name.services',
'your_app_name.factories',
'your_app_name.config',
'your_app_name.views',
'underscore',
'ngMap',
'ngResource',
'ngCordova',
'slugifier',
'ionic.contrib.ui.tinderCards',
'youtube-embed'
])
.run(function($ionicPlatform, PushNotificationsService, $rootScope, $ionicConfig, $timeout) {
$ionicPlatform.on("deviceready", 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) {
StatusBar.styleDefault();
}
PushNotificationsService.register();
});
// This fixes transitions for transparent background views
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if(toState.name.indexOf('auth.walkthrough') > -1)
{
// set transitions to android to avoid weird visual effect in the walkthrough transitions
$timeout(function(){
$ionicConfig.views.transition('android');
$ionicConfig.views.swipeBackEnabled(false);
console.log("setting transition to android and disabling swipe back");
}, 0);
}
});
$rootScope.$on("$stateChangeSuccess", function(event, toState, toParams, fromState, fromParams){
if(toState.name.indexOf('app.feeds-categories') > -1)
{
// Restore platform default transition. We are just hardcoding android transitions to auth views.
$ionicConfig.views.transition('platform');
// If it's ios, then enable swipe back again
if(ionic.Platform.isIOS())
{
$ionicConfig.views.swipeBackEnabled(true);
}
console.log("enabling swipe back and restoring transition to platform default", $ionicConfig.views.transition());
}
});
$ionicPlatform.on("resume", function(){
PushNotificationsService.register();
});
})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
.state('head', {
url: "/head",
abstract: true,
templateUrl: "views/app/head.html",
controller: 'HeadCtrl'
})
.state('head.merchantlist', {
url: "/merchantslist",
views: {
'merchantsmenuContent': {
templateUrl: "views/app/merchant/merchantspec-list.html",
controller: "MerchantlistCtrl"
}
}
})
;
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/head/merchantslist');
});
this is my controller.js
angular.module('your_app_name.controllers', [])
.controller('HeadCtrl', function ($scope, $ionicConfig) {
})
.controller('MerchantlistCtrl', function ($scope) {
})
this is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<title></title>
<link href="css/ionic.app.css" rel="stylesheet">
<link href="lib/ionic-contrib-tinder-cards/ionic.tdcards.css" rel="stylesheet">
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/underscore/underscore-min.js"></script>
<script src="lib/ngmap/build/scripts/ng-map.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="lib/moment/min/moment.min.js"></script>
<script src="lib/angular-moment/angular-moment.min.js"></script>
<script src="lib/angular-slugify/dist/angular-slugify.min.js"></script>
<script src="lib/collide/collide.js"></script>
<script src="lib/ionic-contrib-tinder-cards/ionic.tdcards.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="lib/angular-youtube-mb/dist/angular-youtube-embed.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/factories.js"></script>
<script src="js/views.js"></script>
<script src="js/config.js"></script>
</head>
<body ng-app="your_app_name">
<ion-nav-view></ion-nav-view>
</body>
</html>
this is my head.html
<ion-nav-bar class="bar app-top-bar">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-bar>
<ion-nav-view name="merchantsmenuContent"></ion-nav-view>
and this is my merchants
<ion-view class="merchantspec-view">
<ion-nav-title>
<span>Restaurants</span>
</ion-nav-title>
<ion-content>
</ion-content>
</ion-view>
I see the problem.
my <ion-nav-bar> in head.html doesn't have a close
i forgot "/" on second <ion-nav-bar>
I am having trouble loading a google map, while using angular routes with a template. As the code currently stands if i navigate to "#/map" the google map does not show up and inspecting the element, the map information is not there but the template loads as the h1 tag 'Map' does load. However, if I take the code from my map template and put it into my index.html it works perfectly fine. Does anyone know why this is and how to fix it?
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ski</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
</head>
<body ng-app="Ski">
<ng-view></ng-view>
<!-- app and routes -->
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
<!-- controllers -->
<script src="js/controllers/map.controller.js"></script>
</body>
</html>
This is my template for map.
<div>
<h1> Map </h1>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width: 50%; height: 50%;"></div>
</div>
My angular module.
angular.module('Ski', ['ngRoute']);
My angular routes.
angular.module('Ski').config(function($routeProvider) {
'use strict';
$routeProvider
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/map', {
templateUrl: 'templates/map.html'
})
.otherwise({
redirectTo: '/'
});
});
The problem is that when map view is loaded window.load event has already occurred, so this line
google.maps.event.addDomListener(window, 'load', initialize);
won't invoke initialize function, because load event is not going to happen again.
Instead try to move map script into head section:
<head>
<meta charset="utf-8">
<title>Ski</title>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
</head>
and then write simple directive to initialize map in map template:
<div>
<h1>Map</h1>
<map-canvas id="map" style="width: 50%; height: 50%;"></map-canvas>
</div>
The mapCanvas directive will look then something like this:
angular.module('Ski').directive('mapCanvas', function() {
return {
restrict: 'E',
link: function(scope, element) {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
new google.maps.Map(element[0], mapOptions);
}
};
});
Demo: http://plnkr.co/edit/370NBWS3YlTrGBqK7riT?p=preview
I have created an app that uses Google Maps, the map showed up before I did my routing. But after routing it wont display. Here is my code for the app.
JS:
search-controller.js
(function() {
searchController.$inject = ['$scope'];
function searchController($scope) {
$scope.ASiteLocs = [There Is Code In here that is too long and irrelevant to the map];
$scope.SSiteLocs = [""];
$scope.SiteLocs = $scope.SSiteLocs.concat($scope.ASiteLocs);
angular.forEach($scope.SiteLocs, function(location) {
var clength = location.Point.coordinates.length;
if (location.Point.coordinates.substring(clength - 2, clength) === ",0") {
location.Point.coordinates = location.Point.coordinates.substring(0, clength - 2).split(",");
Lat = location.Point.coordinates[0];
Lon = location.Point.coordinates[1];
Com = ",";
location.Point.coordinates = Lon.concat(Com, Lat);
}
angular.forEach($scope.SSiteLocs, function(object) {
object.carrier = 'Sprint';
});
angular.forEach($scope.ASiteLocs, function(object) {
object.carrier = 'AT&T';
});
});
}
angular.module("siteLookUpApplication").controller('searchController', searchController);
}());
map-controller.js
(function() {
mapController.$inject = ['$scope', '$routeParams'];
function mapController($scope, $routeParams) {
function initialize() {
var mapOptions = {
center: site.Point.coordinates,
zoom: 5
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
// Save the locationName in the url to the scope
$scope.locationName = $routeParams.locationName;
}
angular.module("siteLookUpApplication").controller("mapController", mapController);
}());
app.js
(function() {
angular.module("siteLookUpApplication", ["ngRoute"]);
angular.module("siteLookUpApplication").config(function($routeProvider) {
$routeProvider
.when("/search", {
templateUrl: "search.html",
controller: "searchController"
})
.when("/map/:locationName", {
templateUrl: "map.html",
controller: "mapController"
})
.otherwise({
redirectTo: '/search'
});
});
}());
HTML:
map.html
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%
background:#fff;}
</style>
<div>
<div><a ng-href="#/search">Back To Search</a></div>
<p>Map for {{locationName}}</p>
<div id="map-canvs"></div>
</div>
index.html
<!DOCTYPE html>
<html ng-app="siteLookUpApplication">
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type='text/css'/>
<script data-require="angular.js#*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script data-require="google-maps#1.0.0" data-semver="1.0.0" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script data-require="angular-route#*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
<script src="app.js"></script>
<script src="map-controller.js"></script>
<script src="search-controller.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0wdLb9-Os4YVxn_JR2sY08xEN-1aJkMM"></script>
<title>Site ID</title>
</head>
<body link="white" vlink="white">
<div class="text-center">
<h1>Site Finder</h1>
<div id="map-canvas"></div>
<div ng-view></div>
</div>
</body>
</html>
search.html
<div>
<input type="text" ng-model="search" border="1" placeholder="Please enter site name..." />
<table border="1" width="100%">
<thead>
<tr>
<td>Name</td>
<td>Carrier</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="site in SiteLocs | filter : search">
<td>
<a ng-href="#/map/{{site.name}}">
{{site.name}}
</a>
</td>
<td>
{{site.carrier}}
</td>
</tr>
</tbody>
</table>
</div>
Here is a plunk with my project if that is easier: http://plnkr.co/edit/AiVc6nccqke8Jluonpxl?p=info
You have a few problems:
The Google Maps api is loaded twice
Google Maps should be loaded before Angular
jQuery should be loaded before Angular
In the map.html the div id has a typo
In the maps controller "site" is unresolved (for the center property)
map-canvas exists in the index.html (this should be removed)
In the map controller the initialize function is declared but never called
The CSS on the actual map element is a little wonky and will not display -- for testing put a static height on it or something
App Structure notes:
When using document and window you should instead inject $document and $window
Perhaps you can use a directive for the map instead of a controller -- see http://angular-google-maps.org/
The filtered list looks pretty long consider using ReactJS or pagination.
executiveLiveTracking(executive) {
debugger
let isOpenLiveTracking = executive !== undefined ? PreventMapRendering(executive.deliveryExecutiveId, true) : false;
if (isOpenLiveTracking) {
this.setState({
isLengthExceededMap: false,
DeliveryExecutiveId: executive.deliveryExecutiveId,
liveTrackingModalVisible: true,
snapPointList: [],
liveTrackingExecutiveName: executive.executiveName,
liveTrackingExecutiveLat: executive.executiveLatitude,
liveTrackingExecutiveLng: executive.executiveLongitude
});
}
else {
MessageBox(Constants.ERROR_MSG_FOR_MAP_RENDERING, Constants.INFO);
}