Google Maps implementation with angularjs 1.5

Question

I am trying to implement google maps on angular 1.5 The map is rendering but markers are not appearing on the map. The project is using component based angular. I am attaching relevant code herewith. Please suggest.

(function () {
    'use strict';

    angular.module('angularstrapApp')
        .controller('mapController', mapController);

    chaptersController.$inject = ["$scope", "$http", "$window", "$q", "asyncService"];

    function chaptersController($scope, $http, $window, $q, asyncService) {

        var vm = this;

        vm.Heading = "map";
        vm.Text = "This is a sample page.";

        return vm;
      
        }
})();

#map {
    height: 75vh;
 }

 body {
    font: bold 12px Arial;
     }
a {
    text-decoration: none;
  }
 /*#map{
    height:500px; 
    width:500px; 
    box-shadow: 3px 3px 10px gray;
    }*/
#repeat{ 
     display: inline;
     }
#country_container { 
     width: 1000px; 
     margin: 13px 3px 3px 0px; 
     text-align: center; 
     width: 85px; 
     padding: 4px; 
     display: inline-table;  
     color: white; 
     background-color: black; 
     font-size: 12px; 
     cursor: pointer;
     border: 1px solid black; 
     border-radius:13px; 
     }
#country_container:hover { 
     box-shadow: 0px 0px 10px black;
     background-color: gray; 
     border: 1px solid gray; 
     cursor: pointer; 
     }
#names { 
     cursor: pointer; 
       }

<div id = "map"></div>
<div id="repeat" ng-repeat="marker in markers | orderBy : 'title'">
         <a id="country_container" href="#" ng-click="openInfoWindow($event, marker)">
         <label id="names" >{{marker.title}}</label></a>
    </div>

  
    <script>

    	 var cities = [
              {
                  city : 'chicago',
                  lat : 42.578924,
                  long : -88.560553
              },
              {
                  city : 'Arizona',
                  lat : 34.048927,
                  long : -111.093735
              },
              {
                  city : 'Arkansas',
                  lat : 35.489746,
                  long : -93.824272
              },
              {
                  city : 'California',                  
                  lat : 36.778259,
                  long : -119.417931
              }
          ];

       

        function initMap() { 
        var map = new google.maps.Map(document.getElementById('map'), { 
          center: {lat: 42.377254, lng: -87.934657}, 
          zoom:  4
        }); 
               
}


            var markers = [];
              
              var infoWindow = new google.maps.InfoWindow();
              
              var createMarker = function (info){
                  
                  var marker = new google.maps.Marker({
                      map: map,
                      position: new google.maps.LatLng(info.lat, info.long),
                      title: info.city
                  });
                 // marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
                  
                  google.maps.event.addListener(marker, 'click', function(){
                      infoWindow.setContent('<h2>' + marker.title); //+ '</h2>' + marker.content);
                      infoWindow.open(map, marker);
                  });
                  
                  markers.push(marker);
                  
              }  
              
              for (i = 0; i < cities.length; i++){
                  createMarker(cities[i]);
              }

              marker.setMap(marker);

             // $window.initialize = initialize;

              openInfoWindow = function(e, selectedMarker){
                  e.preventDefault();
                  google.maps.event.trigger(selectedMarker, 'click');
              }            


    </script>

     <script src="node_modules/angular/angular.min.js"></script>
     <script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9vaOoEC1FPNIVfHMu0vlinnNhagjLsi4&amp;callback=initMap" async defer></script>

Should be initialized in a directive. Not clear where you call initMap() from. Create a demo in plunker that reproduces problem — charlietfl
– charlietfl, Commented Jul 17, 2016 at 23:56

Gregori · Accepted Answer · 2016-07-18 00:49:46Z

I would recommend using a directive that wraps google map; for instance ngMap. We use it on a large project that is map intensive and it works very well. Here is a plunker based on your code.

angular.module('ngMap').controller('MyCtrl', function() {
    var vm = this;
    vm.cities = [{
        city: 'chicago',
        lat: 42.578924,
        long: -88.560553
    }, {
        city: 'Arizona',
        lat: 34.048927,
        long: -111.093735
    }, {
        city: 'Arkansas',
        lat: 35.489746,
        long: -93.824272
    }, {
        city: 'California',
        lat: 36.778259,
        long: -119.417931
    }];

    vm.showData = function(event, data) {
        alert(data.city);
    }

When one clicks on a marker, the showData function will presents an alert with the name of the city clicked on.

And the HTML"

<div ng-controller="MyCtrl as vm">
    <ng-map zoom="3" center="[42.578924, -88.560553]">
        <marker ng-repeat="p in vm.cities" position="[{{p.lat}}, {{p.long}}]" data="{{p.city}}" on-click="vm.showData(event, p)" ; title="pos: {{p.city}}"></marker>
    </ng-map>
</div>

ngMap documentation offers you to see the examples in plunker which helps a lot.

Collectives™ on Stack Overflow

Google Maps implementation with angularjs 1.5

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