ANGULARJS WITH GOOGLE MAPS

Question

ANGULARJS WITH GOOGLE MAPS

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

The first time I use AngularJS with the Google Maps API, the point is to use a .directive to show the google map.

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);

    }
};
});

The problem is the following, I am using a table that shows several centers in a datatable, and with a "location" button to show a modal that shows the location of the center thanks to the coordinates that are requested and sends the respective function of the controller So I'm using the directive and take the latitude and longitude of the center.

<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>

Unfortunately, I can not show when I send the coordinates in that way, it only appears when I put default coordinates.

I would like to know in which part I am confused, since that directive works if, for example, I type lat = -5.53268 long = -78.43484, the normal table shows the map. But with what I send I get this gray: /

json ajax angularjs google-maps

asked by Oscar Trinidad 19.12.2018 в 21:08

source

2 answers

like asking for a list in prolog Perform search by date in a bd on asp.net

score 1 · Answer 1

First of all, excuse me for my Spanish.

I saw this problem a few times and the reason is that your modal Bootstrap exists in the DOM before it appears to the user. Then, the "myMaps" directive is not visible and does not take up space when the user presses the buton and the Google Maps library skips the map representation process.

The best solution is the following:

Since your $ ('# modal'). show () is inside your controller, You need to issue an event up to your directive. Put that in your controller, then your $ ('# modal'). Show () .

$('#modal').on('shown', function() {
     $scope.$broadcast('modalReady', function () {
          // No necesita nada aquí..
     });
});

Finally, you should listen for the modalReady event in your policy and update the map dimension.

$scope.$on('modalReady', function() {
    google.maps.event.trigger(map, 'resize');
});

I have not tried the code but I'm sure it works.

score 1 · Answer 2

Add the style you require to show the map, try this in your css:

#idDelDivDondeEstaTuMapa{
    height: 100%;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

Here the official documentation . I hope it works for you, regards.