I'm trying to get Angular to work with google maps. Can't seem to get it working! All I get is grey screen.
I get all the LatLng for each dealer and pass to controller from the template. When the user clicks on the relevant link it should display the dealer on the map.
I'm using googles expample but I'm getting TypeError: Cannot read property 'trigger' of undefined.
HTML:
<p><a data-location="{dLat:{{dealer.lat}}, dLng:{{dealer.lng}}, dCode:{{dealer.dealerCode}}}" ng-click="dealerMapInfo(dealer.lat, dealer.lng, dealer.dealerCode, $event)" href="#">Details</a></p>
Map service:
(function(){
'use strict';
angular
.module('osbApp.core')
.factory('mapService', MapService);
function MapService() {
var api = {};
var config = {
language : "en-GB",
countryCode : "GB",
imagePath : "http://www.test.co.uk/dl/mapmarkers/",
countryBounds : [{lng : 2.69, lat : 60.85}, {lng : -9.23, lat : 60.85},{lng : -9.23, lat : 49.84},{lng : 2.69, lat : 49.84}]
};
var mapAPI = new googleMapsApi(config),
map = new mapAPI.map(document.getElementById('myMap'), {
center : {
lat : 54.501911,
lng : -4.100353
},
zoom : 5
});
api.map = map;
return api;
}
})();
Controller (onclick):
$scope.dealerMapInfo = function(latitude, longitude, dealerCode, $event) {
if ($event) {
$event.preventDefault();
}
var dealerLatLng = {
lat: latitude,
lng: longitude
};
$scope.test = dealerLatLng;
$scope.$watch('test', function () {
$timeout(function(){
console.log(dealerLatLng);
mapService.map.event.trigger(mapService.map, 'resize');
mapService.map.setCenter(dealerLatLng);
mapService.map.setZoom(15);
mapService.map.addMarker(dealerLatLng);
},100);
});
};