Google maps using angular

Question

Google maps using angular

I want to create a project where I need to integrate google maps api. I need autocomplete, localization and drawing a route on a map. How can I do this with angular, can you recommend me a library for this? Or how to do it using the Google Maps api for javascript. This project is created using yoman-fullstack.

Thanks.

+4

javascript angularjs google-maps google-api yeoman

Dorin Dec 13 '15 at 18:27

source share

2 answers

Angular google. Angular Google Maps - ( angular -ui), CoffeeScript Javascript, Google AngularJS. , .

https://angular-ui.imtqy.com/angular-google-maps/

+2

Georgi Naumov 13 . '15 18:32

AndreaM16 · Accepted Answer · 2015-12-13T18:51:31+0000

First of all, if you want the Google Maps API to work with AngularJS , you have two solutions:

, .

AngularJS, API. AngularJS, .

Index.html:

<html ng-app="myApp"> <!--Your App-->
  <head>
    <title>AngularJS-Google-Maps</title>
    <link rel="stylesheet" href="style.css">
    <script src="../lib/angular.min.js"></script>
    <script src="app.js"></script>

    <!-- You have to look for a Maps Key, you can find it on Google Map            
         Api website if you pay a bit of attention-->
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=
       YourKey&sensor=false">
    </script>

  </head>
  <body>
    <!--Custom directive my-maps, we will get our map in here-->
    <my-maps id="map-canvas"></my-maps>

  </body>
</html>

app.js:

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

//Getting our Maps Element Directive
myApp.directive("myMaps", function(){
    return{
        restrict:'E', //Element Type
        template:'<div></div>', //Defining myApp div
        replace:true, //Allowing replacing
        link: function(scope, element, attributes){

            //Initializing Coordinates
            var myLatLng = new google.maps.LatLng(YourLat,YourLong); 
            var mapOptions = {
                center: myLatLng, //Center of our map based on LatLong Coordinates
                zoom: 5, //How much we want to initialize our zoom in the map
                //Map type, you can check them in APIs documentation
                mapTypeId: google.maps.MapTypeId.ROADMAP 
                };

            //Attaching our features & options to the map
            var map = new google.maps.Map(document.getElementById(attributes.id),
                          mapOptions);
            //Putting a marker on the center
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title:"My town"
            });
            marker.setMap(map); //Setting the marker up
        }   
    };
});

style.css

//Just giving our container Height and Width + A Red border
#map-canvas{
        height: 400px;
        width:  700px;
        border: 2px solid red;
}

, , AngularJS.

Plunk .

API Google -, StackOverflow.

, , .., :

JSFiddle, @Shreerang Patwardhan Polylines ( ).

, myMaps.js Inject App Module. DRY (Do not Repeat Yourself) , , Angular Google Maps. , , Google Maps.

- :

myApp.directive("myMap", function(){ . . . }); //Goes in a Separated File

var myApp = angular.module("myApp",['myMaps']); //Dependency Injection

, .

Google maps using angular

More articles: