Adding multiple Google Maps markers via Autocomplete

Question

I would be glad if someone helped me with the problem I have been having for a while now! I'm trying to create a trip planner using Laravel, AngularJS and Google Maps API. Basically what I'm trying to do is: I have three text-input fields and I want to get the text value and add a marker to that place on google maps(the map is not shown here!), as seen in the picture!

I have this in the index.php should I add something else?

<div id="map-container" ng-controller="mapCtrl" class="map-container col-xs-12 col-sm-7 col-md-8 nopadding">
    <google-map draggable="true"  center="map.center" zoom="map.zoom" options="map.options"></google-map>
</div>

<form ng-submit="submitTrip()" ng-Enter=""> <!-- ng-submit will disable the default form action and use our function -->

<!-- START CITY -->
<div class="form-group col-xs-12">
 <input type="text" class="form-control input-lg" id ="start_city" name="start_city" ng-model="tripData.start_city" googleplace autocomplete="off" placeholder="Travel from" required>
 </div>
 <!-- VIA CITY -->
 <div class="form-group col-xs-12">
  <input type="text" class="form-control input-lg" name="via_city" ng-model="tripData.via_city" googleplace autocomplete="off" placeholder="Travel via" required>
 </div>

 <!-- END CITY -->
 <div class="form-group col-xs-12">
   <input type="text" class="form-control input-lg" name="end_city" ng-model="tripData.end_city" googleplace autocomplete="off" placeholder="Travel to" required>
 </div>
 </form>

This is my angular module I'm working with

    angular.module('tripCtrl', ['ui.router', 'google-maps'])
    .directive('googleplace', function() {

        return {
            require: 'ngModel',
            link: function($scope, element) {
            var autocomplete = new google.maps.places.Autocomplete(element[0]);
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                var map,
                    formatted_address = place.formatted_address,
                    mapDiv = document.getElementById('map-container'),
                    geocoder = new google.maps.Geocoder();
                    latLng = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());

                // Get LatLng information by name
                geocoder.geocode({
                    address: formatted_address,
                    location: latLng
                    }, function(results){
                            map = new google.maps.Map(mapDiv, {
                            // Center map (but check status of geocoder)
                            center: results[0].geometry.location,
                            zoom: 5,
                            mapTypeId: google.maps.MapTypeId.TRANSIT
                        });
                    $scope.addMarker(place); /*Want to add a marker every time we type in something i the text-inputs and save it there*/
                    });
            }),

            $scope.addMarker = function (item) {
                angular.extend($scope, {
                    markers: {
                        store: {
                            lat: item.geometry.location.lat(),
                            lng: item.geometry.location.lng(),
                        }
                    }
                });

            };

            }
        };
    });

As seen in the code I want to create a function called addMarker and call this function every time something is typed in the input field and put out a marker at the locations latitude, longitude and save that marker there until the page is closed.

So the question is how can I put out marker after typing in text in the text field i.e. Oslo, Norway and then put out another marker when typing in the second input "Travel via" and the two markers stay on the map and so on ?

So if someone has a solution please share your knowledge, I would be grateful :)

Answer 1

I found a way to solve my problem, which was to put out multiple markers on google maps via angular and autocomplete om the text inputs.

This is how it looks like now, but I don't know if it is the best..

   .directive('googleplace', function() {
        var markers = [];        
        return {
            require: 'ngModel',
            link: function($scope, element) {

            var autocomplete = new google.maps.places.Autocomplete(element[0]);
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                var map,
                    formatted_address = place.formatted_address,
                    mapDiv = document.getElementById('map-container'),
                    geocoder = new google.maps.Geocoder();
                    latLng = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()),
                    latLngForArray = [place.geometry.location.lat(),place.geometry.location.lng()];
                // Get LatLng information by name
                geocoder.geocode({
                    address: formatted_address,
                    location: latLng
                    }, function(results){
                            map = new google.maps.Map(mapDiv, {
                            // Center map (but check status of geocoder)
                            center: results[0].geometry.location,
                            zoom: 5,
                            mapTypeId: google.maps.MapTypeId.TRANSIT
                        });
                        var posi = setMarker(latLngForArray);
                        var marker, i;
                        for (i = 0; i < posi.length; i++) {  
                            marker = new google.maps.Marker({
                                 position: new google.maps.LatLng(posi[i][0], posi[i][1]),
                                 map: map,
                                 icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png'
                            });
                        }

                    });
            })

            function setMarker(position) {
                markers.push(position); // add marker to array
                return markers;

            };
            }
        };
    });

The biggest change if the function setMarker and the for-loop. Remember that the array just keeps rowing until the page is refreshed!