CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsangular-google-maps
user4550050
user4550050

Reputation: 621

Angular Google Maps- how to add direction to the map

I'm developing a web application with angularjs.

I want to present a google map with markers and directions. For the marker it's easy because we have the "ui-gmap-marker" directive. The problem is that I don't find any directive for the "directions".

How can add directions between my markers?

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" bounds="map.bounds" events="map.events">
<ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl" events="eventHandler">
<div ng-repeat="marker in markers track by $index">
    <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.markerFirebaseKey">
        <ui-gmap-window options="marker.window.options">
        <div>
            <div class="blue large">{{marker.title}}</div>
            <div class="orange medium">{{marker.description}}</div>
        </div>
        </ui-gmap-window>
    </ui-gmap-marker>
</div><!-- end of marker -->
</ui-gmap-drawing-manager>
</ui-gmap-google-map>

Upvotes: 1

Views: 3330

Answers (1)

Namal
Namal

Reputation: 2071

I tried ui-gmap-google-map for directions. But currently there is not available the feature currently.

But you can use this library which is included every features. http://ngmap.github.io

Here is the marker directive. http://ngmap.github.io/#/!marker-simple.html

    <ng-map center="-25.363882,131.044922" zoom="4">
         <marker position="-25.363882,131.044922" title="Hello World!">   </marker>
    </ng-map>

Here is the directions directive. http://ngmap.github.io/#/!directions.html

<ng-map zoom="14" center="37.7699298, -122.4469157" style="height:90%" on-click="logLatLng()" >
        <directions 
          draggable="true"
          panel="directions-panel"
          travel-mode="{{travelMode}}"
          waypoints="{{wayPoints}}"
          origin="{{origin}}"
          destination="{{destination}}">
        </directions>
      </ng-map>

Upvotes: 1

Related Questions