From what I gather the below code is the minimum necessary to run Angular Google Maps, but it won't show the map on screen. Looking at #my-map component in Chrome, it shows 0x0px and I haven't been able to change that despite the css and dynamic height declarations. Apart from that it seems to be running fine, there are no console errors and the appMaps module is at least initialized correctly.
<!DOCTYPE html>
html>
<head>
<title>New Map</title>
<style>
html, body {
height: 2000px;
width: 100%;
margin: 0;
padding: 0;
}
.angular-google-map-container { height: 400px; }
</style>
<script src="lodash/lodash.js"></script>
<script src="angular/angular.js"></script>
<script src="angular-google-maps/dist/angular-google-maps.js"></script>
<script>
var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'My Key Is Entered Here',
v: '3.20',
libraries: 'weather,geometry,visualization'
});
});
appMaps.controller('mainCtrl', function($scope) {
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
$scope.$on('$viewContentLoaded', function () {
var mapHeight = 400; // or any other calculated value
$("#my-map .angular-google-map-container").height(mapHeight);
});
});
</script>
</head>
<body>
<h1>TEST</h1>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map id="my-map" center="map.center" zoom="map.zoom"></ui-gmap-google-map>
</div>
</body>
</html>
Edit: Yep, so Roux was correct, added the google maps API script (with key) at the top and angular-simple-logger after angular and that lead me pretty close. Then I just needed to add ng-app="appMaps" to the body element (I'm new to angular in general) and it worked. Thanks!
By following the Quickstart, you can see that you missed to call a few library/api.
Add the angular-simple-logger.js in your project (I think it comes with angular-ui packages or angular-google-maps)
Don't forget to add the google api, without it, nothing will work. <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
Related
I'm new with Mapbox and Leaflet and after checking out the leaflet-directive and Mapbox documentation I can get example maps to work but now when I integrate the two and use the URL I must work with, http://a.tiles.mapbox.com/v3/myMap.map-12341234.html for example.
This should be simple enough however I'm having an issue where the map is white.
my HTML looks like
<leaflet tiles="tiles"defaults="defaults"></leaflet>
and the js
angular.extend($scope, {
// tiles: 'http://a.tiles.mapbox.com/v3/myMap.map-12341234.html',
tiles: 'myMap.map-12341234',
defaults: {
scrollWheelZoom: false
}
});
})
how can I embed a url like my http://a.tiles.mapbox.com/v3/myMap.map-12341234.html
I'm not sure I understand you correctly, Are you just trying to use leaflet with your custom Mapbox style? If that is the case, heres a example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Plain Leaflet API</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
// Replace 'mapbox.streets' with your map id.
var mapboxTiles = L.tileLayer('https://api.mapbox.com/v4/myMap.map-12341234/{z}/{x}/{y}.png?access_token=' + L.mapbox.accessToken, {
attribution: '© Mapbox © OpenStreetMap'
});
var map = L.map('map')
.addLayer(mapboxTiles)
.setView([42.3610, -71.0587], 15);
</script>
</body>
</html>
Hope this helps you out!
I am building an AngularJS app which exposes an OpenLayers map. I used this simple example (literally just copy and pasted into an HTML file) ran it in the browser and - no surprise - it worked.
I then added the AngularJS Wrapping to it so that I could include it in a partial declared and routed to via app.js (below) and the OpenLayers library doesn't seem to be working any more. I am not getting errors in the console (running it on IE11) but I am not getting a visible map either. I have tried substituting the map for some simple data binding in the controller and it's working, and I am getting the sub-heading displayed just above the map too.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.11.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.11.2/build/ol.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
<style>
.map {
height: 400px;
width: 100%;
}
</style>
</head>
<body ng-app="app" ng-controller="MainController">
<h1>Map Viewer</h1>
<div ng-view></div>
</body>
</html>
app.js
angular.module("app", ["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo: "/main"});
});
main.html
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
main.ctrl.js
angular.module("app")
.controller("MainController", function($scope){
//Do something
});
If you consider in using directives check this
Plunker
EDIT
I modified it for a more simple use
angular.module("app")
.controller("MainController", function($scope){
//Do something
})
.directive('mapDir', function () {
return {
restrict: 'A',
link: function ($scope) {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
}
};
});
and view
<h2>My Map</h2>
<div map-dir id="map" class="map"></div>
Tell me if it was this what you are looking for
I would like to implement below google sample inside my angular controller.
https://developers.google.com/maps/documentation/javascript/examples/map-simple
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
Wherein the load of google map api needs a initMap to be followed inside the window scope.
How should I do inside angular controller? Code below does not work:
angular.module('testApp')
.controller('MainCtrl', function ($scope, $window) {
$window.map;
$window.initMap = function() {
$window.map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
});
Add your API key and remove callback=initMap in:
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
Remember to load the maps library at the end of the <body></body> in your html page to make sure all your other libraries are loaded first.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY></script>
Then initialise the map manually calling the initMap function triggering it from somewhere in your code.
Just note that doing in this synchronous way your app will be blocked until the maps library is completely loaded which can slow down your application.
Depending on your inclusion order of the maps library, you can either call it directly like this:
HTML:
<div ng-app="testApp" id="map" ng-controller="MainCtrl"></div>
Javascript:
var app = angular.module('testApp', [])
.controller('MainCtrl', function ($scope, $window) {
$window.map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
});
Demo: http://jsfiddle.net/uxe4b9uu/
Alternatively you can get the maps to initialize on callback as you had suggested provided that you know you have loaded Angular before the map library.
Manipulating DOM from angular controller is not the Angular way of doing things. Depends on your needs, but I suggest you to take a look at Angular Google Maps or Angularjs-Google-Maps AngularJs modules. They both provide set of directives, which you can use in your html code and then access map object exposed on scope in controller to manipulate your map.
I'm having a hard time getting Angular to work inside a Windows Universal App. I'm using Visual Studio 2015.
I'm trying to follow the instructions here: https://github.com/winjs/angular-winjs
In the html head section I have:
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- angular -->
<script src="angular-winjs.js"></script>
When I run the app I get an error in the angular-winjs.js file:
var module = angular.module("winjs", []);
The error is that angular isn't defined.
So this could be something simple, but I'm having a hard time figuring out what the problem is.
The instructions say:
You must also add this module to your list of angular module
dependencies:
angular.module('your-module', ['winjs', 'other-module-you-depend-on', 'etc']);
I have no idea what my "list of angular module dependencies" is.. but since I can't even access angular I don't think that's the (main) problem.
You need WinJS libraries (ui.js, base.js and the style ui-light.css / ui-dark.css), AngularJS libraries (angular.js) and finally angular-winjs library (angular-win.js). In your code you are missing Angular library. That's why angularjs is still undefined.
Needed files to get started with angular-winjs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>
Working sample for you to get started:
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Working sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>
<style>
<!-- You need define yourself the styles for templates -->
.win-listview {
width: 600px;
height: 300px;
border: solid 2px rgba(0, 0, 0, 0.13);
}
.miniTemp {
width: 282px;
height: 70px;
padding: 5px;
overflow: hidden;
display: -ms-grid;
}
</style>
</head>
<body>
<div ng-app="workingsample" ng-controller="ratingCtrl">
<!-- listview -->
<div>Selected count: {{selection.length}}, indexes: {{selection.toString()}}</div>
<win-list-view id="mylistview" item-data-source="ratings" selection="selection" items-reorderable="true">
<win-list-view-header>This is a ListView header</win-list-view-header>
<win-item-template>
<div class="miniTemp">
This list view item's rating is: {{item.data.rating}}
</div>
</win-item-template>
<win-list-layout></win-list-layout>
<win-list-view-footer>This is a ListView footer</win-list-view-footer>
</win-list-view>
</div>
<script>
angular.module("workingsample", ['winjs'])
.controller("ratingCtrl", ['$scope', function ($scope) {
$scope.ratings = [
{ "rating": "Too much" },
{ "rating": "Bigger than yours" },
{ "rating": "Too small yep" },
{ "rating": "Why me" },
{ "rating": "Rekt m9" }
];
$scope.selection = [];
}])
</script>
</body>
</html>
I might be making a really silly mistake here, but I'm not sure where I'm going wrong. Just trying to get a simple map to display on page with google maps and angular.js.
Here is my controller..
var myApp = angular.module('myApplicationModule', ['google-maps']);
myApp.controller('IndexController', ['$scope', function ($scope) {
$scope.map = {
center: {
latitude: 45,
longitude: -73
},
zoom: 8
};
}]);
And here is my html page..
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApplicationModule">
<head>
<title></title>
</head>
<body ng-controller="IndexController">
<google-map center="map.center" zoom="map.zoom"></google-map>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src='/Scripts/lodash.js'></script>
<script src='/Scripts/angular-google-maps.js'></script>
<script src='/Scripts/angular.js'></script>
</body>
</html>
I have included all the necessary scripts and gotten angular.js from NuGet, declared my application and specified the controller.
However, the map is not displaying on the page.. Anybody able to point out why?