Google maps for AngularJS

Question

I am very new to AngularJS and I am trying to use https://github.com/angular-ui/angular-google-maps.

I am just trying to get the map to render on my page but I am getting an error message and I don't know what it means. Any help with understanding this error message would be appreciated.

I've created a plunk here:

github.com/twdean/plunk

Here is the Error in the browser:

Error: [$compile:multidir] Multiple directives [googleMap, markers] asking for new/isolated scope on: <google-map center="center" draggable="true" zoom="zoom" markers="markers" mark-click="true" style="height: 400px"> 

http://errors.angularjs.org/1.2.3/$compile/multidir?p0=googleMap&p1=markers&p2=new%2Fisolated%20scope&p3=%3Cgoogle-map%20center%3D%22center%22%20draggable%3D%22true%22%20zoom%3D%2

Answer 1

I suggest another alternative, ng-map.

I created a google maps angularjs directive called, ng-map, for my own project. 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="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="dist/ng-map.min.js"></script>`

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

<ng-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" />
</ng-map>`  

Examples

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

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

Hope it helps

-------------- EDIT -------------------

For those who looks for angular2 version,
there is also ng2-map https://ng2-ui.github.io/#/google-map