angularjs google maps - markers with window - infowindow not showing

Question

Trying to get a app using angular-google-maps with:
- multiple markers via the markers directive
- a single infowindow via the window directive

I've been through the API and multiple closed issues / questions on the git-hub site but just can't get it working... :-/

jsfiddle

For simplicity, I'm declaring the markers manually (and they're displaying correctly):

$scope.markers = [
    {
        id: 0,
        coords: {
            latitude: 37.7749295,
            longitude: -122.4194155
        },
        data: 'restaurant'
    },
    {
        id: 1,
        coords: {
            latitude: 37.79,
            longitude: -122.42
        },
        data: 'house'
    },
    {
        id: 2,
        coords: {
            latitude: 37.77,
            longitude: -122.41
        },
        data: 'hotel'
    }
];

The html looks like:

<body ng-app="app">
    <div class="angular-google-map-container" ng-controller="MainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
            <ui-gmap-window coords="markers.coords" show="windowOptions.show" closeClick="closeClick()">
                <div>Hello</div>
            </ui-gmap-window>
            <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
            </ui-gmap-markers>
        </ui-gmap-google-map>
    </div>
</body>

I'm applying the onClick function to the markers array using this code

$scope.addMarkerClickFunction = function(markersArray){
    angular.forEach(markersArray, function(value, key) {
        value.onClick = function(){
                $scope.onClick(value.data);
            };
    });
};

The marker click functions look like

$scope.windowOptions = {
    show: false
};

$scope.onClick = function(data) {
    $scope.windowOptions.show = !$scope.windowOptions.show;
    console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
    console.log('This is a ' + data);
};

$scope.closeClick = function() {
    $scope.windowOptions.show = false;
};

The $scope.onClick() function seems to be working on marker click since the console outputs what is expected - and the $scope.windowOptions.show value toggles between true and false...

I'm thinking it's the way I've connected the window html to the controller arrays and functions ? Any help is appreciated.

P.S. The API documentation examples seem out of date since they don't use show in the example but rather options.visible to show and hide infowindows - but then all the issues / examples suggest using show instead ?

score 10 · Answer 1 · answered Feb 13 '16 at 16:31

I know this is an old post.

However, these days I've been struggling myself trying to do this and, moreover, the jsfiddle of the accepted answer is broken and doesn't work with latest versions of angular-google-maps directive. So, I've decided to share a working plunker hoping it can help other people.

Plunker here

This version is rendering multiple markers but just one window. Only one window can be opened at the same time.

It's based on the advises of the official site FAQ Section: See How do I only open one window at a time?

html

<ui-gmap-google-map center="map.center" zoom="map.zoom">

  <ui-gmap-window 
    show="map.window.show" 
    coords="map.window.model" 
    options="map.window.options" 
    closeClick="map.window.closeClick()"
    templateUrl="'infowindow.tpl.html'" 
    templateParameter="map.window">
  </ui-gmap-window>

  <ui-gmap-markers  
    models="map.markers" 
    coords="'self'"  
    events="map.markersEvents"
    options="'options'">
  </ui-gmap-markers>

</ui-gmap-google-map>

js

$scope.map = {
  center: {
    latitude: 39.5925511,
    longitude: 2.633202
  },
  zoom: 14,
  markers: [],  // Markers here
  markersEvents: {
    click: function(marker, eventName, model) {
      $scope.map.window.model = model;
      $scope.map.window.show = true;
    }
  },
  window: {
    marker: {},
    show: false,
    closeClick: function() {
      this.show = false;
    },
    options: {} 
  }
};

Hope it helps.

Hello @troig. what If I want to send some data through that marker — Sravan, Mar 26 '16 at 10:31
Hi @Sravan! What do you mean with 'send some data'? Could you give me an example? — troig, Mar 30 '16 at 12:24
Hai, thank you for the response. This one is solved, but I have an issue on info window marker click. I am trying every where, but not getting the answer, can you please guide me.So that I will elaborate my issue. — Sravan, Mar 30 '16 at 13:10
Have you seen the plunker on the answer? I think it has no problem with marker click. To be able to help you, I need more info... — troig, Mar 31 '16 at 07:16
@troig What about information from the item in question being used for an $window route using information from the item in creating the marker? The item would have the :id to use for a route. Just how do you have an on click event on an tag in a marker window. — mjwrazor, Apr 10 '17 at 20:21

