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?
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
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
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);
}
Related
I'm using the ng-map directive to display a map. The map has markers that show an infowindow whenever there's a mouseover on the marker. Sometimes however, the infowindow doesn't appear.
Other than this, I haven't been able to identify any pattern to what's happening, as the problem occurs for a different marker each time. I'm outputting data to the infowindow however the issue doesn't seem to be 'data related' as all data for the selected location seems to be correct at the point where the issue occurs.
I have a showInfo method that is being called on a mouseover like this:
showInfo(event, loc, infoWindowTemplate, map, mapsController) {
loc - data for the clicked location
infoWindowTemplate - the info window template to use (this is always the same for a particular map, however this is configurable, so if I'm showing a map for mobile, I use one infowindow template, if I'm showing a desktop map, I use a different one)
map - a reference to the NgMap object on the controller
mapsController - the controller itself (I strongly suspect that this is a bad code smell - it was the easiest way I could figure out to get reference back to the controller following the mouseover)
Here is the body of the method:
map.getMap(mapsController.mapId).then(function (myMap) {
var selectedMarker = myMap.markers["L: " + loc.position[0] + ", " + loc.position[1]];
selectedMarker.locationInfo = loc;
console.log("about to show infowindow - infoWindowTemplate = " + infoWindowTemplate);
// console output = "cached-myTemplate.html"
myMap.showInfoWindow(infoWindowTemplate, selectedMarker);
selectedMarker is definitely referring to the correct marker object. My template looks like this:
<script id="cached-myTemplate.html" type="text/ng-template">
<a class="map-location__link" href="/locations/{{anchor.locationInfo.locationId}}" target="_blank">
<img src="{{anchor.locationInfo.locationImageThumbnail}}" />
</a>
</script>
The issue seems to be that calling 'showInfoWindow' is intermittently failing somehow (although there are no errors in the console). Any comments or answers with ideas of what may be causing the issue or what else I can do to diagnose it will be appreciated!
I discovered that this is a timing issue. Delaying the 'turn' in which showInfoWindow is called (by adding a short timeout) fixed the issue:
map.getMap(mapsController.mapId).then(function (myMap) {
....
this.$timeout(function () {
dealmap.showInfoWindow(infoWindowTemplate, selectedMarker);
}, 100)
}.bind(this));
I am dealing with Google Maps here and javascript. I have an existing marker on my Google map and I can click on it and it displays a div. If I click it again, the div disappears. I gave this marker a specific, unique id.
There is also a Polygon on the map. I want when the user clicks on the polygon that the click event is activate for a marker that I will reference by the marker's id.
Is this possible? If so, let's say that the id of the marker is U123. How would I do this?
Here is the code I use to add an event to the polygon click:
google.maps.event.addListener(assetPolygons[polygon_count],'click', function (event) {new google.maps.event.trigger('U123', 'click');});
U123 is the name of the marker id. The above is not working.
var marker = new google.maps.Marker(markerOptions);
marker.setValues({id: 1}); // v3
marker.metadata = {type: "point", id: 1}; //v2 or v3
I guess the better way to do this is to store your marker in a global var and then do
$(".something").click(function(){
new google.maps.event.trigger( marker, 'click' );
// Here marker is a global var so accessible everywhere.
});
Two seconds in google found How to trigger the onclick event of a marker on a Google Maps V3?
The only difference in the function that was stated to work, wich is:
google.maps.event.trigger(markers[i], 'click');
and yours that i can see is the new, try removing it
I built a function that loops through the assetMarkers array that stores each marker. This works:
function ClickMarker(u) {
for (i=0;i<assetMarkers.length;i++) {
if (assetMarkers[i].id == u) {
google.maps.event.trigger(assetMarkers[i], 'click');
i = assetMarkers.length;
}
}
}
In the above function, the variable u is the id of the marker in the array assetMarkers (which is the array storing the map markers). When I create the marker, I set the id using marker.setValues({id: 'U123'}); where U123 is the id of the marker.
I have to loop through the assetMarkers array to find the one I am looking for.
I was hoping, the equivalent of document.getElementById(u) would exist in Google Maps so that I would not have to loop through the array. It would be great, Google API guys, if we programmers could do something like this:
google.maps.event.trigger(google.maps.getElementById(u), 'click');
Thanks for everyone's input! It was very helpful as I am a newbie to Google Maps.
I am drawing a set of Polygons on to Google Maps and would like to have an InfoWindow pop up at the center of each when I click on it.
function attach_info_window(polygon, centroid, title){
var info_window = new google.maps.InfoWindow({
content: title,
position: { lat: centroid[0], lng: centroid[1] }
});
google.maps.event.addListener(polygon, 'click', function() {
info_window.open(map, this);
});
}
The problem is, the window shows up in the NW corner every time. The 'position' parameter seems to be ignored completely. I also tried setting the position on click with
event.latLng
But that returns undefined, even though the API docs specify it, so that doesn't work either. Curiously, it works just fine if I use a Marker instead of the Polygons.
I solved this by removing the second argument in open()
info_window.open(map)
works great. I was passing "this" in order to bind it to that specific polygon among many. I still don't understand why this works, and neither
info_window.open(map, poly)
nor
info_window.open(map, this)
works
This:
info_window.open(map, this);
Will not work for anything but a google.maps.Marker. The second argument of InfoWindow.open can only be a google.maps.Marker, a Polygon or Polyline won't work there.
from the documentation
"In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property"
I am using http://angular-google-maps.org/api in order to work with a Google map.
So far I am able to show the markers but somehow I can't get to show the windows on click.
<markers models="markers" coords="'last_known_location'" icon="'icon'" click="'onClicked'">
<windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
<p ng-non-bindable style="width:200px">{angular{ options.title }angular}</p>
<p ng-non-bindable>{angular{ latitude | number:4 }angular}, {angular{ longitude | number:4 }angular}!</p>
</windows>
</markers>
As you can see, it uses the showWindow property to show the window
I add this to each marker by doing
angular.forEach($scope.markers,function(marker){
marker.closeClick = function() {
marker.showWindow = false;
$scope.$apply();
};
marker.onClicked = function(){
alert(marker.id);
onMarkerClicked(marker.id);
};
});
The alert shows up on click, and
var onMarkerClicked = function(marker){
marker.showWindow = true;
$scope.$apply();
}
The property is also changed, but the window doesn't show up.
Any ideas? thanks
Your code actually works fine here...
The problem with it is that you're passing marker.id to onMarkerClicked, not the marker itself...
Also, I didn't need $scope.$apply() to make it work...
Now I'm trying to figure out how to access the model obj inside the windows tag...
I have a Google v3 Map with a UI element that overhangs the top of it like so…
And I have an info window attached to multiple markers. The problem I have is that when the infowindow opens and auto-pans to be visible within the map (behaviour I want), it obviously takes no account of the element overhang…
…so the user has to manually pan to see all the info clearly or get at the close box.
I've looked to see if there is a way I can get the offsetTop of the infowindow from its parent map, so I can add an extra panTo nudge when necessary, but I'm stumped.
Attempts such as…
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map, marker);
var infoTop = infowindow.offsetTop;
console.log(infoTop);
});
…just give me undefined.
What would be great is to be able to set a clearance property on the infowindow, as is possible with the infoBoxClearance property of the InfoBox utility. But I don't want to use InfoBox because there are stylistic aspects of the standard infowindow I prefer.
And I would prefer not to have the map pan more than is necessary by using disableAutoPan and calculating an optimal panTo for each marker.
Any suggestions?
I haven't tried this in Version 3, but in Version 2 the standard solution is to create a custom control on the map. The [v2] infoWindow avoids all controls, including custom controls. Your custom control could simply be an empty space covered by your external UI.
http://code.google.com/apis/maps/documentation/javascript/controls.html#CustomControls