0

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);

        });


    };

1 Answer 1

1

In your code change this line mapService.map.event.trigger(mapService.map, 'resize'); with the below line.

google.map.event.trigger(mapService.map, 'resize');

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.