score 5 · Accepted Answer · edited Apr 11 '15 at 15:19

5

Your marker's binding is incorrect in the window directive.

Basically, you need to set a marker as selected on click and bind the window to that selected marker. See the jsfiddle for a working example.

<body ng-app="app">
<div class="angular-google-map-container" ng-controller="MainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
        <ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" closeClick="closeClick()">
            <div>Hello</div>
        </ui-gmap-window>
        <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
        </ui-gmap-markers>
    </ui-gmap-google-map>
</div>

http://jsfiddle.net/gqkmyjos/

edited Apr 11 '15 at 15:19

cl3m

2,791
19
21

answered Feb 03 '15 at 05:58

Myles

20,860
4
28
37

@Myles jsfiddle is no longer working. Any ideas why? – jmq Apr 16 '15 at 01:02
1

@jmq yeah, it was pointing at an unpegged version of the library and the latest code works slightly differently. See this one for a working example http://jsfiddle.net/h11bxywo/ . – Myles Apr 16 '15 at 01:06
@Myles Thanks for the update. Looks like the jsfiddle shares the issue that I was having where the independent ui-gmap-window instance overlaps with the ui-gmap-markers instances. To fix that, I'm using the `pixelOffset` from the [Google docs](https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions) like so: `pixelOffset: new window.google.maps.Size(0, -35)` and then the info window appears _above_ the marker as users would expect. – jmq Apr 16 '15 at 01:30
Mind you, my last comment should've used the `$window` Angular service rather than just `window`. – jmq Apr 16 '15 at 01:43
Hi, iit seems that `coords="MapOptions.markers.selected.coords"' in your `map-window` should be `MapOptions.markers.selected' without the coords. Because it is an object with lat and long. – Mattijs Sep 22 '15 at 04:31
@Mattijs the selected marker is not an object with lat and long, it an object with a coords object that has lat and long. – Myles Sep 22 '15 at 21:52
Can you fix your fiddle? Just for reference for other people? I had a lot of issues getting the damn windows to work. For some reason Angular wouldnt let me update stuff in the window on marker click. I just wanted to print a name in there...was driving my nuts. – Mattijs Sep 23 '15 at 23:52
@Mattijs several releases have been made since this answer was posted, I've updated the jsfiddle to accommodate the changes from these releases. – Myles Sep 24 '15 at 18:27
Your fiddle seems broken :( – DARK_DUCK Oct 12 '15 at 07:16
@khalid13 the fiddle has been updated, again there's been several releases since the fiddle was created. Hopefully the updated fiddle helps you out. – Myles Jul 02 '16 at 21:51
I got Myles' fiddle working once more by bumping to newer versions of angular and angular-google-maps: http://jsfiddle.net/9yyu0nj2/ – Eric Soyke Aug 08 '16 at 15:09

score 3 · Answer 3 · answered Aug 05 '16 at 07:49

I know this is old post, but I struggled with Angular Google Map, and solve issue when you open one window for markers. If you use ng-repeat and window for each one - no problems. But when you have a markers directive, and want to show only one window, then you have an issue - window places not above marker and you need change position a little. How to do it? Let me share my experience on that.

You just need to specify pixelOffset for windowoptions like that:

JS:

$scope.windowOptions = {
    pixelOffset : {
        height: -25,
        width: 0
    }
};

HTML:

<ui-gmap-window coords='selectedmarker.coords' show='true'  options='windowOptions'>
@{{ selectedmarker.tagline }}
</ui-gmap-window>

That's it. Change height for your needs.

score 0 · Answer 4 · answered Mar 11 '15 at 22:25

you're better setting the marker model on the scope on click something like this:

marker click callback:

$scope.onClick = function(marker) {
  $scope.selectedMarker = marker.model;
}

Then use the selectedMarker in the directive:

<ui-gmap-window coords="selectedMarker" show="windowOptions.show" closeClick="closeClick()">
            <div>Hello</div>
        </ui-gmap-window>

simple. assumes your marker model has longitude and latitude set of cause

angularjs google maps - markers with window - infowindow not showing

jsfiddle

4 Answers4

Linked