primera vez que empleare AngularJS con la Api de Google Maps, la cuestión es que use una .directive para poder mostrar el mapa de google.
app.directive("myMaps",function(){
return{
restrict:'E',
template:'<div></div>',
replace:true,
scope: {
lat: '=',
long: '='
},
link: function(scope, element, attrs) {
var myLatLng = new google.maps.LatLng(scope.lat,scope.long);
var mapOptions = {
center: myLatLng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById(attrs.id),
mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title:"Posicion"
});
marker.setMap(map);
}
};
});
El problema es lo siguiente, estoy empleando una tabla que muestra varios centros en un datatable, y con un botón "localización" mostrar un modal que muestre la ubicación del centro gracias a las coordenadas que se solicitan y envía la respectiva función del controller. Asi estoy utilizando la directiva y coger la latitud y longitud del centro.
<div class="modal-body">
<p>{{ centro.razon }}</p> <br>
<p>{{ centro.latitud }}, {{ centro.longitud }}</p>
<my-maps id="map-canvas" lat= "centro.latitud" long= "centro.longitud"></my-maps></div>
Lamentablemente, no me logra mostrar cuando envío las coordenadas de esa manera, solo aparece cuando pongo coordenadas por defecto.
Quisiera saber en que parte me estoy confundiendo, ya que esa directiva si funciona cuando por ejemplo escribo lat = -5.53268 long = -78.43484, el cuadro normal sale el mapa. Pero con lo que mando me sale así gris :/