CODEWITHSUNDEEP
javascriptangularjsgoogle-maps
Manu
Manu

Reputation: 4137

Getting the marker in on-click handler: AngularJS + Google Maps

I am trying to show the infowindow on top of a marker and I am struggling with it.

Currently I have the following HTML:

<map data-ng-model="mymap" zoom="4" center="[38.50, -95.00]">
  <marker ng-repeat="item in list" 
  position="[{{item.coordinates}}]" title="{{item.name}}" 
  icon="./images/i.png"
  on-click="onMarkerClicked(mymap, this)" />            

  <control name="overviewMap" opened="true" />
</map>`

Then, in the corresponding controller, I have:

$scope.onMarkerClicked = function(mymap, marker, event){

    infowindow = new google.maps.InfoWindow("Hi I am the MARKER" + event.target.title);
    infowindow.open( mymap, event.target );
    //infowindow.open( mymap, marker);
    $scope.$apply();
}

However, mymap is has the correct value, while event.target does not seem to work, as well as marker (commented in the reported code)

Cannot read property 'target' of undefined

When using marker, it is undefined. How can I manage to fix this?

Upvotes: 1

Views: 1791

Answers (3)

Michelangelo
Michelangelo

Reputation: 5948

You are sending the object this as an argument and naming that event later? On top of that if you are using Angular why not doing it with ng-click="onMarkerClicked(myMap, this, event)". I have never used Google Maps this way but it seems to me that your parameters somehow are incorrect.

See this simple fiddle to see what I mean

http://jsfiddle.net/ozbafyhh/

<button onclick="myFunction(this, event)">Click me</button>

function myFunction (x, event){
    alert(x);
    alert(event);
}

Upvotes: 0

mindparse
mindparse

Reputation: 7225

I have come across this GitHub where they discuss this issue - https://github.com/allenhwkim/angularjs-google-maps/issues/95

They then go on to share an example of using ng-repeat with infoWindow - https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/infowindow_compiled.html

Take a look at the source code on that page, I think it will help you

Upvotes: 1

mindparse
mindparse

Reputation: 7225

You should actually be passing the marker instance as the second parameter to the open call.

See here https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

Upvotes: 0

Related Questions