dylanfprice / angular-gm Goto Github PK

Is there a plan to create a directive used for map popups?
see uiMapMarker in https://github.com/angular-ui/ui-map/blob/master/ui-map.js
(pretty doc @ http://angular-ui.github.io/ui-map/)

After updating to the latest build (1.0) I have noticed that ng-clicks on the info window have stopped working.

I have modified the info window example fiddler to include an ng-click as follows:

Any ideas or thoughts would be helpful.

Thanks,
Gregory

Hello! When changing the marker coordinates to the event as it moved?
How to change center map and zoom map?
I do not understand how to use and where to call
$scope.$broadcast ('gmMarkersRedraw', 'myObjects')

http://jsfiddle.net/qSVZ4/3/

I need focus on a bookmark on map from another controller. Is there any way to do this?
Thanks in advance.

I am using ng-show ,when the user clicks on the map button the map must be shown but i get only half of the map rendered

Is there plans to implement support for the infoBox alternative that allows greater freedom in styling?

I tried bundling this in a PhoneGap app, but offline the Google Maps library isn't available. This causes angular-gm to crash the entire angular application.

Error: [$injector:unpr] Unknown provider: angulargmContainerProvider <- angulargmContainer
at hasOwnPropertyFn (file:///Users/bram/Documents/Phonegap/bpost/www/lib/angularjs/angular.js:60:12)
at file:///Users/bram/Documents/Phonegap/bpost/www/lib/angularjs/angular.js:2964:19
at Object.getService as get
at file:///Users/bram/Documents/Phonegap/bpost/www/lib/angularjs/angular.js:2969:45
at getService (file:///Users/bram/Documents/Phonegap/bpost/www/lib/angularjs/angular.js:3086:39)
at invoke (file:///Users/bram/Documents/Phonegap/bpost/www/lib/angularjs/angular.js:3107:13)
at Object.instantiate (file:///Users/bram/Documents/Phonegap/bpost/www/lib/angularjs/angular.js:3141:23)
at $get (file:///Users/bram/Documents/Phonegap/bpost/www/lib/angularjs/angular.js:5554:28)
at update (file:///Users/bram/Documents/Phonegap/bpost/www/lib/angularjs/angular-route.js:831:32)
at Object.$get.Scope.$broadcast (file:///Users/bram/Documents/Phonegap/bpost/www/lib/angularjs/angular.js:10207:28)

How can i use infobox with angular-gm?

i have a list of latitude longitude now i need to set bounds how do i exactly do it i tried gm-bounds, it does not get set and i need to set the center of this bounds any help will be appreciated

I have make a bounds of type google.map.LatLngBounds using all markers shown in my map (using the extend method). I see that the bounds object is correct, it contains the maxima and minima of my markers coordinates.

I feed the data to options.map.bounds (options.map.bounds = getBounds(); getBounds is a function that returns bounds based on all marker). But the map will not fit the view to my markers. Any other way in angular-gm to fit view based on markers shown in map?

I want to position a marker on top of another programatically. I can't seem to find a way to do that with the current marker option the framework provides. I understand there some be a setZIndex in Google Maps API ?

Is there an elegant way to convert the map to an image or PDF? Maybe by exporting angular-gm options to a data structure that google's static map can parse?

i have a service called for geo coding i get the latitude longitude from the service ,how do i instantly drop this marker on the map without any page refresh or reload

Is there any way i can draw a circular polygon on the map?

Hi,
Is there a way to draw path between markers?
I think this is possible in google map api with directions.
Best,

I'm trying to implement custom map styles, however how can I access the map from the scope? I'm having trouble finding the name of the var that contains the map.

I need to do this:

var div = document.getElementById('surabaya');  
    var map = new google.maps.Map(div, options);  
    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });  
    map.mapTypes.set('Styled', styledMapType);

In angularGM the 'map' variable is set automagically by AngularGM and we give it a map id with

 gm-map-id="'infoWindows'"

So where is infoWindows in the $scope now? Can I access it to do something like:

 infoWindows.mapTypes.set('Styled', styledMapType);

I'm having much difficulty dynamically setting the center and zoom level based on a list of lats/longs. I can't find a good example of this using AngularGM, and being such a noob with Google Maps I could definitely use some help.

I also see that there are similar questions asked here - about gm-bounds and fitBounds - but none of these have any example code.

The map's controller code:

var lats = [], longs = [], latlng = [];

// get list of lats/longs
for (i = 0; i < $scope.markersProperty.length; i++) {
    lats[i] = $scope.markersProperty[i].latitude;
    longs[i] = $scope.markersProperty[i].longitude;
    latlng.push(new google.maps.LatLng(lats[i], longs[i]));
}

$scope.bounds = new google.maps.LatLngBounds();

for (var i = 0, i < latlng.length; i++) {
    $scope.bounds.extend(latlng[i]);
}

$scope.options = {
    map: {
        center: $scope.bounds.getCenter(), // this seems to work
        //zoom: 10, // how to set this dynamically based on bounds?
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
};

The 'center' setting seems to work.

• if the list of lats/longs contains sevearl markers in, say, San Francisco, all markers can be seen;
• if this same list of lats/longs contains one additional marker in Los Angeles, the center (correctly) is between SF and LA, but the zoom is not set so that all markers can be seen.

Any help with setting the zoom (and center, if I'm doing it incorrectly here) would be greatly appreciated.

i have written

but the marker never animates what am i missing ,
2) the other problem i am facing is sometime on the refresh all the marker disappear and that time i need to refresh some 2-3 times to get the markers.
3)i need to add bounds all my latitude and longitude is coming from the json file how do i set bounds in such situation and i need to update the center of the map .

what i am missing please help

If inside the body of the infoWindow I have something like

<a ng-click="show()">Click</a>

when I open the 2nd or 3rd etc infowindow and click the <a> the show() is called multiple times.

Hi, thanx for this great module! I use a lot of maps (around 54) in an accordion. The code that I use is:

<gm-map gm-map-id="location.identifier" gm-center="center" 
        gm-zoom="zoom" gm-map-options="mapOptions.map" gm-bounds="bounds" 
        gm-map-type-id="mapTypeId" class="inner_map">
</gm-map>

Loading in version 0.3.0 is a little bit faster than 0.2.0 which I have noticed this morning. But loading takes its time (15-20sec.) and I wonder if I can accelerate it by maybe one hidden map which is in the background an is referenced and shown in every specific location. This would be sufficient, too.

What I have noticed when I skim through the generated HTML-code is, that the 'gm-map-id' doesn't gets replaced by the corresponding ID. The resulting code is:

<div gm-map-id="location.emonsIdentifier" gm-center="center" ...

Is this desired?

breaking closure compilation

HI i have the following code in my infowindow.

`

Now the issue is when i open infoWindow for the first time myFunc() is called normally .But when i close the infowindow and open it again , myfunc() is called two times for every single click on View description link. When this is repeated n times ,myFunc() is called n times for subsequent single clicks . I don't understand what's the issue. Anybody faced similar problem?

Hi @dylanfprice

Next to your memory leak fix, I worked with angular-gm on a project :)

I saw that a reused map didn't "reset" the center and zoom, I tried to fix it by adding those two lines in angulargmMapController.js (next the line 131) :

map.setCenter(config.center);
map.setZoom(config.zoom);

Strangely, the above setZoom doesn't work while setCenter is ok. After digging, I saw that gmMapResize neither works with a reused map. The issue comes from angulargmMapController.js, here is the breaking line :

google.maps.event.clearInstanceListeners(this._map);

I guess it's better to use 'clearListeners' method for each event that needs to be cleared, so it won't break some core functions, what do you think ?

I also have another suggestion, on my project the map has a "full screen" button, on click I modify the container position, and I $broadcast the gmMapResize event.I needed to re-center the map and update some parameters, so I added this two event listeners the same way you did :

scope.$on('gmMapResetCenter', function(event, gmMapId) {
  controller.getMap(scope.gmMapId()).setCenter(scope.gmCenter);
});

scope.$on('gmMapSet', function(event, gmMapId, param, value) {
  if (scope.gmMapId() === gmMapId) {
    controller.getMap(scope.gmMapId()).set(param, value);
  }
});

Hi is there a way to add richmarker as directive
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/examples/richmarker.html ?
Currently I use $interpolate service to create template and add html , but it needs to be updated every time I want to update content only.

Currently there doesn't seem to be any way to track most of the map events, such as clicking on the map, map idling, drag_end, etc.

It seems the only map events currently tracked are:

      controller.addMapListener('drag', updateScope);
      controller.addMapListener('zoom_changed', updateScope);
      controller.addMapListener('center_changed', updateScope);
      controller.addMapListener('bounds_changed', updateScope);
      controller.addMapListener('maptypeid_changed', updateScope);
      controller.addMapListener('resize', updateScope);

I'm wondering, are there any plans to add in this functionality?

I've added in the ability to watch these on the version I'm using, and I could clean up the changes I've made and submit a PR, I just don't want to duplicate any work someone is currently doing, or submit an unwanted PR.

Hello,

I am unable to re-create map, after getting the gelocation of user, with new Lat and Long.
I searched but did not see any way to work with geolocation.

Thanks
Gaurav

Hi,

I work on an one page application built on Angular and it uses a lot of maps.

My issue is that every time I instantiate a new map it will consume some memory that won't be released.

I measured the following with Chrome Web Inspector's Timeline: loading a map 100 times made the memory grow from 23MB to 160MB.

The issue is not directly related the angular-gm, but I don't see Google fixing that any time soon. The only fix I imagine is to instantiate a map and reuse it, it means that we need to be able to "rescue" it before Angular destroys the DOM, then "reset" and re-inject it later when another map is called.

Does anybody has that memory issue ?

Hey,

To cut the story short, I have to display several maps on a single page, each of them having different bounds coord, according to the data sent from the backend.

When I update my bounds, there are set correctly in my controller and then sent to the directives but sadly, are overwritten by the gmBounds watcher and therefore the updateScope function. This sets the same bounds to all the maps.

FYI, when removing the maps from the loop, it works like a charm.

I'll take a look later on, more deeply into that but if you have something in mind, let's work on that together.

Regards,

Louis

Is there a way to get the google.map object?

First off, great module, but I am having an issue with IE8. I am using the es5.js Pollyfill to get angular-gm working in IE8, but for some reason the 2-way data binding for gm-bounds, gm-center, gm-zoom, etc. does not work so I cannot dynamically zoom or center. I'm not getting any errors and it works fine in IE9-11. I'm still investigating, but has anyone else encountered this or have any suggestions? I am using angular-gm with AngularJS v1.2.0-rc.2. Thanks!

Hi i am having trouble in setting the bounds, to cut short things heres the code snippet

//HTML Markup




//Controller
$scope.bounds = new google.maps.LatLngBounds();
var myLatLng=new google.maps.LatLng(elements.practice.latitude,elements.practice.longitude)

$scope.bounds.extend(myLatLng);

//and i need to set the center from this
$scope.bounds.getCenter();

$scope.center=$scope.bounds.getCenter();

for some reason its taking the default values.

i need to do something like this
map.fitBounds(bounds);
map.setCenter(bounds.getCenter());
how do i acheive this

Please help !!

Hello!

I recently found out that angular-gm map doesn't show markers if they are very close to each other (<20m), instead it shows only last one. After looking to code I found out why that happens: one marker hash overwrites another marker hash.

For example, hash for markers
(46.4296566871034, 30.7290279865265) and (46.4297768523488,30.729111135006) would be the same because of precision using for generating it.

src/directives/gmMarkers.js line 161

         var hash = position.toUrlValue(controller.precision);

Where controller.precision is a constant = 3 in
controllers/angulargmMapController.js line 27

         consts.precision = 3;
....
....
 Object.defineProperties(this, {
        'precision': {
          value: consts.precision,
          writeable: false
        },

Could it be changed so precision property would be set from config instead of consts?

Thanks!

First of all: Thank you very much for this plugin! It works great and the docs are awesome. So far all my needs were satisfied.

I've got one problem that I can't solve: How can I open an infoWindow at a certain marker position from a button (click) that is located next to the map.

Here is my usecase:
I've got a list (ul>li) with my objects next to my map. On my map I've got the markers representing the location of my objects. I'd like to open the corresponding infoWindow when I click on an object inside my list (ul>li). I can open the infoWindow when I click on a marker, that works fine.

I probably comes down to the question how I can access the marker object outside of the gm-markers directive.

Thank you!

Hi guys,

I am currently using angular-google-maps directive, but I am considering using angular-gm because I am encountering some memory leaks. But I am wondering why is jquery required?

Thanks

Hi there,
I'm experiencing a strange issue with markers, after the '$scope.$broadcast('gmMarkersRedraw');' some of them disappear.
I followed your example and make a .run(function(angulargmContainer) ....) , that contain a search box and a 'google.maps.event.addListener', this listener send the new bounds to a service every time the user zoom or make a search, the service then make a query to the database and ask for data inside the new boundaries. The data are collected properly, I can see and check them in a data grid, but not all the markers are rendered in the map. After being rendered one time they disappear on a new zoom.
Do you have any idea what could cause this issue? Thx in advance

Love this module, thanks a bunch for maintaining it!

One thing I'm currently struggling with is closing an infoWindow only when needed but not always.

Let me explain:

1. I have multiple markers, each marker object has a "type" property which is used for filtering map markers.
2. I have a list of the available marker types and upon clicking on I set all the non-matched markers to { visible: false } to hide them thus only leaving the ones with matching type property on the map.

Now what I would like to do is this: When I filter the markers, say "Show all Cafés" and I currently have an infoWindow open on a Café that would remain visible I do not want to close its infoWindow.

If I have an infoWindow open on a Supermarket however, that infoWindow should be closed as its marker gets hidden.

What I'm struggling with is the conditional removal/hiding of the infoWindow.

I've basically followed the instructions from #20 to set up a custom event which then fires infoWindow.close() however this closes all infoWindows regardless of the locations array I pass in (which filters out the one I want to leave open).

Any ideas on how to only remove an infoWindow matching the location passed into the locations property when triggering a markerEvent would be much appreciated.

Code samples below:

Markers

<gm-markers
  gm-objects="map.markers"
  gm-get-lat-lng="{ lat: object.location.lat, lng: object.location.lng }"
  gm-get-marker-options="getMarkers(object)"
  gm-events="map.markerEvents"
  gm-on-click="mapSelection = object; infoWindow.open(marker.map, marker);"
  gm-on-closeinfo="mapSelection = null; infoWindow.close();"
></gm-markers>

Filter List

<ul class="nav--map">
  <li class="nav__item" ng-repeat="item in map.types">

    <a ng-class="{ active: map.selectedType == item.type }"
       ng-click="updateFilter( item.type, $event )"
       href="#" class="nav__link">

        <i class="typcn-{{ item.iconClass }}"></i>

    </a>

  </li>
</ul>

Marker Event related JS functions

/**
 * Sets the $scope.map.selectedType variable.
 * This in response triggers the $watch below.
 *
 * @param  {string} val The type of the marker.
 * @param  {bject}  e   The event object of the click handler.
 */
$scope.updateFilter = function( val, e ) {
  e.preventDefault();
  $scope.map.selectedType = ( $scope.map.selectedType === val ? null : val );
};

/**
 * Closes any open infoBoxes.
 *
 * @param  {object} markers The original marker array.
 */
$scope.closeOverlay = function( markers ) {
  // Loop through all markers and generate a map coordinates array.
  var locations = [];

  angular.forEach( markers, function(marker) {
    // Only add marker location for markers that do not match our current
    // $scope.map.selectedType filter value.
    if ( $scope.map.selectedType !== marker.type ) {
      this.push( angulargmUtils.objToLatLng( marker.location ) );
    }
  }, locations);

  // NOTE: At this stage, locations correctly only
  // has 2 coords (out of 3 markers) in its array.

  // Trigger Events on all markers matching the coordinates in `locations`.
  $scope.map.markerEvents = [
    {
      event: 'closeinfo',
      locations: locations
    }
  ];
};

/**
 * Watches the $scope.map.selectedType for changes and in response triggers
 * a redraw of the Google Map markers.
 */
$scope.$watch('map.selectedType', function(nu, old) {
  if ( nu !== old ) {
    // Close open infoWindows
    $scope.closeOverlay( $scope.map.markers );
    // Redraw Map Markers
    $scope.$broadcast('gmMarkersRedraw', 'map.markers');
  }
});

Hello I want to know if is there ani option to refresh the map ? For example when is my map hidden and then shown I need to redraw the map because it renders wrong (dont see all the map, half map is gray). Thanks a lot.

Hi, it seems that loading the google maps blocks our Angular App even though the user is not looking to use the app. So I would like to know is it possible to asynchronously load the google map?

I have created a Plunker at http://plnkr.co/edit/eGa4A7TcV1QAq0ZzO3Xs?p=preview
First click on marker should open the infoWindow, a second click on the marker should close it again. Does anyone knows how to achieve this?

Any chance of making gm-center accept a plain object, like {lat: 123, lng: 32}, instead of the google object? It would make forms and serializing settings a lot cleaner.

First of all, thanks a lot for your work on angular-gm :)

When adding listener to a map, event is pushed in an array (_listeners) and then removed on destroy.

this.addMapListener = function(event, handler) {
 var listener = google.maps.event.addListener(this._map, event, handler);

 if (this._listeners[event] === undefined) {
  this._listeners[event] = [];
 }

 this._listeners[event].push(listener);
};

But for listener added once, they aren't. In my case, 'idle' event is never fired, and as it's not removed on destroy, it's causing a memory leak.

controller.addMapListenerOnce('idle', function() {
 scope.$emit('gmMapIdle', scope.gmMapId());
});

this.addMapListenerOnce = function(event, handler) {
 google.maps.event.addListenerOnce(this._map, event, handler);
}

Let me know if you need more details. Thanks!

Edit: It's easily fixable by just adding that event in the listeners array, but i don't know if there's a better solution to handle this.

Hello my friend!

First of all, thank you for share this with us!

I need to do something like this:
http://www.daftlogic.com/sandbox-google-maps-centre-crosshairs.htm
The user should drag the map with a centered marker and then I need to be able to get this center coordinates.

I saw that I need to call a marker function inherited from MVCObject, but I don't understand how to get this on gmMarkers:
https://developers.google.com/maps/documentation/javascript/reference#MVCObject

Can you give me a clue?

How to make lazy loading map?
I use a form with tabs and I need to perform the initialization map only becomes active when the second tab.

It looks like this is throwing an error in IE 8 for Object.defineProperties, wrapping it in a try/catch should fix it.

http://blogs.msdn.com/b/ie/archive/2010/09/07/transitioning-existing-code-to-the-es5-getter-setter-apis.aspx

Update: I've fixed that issue with a try/catch locally, but it's now only showing a single marker in IE8

I think it seems not actually.

in the source code,

  if (hasCenter) {
    scope.$watch('gmCenter', function (newValue, oldValue) {
      var changed = (newValue !== oldValue);
      if (changed && !controller.dragging) {
        var latLng = newValue;
        if (latLng)
          controller.center = latLng;
      }
    }, true);
  }

and here,

  if (hasBounds) {
    scope.$watch('gmBounds', function(newValue, oldValue) {
      var changed = (newValue !== oldValue);
      if (changed && !controller.dragging) {
        var bounds = newValue;
        if (bounds)
          controller.bounds = bounds; 
      }
    });
  }

Both of $watch expression doesn't update the other side simultaneously. But it is quite natural that if one of them changes, the other also does.

What do you think?

I want to use Google Mapsclusterer for the markers. For that i need to get the marker and map instance. I can get the map instance from the getPromise but i cannot get marker instance.

Hi,
Here is my try to use gm-polylines, where is my mistake?!!
Thanks in advaced for any help points.

//-----------------------HTML-------------------

        <gm-polylines gm-objects="polylines" gm-get-path="object.path" gm-get-polyline-options="{ strokeColor: '#F00', strokeOpacity: 1, strokeWeight: 2 }">
        </gm-polylines>
    </gm-map>

//------------------------JS-------------------
$scope.polylines = [
{ id: 0, path: [{ lat: 37.772323, lng: -122.214897 }, { lat: 21.291982, lng: -157.821856 }, { lat: -18.142599, lng: 178.431 }] },
{ id: 1, path: [{ lat: 37.772323, lng: -122.214897 }, { lat: 21.291982, lng: -157.821856 }, { lat: -18.142599, lng: 178.431 }] }
];

How do we update center of the map without redrawing the markers.

I have lot of markers, and I want update position ( from socket.io data, traking ). Update only one marker... not redraw all...

I tries send event to old position marker, and then use setPosition of marker.. but after this marker ignore all events.

Will be nice send events by some marker id or other property from object, not by postion

I have a search result page where i show the results based on the input entered in the homepage.The page redirects from the home page.But after redirecting even the map loads but not the markers.But when i reload the page they appear. What is the problem???
PS: The issue is on chrome and is working fine on firefox.