I am working on a Google Map project. I need to accomplish something interactive. On the map, there will be lots of markers indicating different places and one place will be set as center. Clicking on the marker will pop up the infoWindow. On the infoWindow there will be a link named “NEXT”. Hitting that link will take the viewer to another marker place. It seems to be straight forward, so my question is there any API method to accomplish such task? Any help/suggestion will be highly appreciated.
Use the domready event of the infowindow to bind your click events, as described here.
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(infoWindow, 'domready', function() {
// whatever you want to do once the DOM is ready
});
Related
First of all I'm still new in Xamarin and I am trying to create a click event for a default InfoWindow. The thing is, using the code below under MarkerOptions (i.e. .SetTitle, .SetSnippet), will generate a default InfoWindow when I click on the marker, without creating or making any changes (custom InfoWindow) on xml.
Marker info
LatLng latlng = new LatLng(4.887746, 114.943652);
MarkerOptions options = new MarkerOptions()
.SetPosition(latlng)
.SetIcon(BitmapDescriptorFactory.FromResource(Resource.Drawable.icon))
.SetTitle("title1")
.SetSnippet("address");
marker1 = gmap.AddMarker(options);
marker2 = gmap.AddMarker(new MarkerOptions()
.SetPosition(latlng2
.SetIcon(BitmapDescriptorFactory.FromResource(Resource.Drawable.icon))
.SetTitle("title2")
.SetSnippet("address"));
However, my problem is that I don't know how to create a click event for each and every marker. For example, marker1 will open Activity1 and marker2 will open Activity2.
My question is, is it possible for me to create a click event, for each and every marker info, based on a default InfoWindow? I did try out using the OnInfoWindowClick for a Custom InfoWindow, and it worked well. But I'm still wondering if it can be done using a default InfoWindow, generated from the code above.
I did check other forums and different sites and still couldn't seem to figure how to code it in xamarin. I think it may be a small problem that I might've missed out, but if anybody can share their code to show the info window based on the marker's position, I would be very glad. I'm open to any other suggestions and best solutions you guys may have thought of.
Hope you guys can help me, thank you in advanced.
The GoogleMap class has a InfoWindowClick event that you should hook up to listen to click events on the Info Window.
gmap.InfoWindowClick += HandleInfoWindowClick;
private void HandleInfoWindowClick(object sender, GoogleMap.InfoWindowClickEventArgs e)
{
var marker = eventArgs.Marker;
// do stuff...
}
This will create a single event handler that reacts to all markers.
Xamarin has a nice sample on how to use Google Maps on GitHub in their samples repo.
I have a website at http://arquitectospelomundo.com which displays several markers, combined by the markerclusterer function, which display, when clicked, an infowindow with some info. When clicking directly on the map, the info window appears on the right spot; but when clicking on the sidebar (on one of the pictures), the info window goes out of bounds.
This was working correctly and suddenly changed; I am trying to figure it out but so far with no success. I would appreciate any help pointing me in the right direction.
Thank you.
As it seems the issue is related to the MarkerClusterer.
When the marker where the click has been triggered is inside a cluster the map-property of the marker is null and you get the wrong position.
Possible solution:
When the marker is within a cluster use a hidden marker(hidden via visible) as anchor for the infoWindow:
google.maps.event.addListener(marker, 'click', function() {
//create the dummy-marker on first click
if(!map.get('dummy')){
map.set('dummy',new google.maps.Marker({map:map,visible:false}))
}
var latLng = marker.getPosition();
//when the marker is within a cluster
if(!marker.getMap()){
//set position of the dummy
map.get('dummy').setPosition(latLng);
//use dummy as infowindow-anchor
marker= map.get('dummy');
}
map.panTo(latLng);
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
I had the same problem with Marker clusterer and outside clicks to the map, opening infowindows. The solution by #Dr.Molle with dummy markers is a nice direction, but the problem is that you can use the dummy to pan to, but the listener triggers a click on the marker which is not on the map. The correct infowindow opens, but the autopan feature has no way of knowing where to pan to, so it stays where it was after the last click. This is a problem with repeated clicks from outside the map. The first click goes okay, but the second or third one goes wrong, depening on if it was in a cluster or not.
The solution I found tests if the marker is in a cluster, if yes, attaches it to the map, and removes it after the click (not sure if that is neccessary, maybe to prevent the map from getting slow). I put it in the function that is called with each click from outside. But maybe you can also build it into the event listener. This works perfectly for me:
function openInfoWindow(id){
googlemap.setZoom(13);
var marker = markers[id];
var latLng = marker.getPosition();
if(!marker.getMap()){ //if the clicked marker is in a cluster, so it is not attached to a map
marker.setMap(googlemap); //attach it to the map
google.maps.event.trigger(marker, 'click'); // the standard trigger, opens infowindow
googlemap.panTo(latLng);
marker.setMap(null); //detach it from the map (not sure if necessary
} else {
google.maps.event.trigger(marker, 'click');
googlemap.panTo(latLng);
}
return false;
}
Does anyone know how to create a custom Google Maps infoWindow That will just open and fill over the map completely, instead of paning the map and setting the bubble over the marker? Basically, what I'd like to do is have my markers on the map, then when a user clicks on a marker, it just opens the content in a panel that fits the entire map itself. I looked at the options mentioned here: link but none of these seem to do what I'd like, they still open a "bubble" type of window. Has anyone done this or can someone point me in the right direction?
Creating your custom info window is not so difficult, but it's a little bit complicated.
If you want to find the easiest way, I recommend InfoBubble library.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
If you want to just prevent map panning when the infoWindow open, you can specify an option:
var infoWnd = new google.maps.InfoWindow({
disableAutoPan : true
});
I know that many of us are writing code to open an InfoWindow when a marker is clicked. But the InfoWindow will stay in place until the upper-right X is clicked, which means that setting the associated Markervisibility to false will create what is essentially an orphaned InfoWindow. And there could be multiple InfoWindow instances displayed on the Map at the same time. I guess it's simple enough for the user to just click the InfoWindow closed, but it feels like hiding the Marker should hide the associated InfoWindow.
I have started writing code like the following to deal with this scenario:
google.maps.event.addListener( marker, "click", function() {
var bubble = new google.maps.InfoWindow({
content: buildBubbleContent( param1, param2 )
});
bubble.open( map, marker );
//pretty standard stuff to here, but the next line is new (for me):
google.maps.event.addListenerOnce( marker, "visible_changed", function() {
bubble.close();
});
});
Is this what everyone else is doing? It feels like a design pattern that should be called a ListenBack. I've never seen the issue addressed in the Google Maps docs. I can't help but think that there must be a simpler mechanism built into the InfoWindow to take care of this automatically. Is there a standard way to do this that I have just missed?
For a single infoWindow I always create it as a global during map initialization. My click event starts with:
if(infoWindow != null){
infoWindow.close();
}
infoWindow.setPosition(mouseEvent.latLng);
infoWindow.setContent("....");
// etc
I'm marking this question as answered, because I have continued scouring the docs and looking at many code samples, but haven't found any other solutions. There is certainly no facility provided with the InfoWindow to automatically remove it from the map when the associated marker is turned off. If anyone finds a better option later, I will happily mark their solution as the better answer.
I have many map markers with the exact same lat/long cords so no matter how far in I zoom my map still shows the marker cluster and the number of results.
Is there a way to have some onclick or onhover event so that it shows an info box with all of the markers in that cluster in a list? Then clicking a link within that info box opens up that individual marker info box?
I've read solutions to change the lat, long by a small amount so that they aren't the same location. I think that is very messy and not that good anyways if there ends up being multiple markers 10+ anyways at the same locationg. I think it'd be much easier for a user to just click the cluster and bring up the info window with all of those markers in there with links.
Or if someone knows another plugin that does what I am seeking I could work with that too. I just haven't found much info on it.
There might be a plug in out there to do what you want, but it's also possible to do without one. I did something like that in one of my projects.
Add event listener to each marker; clicking opens marker list info window
The content of the marker list info window contains onclick attributes that will open the marker info window.
My code was tucked away into functions, but it was basically just this:
//1) while creating marker, create click listener that opens the marker list
google.maps.event.addListener(marker, 'click', function() {
markerWindow.close();
markerList.open(map, marker);
});
//2) store the content required by the marker's info windows
var markers = [
[marker1Reference, "The Stadium"],
[maerker2Reference, "The Supermarket"]
];
//3) the function that is called each time a marker is chosen from the marker list
function openMarkerInfo(markerIndex) {
markerList.close();
markerWindow.setContent(markers[markerIndex][1]);
markerWindow.open(map, markers[markerIndex][0]);
}
//4) info window for the marker list - the content includes JS onclick events that will open each marker info window
markerList = new google.maps.InfoWindow({
content: "Choose:<br><br><div href='' class='markerLink' onclick='openMarkerInfo(0)'>The Stadium</div><br><div href='' class='markerLink' onclick='openMarkerInfo(1)'>My House</div>"
});
//5) the marker window that will get set each time a marker is clicked in the list
markerWindow = new google.maps.InfoWindow();
Hope that helps!