Google maps with angular [closed]

I want to make a project where I need to integrate google maps api. I need autocomplete, localization and to draw a route on the map. How can I do this with angular, can you recommand me a library for this? Or how can I make this with google maps api for javascript. This project is generated using yeoman-fullstack.

Thanks.

回答1:

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

Using Google Maps APIs from Scratch
Using Angular-Google-Maps

I'm going to show you how to make it easy from scratch.

This is an example of an easy AngularJS application who's intended, only, to learn using such APIs. I've made this little AngularJS exercise in order to use it in bigger applications.

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's 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;
}

That's just a really basic way to get it started, I didn't even use a controller, even if you really should use them in AngularJS.

This is a working Plunk I put up with this code.

You can play with Google Maps API's in many different ways, just look at the documentation or here on StackOverflow.

Now, if you want to manage routes between 2 locations, markers, etc, you should look at:

Google Maps APIs Documentation
This answer by @geocodezip
This answer by @Gurpreet Singh
This answer by @zeeshan0026

And, at the end, you can check this working JSFiddle made by @Shreerang Patwardhan using Polylines (Your long wanted routes).

For future implementations, ensure to put your myMaps.js directive in a separated file and Inject it has a Dependency in your App Module In order to get DRY (Don't Repeat Yourself) and Maintainable applications using the same working directive as starter point for your Angular application involving Google Maps. For instance, you'll be able to just change your coordinates or adding some new map's option to kickstart future applications that require Google Maps.

You should get something like:

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

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

I hope I've been helpful.

回答2:

You can use Angular google maps. Angular Google Maps is a set of directives (part of angular-ui) written in CoffeeScript and Javascript which integrate Google Maps in an AngularJS applications. Of course there are many other directives for this purpose.

https://angular-ui.github.io/angular-google-maps/