Angularjs and Google maps API

Question

I have a google map in AngularJS, i'm trying to create markers with a direction (so a line from A to B) for each ng-repeat. This us my HTML

<div class="col-lg-12" ng-repeat="quotes in quotes">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-success pull-right">{{formatDte(quotes.date)}}</span>
                <h5>{{quotes.name}}</h5>
            </div>
            <div class="ibox-content">
                <h1>{{quotes.pnum}}</h1>
                <p>{{quotes.pcodefrom}} to {{quotes.pcodeto}}</p>

                <small>Reg : {{quotes.Reg}}</small>
                <br/>
                <small>Notes : {{quotes.notes}}</small>

    <div class="row">
        <div class="col-md-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <section id="map" ng-controller="GoogleMaps">
                        <div ui-map="myMap" ui-options="mapOptions" class="google-map"></div>
                    </section>
                </div>
            </div>
        </div>

    </div>
        </div>
            </div>
        </div>

This is my code in my controller :

function quoteCtrl ($scope,$http,refnum,$state,$uibModal,notify) {

    $scope.mapOptions = {
        zoom: 11,
        center: new google.maps.LatLng(40.6700, -73.9400),
        // Style for Google Maps
        styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}],
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

                   var urlgetjobs = './dbscripts/getQuotes.php';

                    $http({method: 'GET', url: urlgetjobs}).success(function(data) {
                       $scope.quotes = data;
                    }).error(function(data){

                    });

                    $scope.formatDte=function(dte){
                         var  dtee = moment(dte).format("dddd Do MMMM, h:mm a");
                         return dtee;
                    }

    }

I have looked at different angular projects but everything i try the map doesn't show up, could someone please assist me with implimenting into my simple code so i can just send 2 addresses or postcodes to a function in the ng-repeat and the map will display the route rather than a just static map as it is?

Thanks

Any specific error are you getting it in browser console?

Pramod Patil
– Pramod Patil

2017-04-05 13:57:14 +00:00
Commented Apr 5, 2017 at 13:57 — Pramod Patil
– Pramod Patil, Commented Apr 5, 2017 at 13:57
No the map works just wondering how to add a route

Gaz Smith
– Gaz Smith

2017-04-05 14:05:28 +00:00
Commented Apr 5, 2017 at 14:05 — Gaz Smith
– Gaz Smith, Commented Apr 5, 2017 at 14:05

Neeraj Khandelwal · Accepted Answer · 2017-04-05 14:08:45Z

1

You can try using ngMap. We have used it in our project. Working fine for us.

Refernce link : https://ngmap.github.io/

https://github.com/allenhwkim/angularjs-google-maps

In Controller: You can instantiate a map instance using NgMap service:

NgMap.getMap().then(function (map) {
    $scope.map = map;
});

In Html: Here i am getting a list of organizations and we can use ng-repeat on <maker> tag and to distinguish between markers we can assign id's to the markers dynamically :

<ng-map default-style="false" id="map" center="current-position" zoom="12" style="height:550px;width:100%;">
    <marker ng-repeat="org in orgList" id="id_{{org.organizationLocationAddressId}}" position="{{org.location}}" on-click="selectOrg(org)" on-mouseover="showDetails(org)" on-mouseout="hideDetail()" draggable="{{org.isDraggable}}" on-dragend="changeLocation($event)" on-position-changed="getMarkerPosition()" icon="{{org.organizationLocationId ==  selectedId?iconsList.SELECTED_ICONS[org.organizationTypeIconsEnum]:org.organizationTypeIcon}}"></marker>
</ng-map>

answered Apr 5, 2017 at 14:08

Neeraj Khandelwal

414 bronze badges

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

2 Comments

Gaz Smith Over a year ago

I added the JS file and it says NgMap is not defined, also <ng-map center="[40.74, -74.18]"></ng-map> doesn't show anything either

Neeraj Khandelwal Over a year ago

You need to inject ngMap module while declaring your module, and also inject NgMap service in your controller.

Collectives™ on Stack Overflow

Angularjs and Google maps API

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related