Angular js and google maps

Question

I am a newbie in Angular js. So far I have managed to run some tutorial. But here is what I would really like to do. I have a service that gives me latitude and longitude. I would like to get these coordinates from the service and display them on the map. Can someone show me a quick example (could hard code the co-ordinates) on how this can be done? I am currently using Angular's service and controller modules.

Answer 1

I suggest ng-map.

The google maps angularjs directive is called ng-map. This does not require any Javascript coding for simple functionality.

To Get Started

One. Download and include ng-map.js or ng-map.min.js

<script src="dist/ng-map.min.js"></script>`

Two. use map tag, and optionally, control , marker , and shape tags

<map zoom="11" center="[40.74, -74.18]">
  <marker position="[40.74, -74.18]" />
  <shape name="circle" radius="400" center="[40.74,-74.18]" radius="4000" />
  <control name="overviewMap" opened="true" />
</map>`  

Examples

• Hello Map
• Markers
• Controls
• Map Options
• Shapes(Rectangle, Triangle, Image)
• Events

To use it in your app, simply include 'ngMap' as dependency to your app.

var myApp = angular.module('myApp', ['ngMap']);

Hope it helps