InfoWindow with event mouseover instead of marker click

Feb 10, 2012 at 2:46 PM

hello,

How can I use the mouseover event instead of the marker click to raise the infowindow?

Do you have any kind of code sample? 

 

Thanks!

Feb 17, 2012 at 5:32 PM

 joaof,

I managed to get this working.

First, addd the markup:

 

<artem:GoogleMarkers ID="mapMarkers" TargetControlID="mapAppt" OnClientMouseOver="openInfo" OnClientMouseOut="closeInfo" runat="server" >

Then, add the javascript:
    function openInfo(sender, e) {
        for (var i = 0; i < sender.markerOptions.length; i++) {
            if (parseFloat(e.latLng.Qa.toFixed(7)) == sender.markerOptions[i].position.lat && parseFloat(e.latLng.Ra.toFixed(7)) == sender.markerOptions[i].position.lng) {
                showInfo(sender.markers[i]);
            }
        }
    }
 
    function showInfo(marker) {
        if (marker.infoWindow == undefined) {
            var markerLatLng = marker.getPosition();
            var info = new google.maps.InfoWindow();
            info.setContent([marker.info].join(''));
            marker.infoWindow = info;
        }
        marker.infoWindow.open(marker.map, marker);
    }

    function closeInfo(sender, e) {
        for (var i = 0; i < sender.markers.length; i++) {
            if (sender.markers[i].infoWindow) {
                sender.markers[i].infoWindow.close();
            }
        }
    }

Notice that I elected to create an infoWindow property so it could be easily closed.
Please post alternatives and/or improvements.

Mar 9, 2012 at 11:28 PM

Hi Fleisch, do you know what's the best way to let some C# code access a GoogleMarker?

Unfortunately from C# I can only access objects of Marker type that don't have an InfoWindow property...

Thank you if you can help me

Mar 11, 2012 at 2:56 PM

 

I have actually made this much simpler and similar to the old behavior where only one info window is open at a time.  So, I lost the mouseout event and no longer needed the InfoWindow property.  Here's the javascript:

 

    var info = new google.maps.InfoWindow();

    function openInfo(sender, e) {
        showInfo(sender.markers[e.index]);
    }
 
    function showInfo(marker) {
         info.setContent([marker.info].join(''));
         info.open(marker.map, marker);
    }

May 14, 2012 at 2:07 PM
fleisch wrote:

 

I have actually made this much simpler and similar to the old behavior where only one info window is open at a time.  So, I lost the mouseout event and no longer needed the InfoWindow property.  Here's the javascript:

 

    var info = new google.maps.InfoWindow();

    function openInfo(sender, e) {
        showInfo(sender.markers[e.index]);
    }
 
    function showInfo(marker) {
         info.setContent([marker.info].join(''));
         info.open(marker.map, marker);
    }

fleisch,

I'm using the same code as above, but I'm getting multiple infoWindows at the same time. I've tried numerous examples of how to close the infoWindows, but even info.close() isn't working. Is there anything else you're doing to prevent multiple infoWindows from appearing?

thanks

Jun 1, 2012 at 8:31 PM

 

Try setting Clickable="false"  and  OnClientMouseOver="openInfo"

Jun 4, 2012 at 3:01 PM

I tried the following:

 <artem:GoogleMarkers ID="googleMarkers1" TargetControlID="GoogleMap1" runat="server" Clickable="false" OnClientClick="openInfo">
     <Markers>
      <!-- added in code behind -->
     </Markers>
     <MarkerOptions Draggable="false" Clickable="false">
     </MarkerOptions>
</artem:GoogleMarkers>

and now when I click an marker, I get 2 pop-ups. The first one (in front) says "[object Object]" and the one behind it is the correct one with my data in it. Then when clicking a 2nd marker, the 1st "[object Object]" infoWindow closes, but my infoWindow (with my data in it) says open. Clicking a 3rd, 4th, etc. continues to open more infoWindows without closing any of the previously opened infoWindows.

 

Thanks,

Jim

Jun 17, 2012 at 5:16 PM

Hi,

i have just started to use the google map, and i am wondering is there any way to make any marker mouse-over like on this web: http://www.agoda.com/asia/indonesia/bali.html ?

it shows some information (i guest it's the infowindow) just when we mouse-over any marker.

 

Thanks,

 

Dian

Jun 18, 2012 at 2:35 PM

Hi all,

 

This info window solution is great (thank you), but I can't seem to get the GoogleMarkers extender to work in the first place. I've placed the marker extender on the page with the markup exactly as per above, no matter what I do or set, it doesn't hook into the GoogleMap control (latest version). Therefore, I can't set client events, etc. Has anyone else using Framework 4.0, VS2010, IE9 seen an issue where the GoogleMarker control just won't work?

Thanks