googlemap-multiple markers

by John Wick

HTML

<script src="http://maps.googleapis.com/maps/api/js?key=&amp;sensor=false&amp;extension=.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.0.12/angular-google-maps.min.js"></script>
<div ng-app="main" ng-controller="mainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events">
        <ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id"></ui-gmap-marker>
        
<ui-gmap-search-box events="map.placesChangedEvent">
<input class="map-search form-control" type="text" placeholder="Search for places" prevent-submit>
</ui-gmap-search-box>        
    </ui-gmap-google-map>
</div>

CSS

.angular-google-map-container { height: 400px; }

JavaScript

angular.module('main', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function ($scope) {

    angular.extend($scope, {
        map: {
            center: {
                latitude: 42.3349940452867,
                longitude:-71.0353168884369
            },
            zoom: 11,
            markers: [],
            events: {
            click: function (map, eventName, originalEventArgs) {
                var e = originalEventArgs[0];
                var lat = e.latLng.lat(),lon = e.latLng.lng();
                var marker = {
                    id: Date.now(),
                    coords: {
                        latitude: lat,
                        longitude: lon
                    }
                };
                $scope.map.markers.push(marker);
                console.log($scope.map.markers);
                $scope.$apply();
            }
        },
            placesChangedEvent: {
              'places_changed': function(event) {
                var places = event.getPlaces();
                if (places.length == 0) {
                  return;
                }
                var location = places[0].geometry.location;
                $scope.$apply(function() {
                  var lat = location.lat();
                  var lon = location.lng();
                  console.log('\nplaces_changed ') 
                  console.log('lat:', lat);
                  console.log('lon:', lon);
                  $scope.map.center.latitude = lat;
                  $scope.map.center.longitude = lon;

                  var marker = {
                    id: 0,
                    coords: {
                        latitude: lat,
                        longitude: lon
                    }
                  };
                  $scope.data.lat = lat;
                  $scope.data.lon = lon;                       
                  //$scope.map.deleteMarkers();
                  $scope.map.markers.push(marker);
                });

              }
            } ...