javascript - example - Google maps con angular
google maps markers icons (2)
Puedes usar Angular google maps. Angular Google Maps es un conjunto de directivas (parte de angular-ui) escritas en CoffeeScript y Javascript que integran Google Maps en una aplicación AngularJS. Por supuesto, hay muchas otras directivas para este propósito.
Quiero hacer un proyecto donde necesito integrar google maps api. Necesito autocompletar, localización y dibujar una ruta en el mapa. ¿Cómo puedo hacer esto con angular? ¿Me pueden recomendar una biblioteca para esto? O cómo puedo hacer esto con google maps api para javascript. Este proyecto se genera usando yeoman-fullstack.
Gracias.
En primer lugar, si quiere que la API de Google Maps funcione con AngularJS , tiene dos soluciones:
- Usar las API de Google Maps desde cero
- Uso de Angular-Google-Maps
Voy a mostrarte cómo hacerlo más fácil desde cero.
Este es un ejemplo de una aplicación sencilla de AngularJS cuya única intención es aprender a utilizar dichas API. He hecho este pequeño ejercicio AngularJS para usarlo en aplicaciones más grandes.
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;
}
Esa es solo una manera muy básica de comenzar, ni siquiera usé un controlador, incluso si realmente los usaras en AngularJS.
Este es un Plunk funcional que presento con este código.
Puedes jugar con la API de Google Maps de muchas maneras diferentes, solo mira la documentación o aquí en .
Ahora, si desea administrar rutas entre 2 ubicaciones, marcadores, etc., debe ver:
- Documentación de las API de Google Maps
- Esta respuesta por @geocodezip
- Esta respuesta de @Gurpreet Singh
- Esta respuesta por @ zeeshan0026
Y, al final, puede verificar este JSFiddle de trabajo hecho por @Shreerang Patwardhan usando Polylines (Sus rutas deseadas largas).
Para futuras implementaciones, asegúrese de poner su directiva myMaps.js en un archivo separado e Inject tiene una Dependencia en su Módulo de Aplicación. Para obtener aplicaciones DRY (No repetir) y Maintainable usando la misma directiva de trabajo como punto de inicio para su aplicación angular que implica Google Maps. Por ejemplo, podrá cambiar sus coordenadas o agregar la opción de un nuevo mapa para iniciar aplicaciones futuras que requieran Google Maps.
Deberías obtener algo como:
myApp.directive("myMap", function(){ . . . }); //Goes in a Separated File
var myApp = angular.module("myApp",[''myMaps'']); //Dependency Injection
Espero haber sido útil.