How do I add google map in angular.js controller?
10,206
You could consider to load Google Maps API synchronously as demonstrated below
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
$scope.initialize = function() {
var map = new google.maps.Map(document.getElementById('map_div'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', $scope.initialize);
});
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_div {
height: 480px;
}
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js" ></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div id="map_div"></div>
</div>
Author by
inertia
Updated on June 19, 2022Comments
-
inertia almost 2 years
So, I'm fairly new to angular and having hard time implementing google map API. I keep getting error:
Uncaught InvalidValueError: initialize is not a function.
I have this for the script tag:
<script src="https://maps.googleapis.com/maps/api/js?key=MY API KEY GOES HERE&callback=initialize" async defer></script>
But since my function initialize() is inside my controller, it doesn't recognize it. If I put the function outside of the controller, it does recognize it. But since I have all the data defined within the controller, I need this inside it. I'm not even sure what I'm supposed to ask but I just need to get the map to show up. Any ideas?
-
Vadim Gremyachev almost 7 years@AlexP, via query string, for example:
https://maps.googleapis.com/maps/api/js?key=-YOUR-KEY-GOES-HERE-
-
AlexP almost 7 yearsSo I need to put ` <script src="maps.googleapis.com/maps/api/…> ` into the main page (the one that contains
<div data-ng-view></div>
? Because I have still the same error described here even after implementing your solutin -
Vadim Gremyachev almost 7 years@AlexP, that's right, but without
callback
parameter, in my case google map is getting initialized once the page is loaded:google.maps.event.addDomListener(window, 'load', $scope.initialize);
-
AlexP almost 7 yearsis it possible to refresh manually from Controller and ask to load it when I need it and not on page load? As I still have no effect :(
-
AlexP almost 7 yearsUPD: it appeared only once and doesn't want to reappear after refresh of whole page
-
AlexP almost 7 yearsThanks. I have managed to achieve my goal by assigning new
map
every time I wanted to refresh it.$window.map=map;
. Your comments helped me a lot!