Cannot load Google Map through AngularJs

Question

I want to show Google map in my html . here is my code:

html:

    <div class="map-content">
      <div map-marker="" ng-model="searchLocation" class="mapmarker"></div>
    </div>

js:

app.directive('mapMarker',function(){
    return {
        restrict: 'EA',
        require: '?ngModel',
        scope:{
            searchLocation: '=ngModel'
        },
        controller: function ($scope) {
            $scope.searchLocation = {
                latitude: 48.137273,
                longitude: 11.575251
            };
        },
        resolve: {
            load: function () {

            }
        },
        link: function(scope , element, attrs , ngModel){

            var mapOptions;
            var googleMap;
            var searchMarker;
            var searchLatLng;

            ngModel.$render = function(){

                searchLatLng = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.longitude);

                mapOptions = {
                    center: searchLatLng,
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                googleMap = new google.maps.Map(element[0],mapOptions);

                searchMarker = new google.maps.Marker({
                    position: searchLatLng,
                    map: googleMap,
                    draggable: true
                });

                google.maps.event.addListener(searchMarker, 'dragend', function(){

                    scope.$apply(function(){
                        scope.searchLocation.latitude = searchMarker.getPosition().lat();
                        scope.searchLocation.longitude = searchMarker.getPosition().lng();
                    });
                }.bind(this));

            };

            scope.$watch('searchMarker', function(value){
                var myPosition = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.longitude);
                searchMarker.setPosition(myPosition);
            }, true);
        }
    }
});

Also, I include

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

It knows script file but it can't show map on my html. Any suggestion?

What does console say?

Serhii Holinei
– Serhii Holinei

2016-06-19 13:06:45 +00:00
Commented Jun 19, 2016 at 13:06 — Serhii Holinei
– Serhii Holinei, Commented Jun 19, 2016 at 13:06
where do you included the api script?

rick
– rick

2016-06-19 13:25:02 +00:00
Commented Jun 19, 2016 at 13:25 — rick
– rick, Commented Jun 19, 2016 at 13:25

Serhii Holinei · Accepted Answer · 2016-06-19 13:33:50Z

With a little bit of modifications your example works: see my plunkr.

angular
  .module('app', [])
  .directive('mapMarker',function(){
    return {
        restrict: 'EA',
        scope:{
            searchLocation: '=mapMarker'
        },
        controller: function ($scope) {
            $scope.searchLocation = {
                latitude: 48.137273,
                longitude: 11.575251
            };
        },
        link: function(scope , element, attrs , ngModel){
            var mapOptions;
            var googleMap;
            var searchMarker;
            var searchLatLng;

            searchLatLng = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.longitude);

            mapOptions = {
                center: searchLatLng,
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            googleMap = new google.maps.Map(element[0], mapOptions);

            searchMarker = new google.maps.Marker({
                position: searchLatLng,
                map: googleMap,
                draggable: true
            });

            google.maps.event.addListener(searchMarker, 'dragend', function(){
                scope.$apply(function(){
                    scope.searchLocation.latitude = searchMarker.getPosition().lat();
                    scope.searchLocation.longitude = searchMarker.getPosition().lng();
                });
            });

            scope.$watch('searchMarker', function(value){
                var myPosition = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.longitude);
                searchMarker.setPosition(myPosition);
            }, true);
        }
    }
  });

You don't need ngModel. Especially ngModel.$render. It is needed for inputs, which is not your case.
Container for map has to have initial size: width and height.

Collectives™ on Stack Overflow

Cannot load Google Map through AngularJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related