0

I am developing a AgngularJs Google Map application (using AngularJS Google Map Directive) to show the current location using Marker and display the coordinates in an InfoWindow when the Marker icon is clicked.

HTML:

 <ui-gmap-google-map center="map.center" zoom="map.zoom" options="options">
    <ui-gmap-marker coords="vm.marker.coords" options="vm.marker.options" events="vm.marker.events" idkey="vm.marker.id">
    </ui-gmap-marker>
    <ui-gmap-window show="false" coords="vm.infoWin.coords" options="vm.infoWin.infoWinOptions">
    </ui-gmap-window>
 </ui-gmap-google-map>

Controller:

uiGmapGoogleMapApi.then(function (maps) {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
      $scope.map = { center: { latitude: position.coords.latitude, longitude: position.coords.longitude }, zoom: 15 };
      $scope.options = { draggable: false, scrollwheel: false }; //Map

      vm.marker = {
         id: 1,
         coords: {
                   latitude: position.coords.latitude,
                   longitude: position.coords.longitude
                 },
         options: {
                   draggable: false,
                   //labelContent: 'You are here',
                   //labelClass: "marker-labels"
                  },
         events: {
                   click: function () {
                    showInfoWindow();
                 }
           }
     };  

     function showInfoWindow() {
         vm.infoWin = {
                  coords: {
                             latitude: position.coords.latitude,
                             longitude: position.coords.longitude
                          },

                  infoWinOptions: {
                                     visible: true,
                                     content: 'Latitude: ' + position.coords.latitude + ', ' + 'Longitude: ' + position.coords.longitude,
                                     pixelOffset: { height: -32, width: 0 }
                                  }
                      }
                  }
              })
          }
      })

But the InfoWindow is displayed only for first two clicks on the Marker icon. Google Chrome Console Window is showing this error message for every Marker Click:

Uncaught TypeError: Cannot set property 'opacity' of undefined

at Object.maybeRepaint (angular-google-maps.min.js:7)
at .Me. (angular-google-maps.min.js:7)
at Object..z.trigger (js:95)
at Ke._.k.trigger (js:113)
at .JF. (maps.googleapis.com/maps-api-v3/api/js/26/10/infowindow.js:3)
at Object..z.trigger (js:95)
at _.JF. (maps.googleapis.com/maps-api-v3/api/js/26/10/util.js:133)
at .Zs..k.Jh (maps.googleapis.com/maps-api-v3/api/js/26/10/common.js:204)

I am not sure whether this is the right way to handle the Marker Click event. Please help me to fix this issue.

Jofin
  • 5
  • 4
  • Possible duplicate of [Google map - Uncaught TypeError: Cannot set property 'position' of undefined](http://stackoverflow.com/questions/23754761/google-map-uncaught-typeerror-cannot-set-property-position-of-undefined) – samiles Oct 27 '16 at 07:45

1 Answers1

1

Info window content needs to be specified a bit differently:

1) first we need to introduce a property to store info window content (infoWinOptions object should not be used for that purpose since content could not be set via options attribute of ui-gmap-window directive ), for example: vm.marker.content

2) and then bind it like this:

<ui-gmap-window coords="vm.infoWin.coords" show="false" options="vm.infoWin.infoWinOptions">
  <span>  {{vm.marker.content}}</span>
</ui-gmap-window>

Demo

Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193
  • Thanks for the reply. After trying the above solution, the error message in the console window is gone. But the InfoWindow is displayed only for the first two clicks on the Marker icon. Same in Plunker also. – Jofin Oct 28 '16 at 06:10
  • 1
    Adding the attribute `closeClick="vm.infoWin.infoWinOptions.visible=false"` to `ui-gmap-window` fixed the Marker icon Click issue also. Thanks! – Jofin Oct 28 '16 at 07:04