Menu
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.
750
First of all, if you want to get Google Maps API going with AngularJS you have two solutions:
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:
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.
81
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/
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
