angular-google-maps, access to regular google maps API

Question

I've been dabbling with the angular implementation of the google maps API and have been struggling to figure out how to access any of the regular API helpers.

My problem originally started as I wanted to center the map programmatic-ally, based on my markers. This is proving to be quite weird, I seem to be missing either something small or I'm misunderstanding how to create a new map using this directive

My understanding is that I need to access the google API via the uiGmapIsReady method:

  uiGmapIsReady.promise()
      .then(function(instances) {
        // simplified for one map
        return instances[0].map;
      })
      .then(function(map) {
        // here is have access to utility functions like like"map.getCenter()" via map
        console.log(map);
    });

The problem is, the above is a separate instance as opposed to my original map object I created and bound to the view. (If that makes sense)

EG. map has access to the helpers, but it isn't bound to the directive, and setting $scope.map = map, _.merge($scope.map, map), or other variants isn't working (/ doesn't feel right, feels hacky)

Controller code:

    //Hide map until ready
    $scope.loadingIsDone = false;
    $scope.markers = [];     

    // map wont work without these "hard-coded" values
    $scope.map = {
      center: {
        latitude: 40,
        longitude: 13.37
      },
      zoom: 10
    };  

    uiGmapIsReady.promise()
      .then(function(instances) {
        return instances[0].map;
      })
      .then(function(map) {

         // id like to set the center and bounds based on markers
         // assuming it must happen here?

         uiGmapGoogleMapApi.then(function(googleMaps) { 

            googleMaps.event.addDomListener(window, "resize", function() {
                var center =  map.getCenter();               
                googleMaps.event.trigger(map, "resize");
                map.setCenter(center); 
            }); 
        });
    });

    // get my data
    uiGmapGoogleMapApi.then(function(maps) {   

        someAPI.logIn.then(function(token) {        
            // supply token to get future request
            someAPI.getOffers(token).then(function(res) {  
                var markers = [];

                //convert data points to markers
                angular.forEach(res.data, function(value, key) {
                    markers.push(coordinate.MakeMarker(value));
                });

                // apply marker collection to scope object, and unhide map
                $scope.markers = markers;
                $scope.loadingIsDone = true;                  
            }); 
        });
    });

View

   <div ng-if="loadingIsDone" class="animate-if map-container">       
       <div id="map_canvas">
           <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" bounds="map.bounds"> 
              <ui-gmap-markers models="markers" coords="'self'" icon="'icon'"> </ui-gmap-markers> 
           </ui-gmap-google-map>
       </div>
  </div>

Summary

How do I create a new map instance the correct way EG... $scope.map =
... to allow access to the normal (Google) API helpers via the bound object
to allow me to set the Center and "bound" coo ordinates

so_jin_ee · Accepted Answer · 2015-06-08 16:50:06Z

1

If you are only trying to update your center, maybe you can use the code in the following jsfiddle, specifically the following:

this.addMarker = function(res) {
    if(this.marker) this.marker.setMap(null);
    this.marker = new google.maps.Marker({
        map: this.map,
        position: res.geometry.location,
        animation: google.maps.Animation.DROP
    });
    this.map.setCenter(res.geometry.location);
}

Link this simply adds a marker and sets the marker's lat/long as its center. Hope this gives you some idea.

answered Jun 8, 2015 at 16:50

so_jin_ee

8126 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular-google-maps, access to regular google maps API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related