Hi all.

I'm trying to develop a functionality to change ther marker icon when the user hover a list with the markers.

I added some events to the containers on the list:


And I have the following functions in the screen's javascript:

var icon1 = "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Bubble-Azure-icon.png";
var icon2 = "http://www.clker.com/cliparts/U/8/J/z/5/D/google-maps-icon-blue-th.png";
var allMarkers = [];


//Function called when hover the div
function hover(id, mapId) {
   
    var map = osGoogleMap.OSMaps[mapId].gMap;
    var osMarkers = osGoogleMap.OSMaps[mapId].markers;
    
    for ( var i = 0; i< osMarkers.length; i++) {
        alert("for");
        if (id === osMarkers[i].id) {
           osMarkers[i].setIcon(icon2);
           alert("achou");
           break;
        }
   }
}

//Function called when out the div
function out(id) {  
    alert(id);
    for ( var i = 0; i< allMarkers.length; i++) {
        if (id === allMarkers[i].id) {
           allMarkers[i].setIcon(icon1);
           break;
        }
   }
}

I added some alerts to check the ids and see till where the code was running.

The ids seems to be correct but it doesn't get into the "for". It assigns an object to "osMarkers" but the loop doesn't work.

For reference, I'm trying to achieve this:

http://jsfiddle.net/mzhnvcnh/1/

Thanks in advance.

Hi,

please try see this post:

Cheers,
Nuno Verdasca

Nuno Miguel Verdasca wrote:

Hi,

please try see this post:

Cheers,
Nuno Verdasca

Hi Nuno.

Correct if I'm wrong but I couldn't find how to edit it after adding them. My scenario is the following: 

1 - I load the map with all the markers using the default icon.
2 - The user hover one of the items from the list below the map.

3 - The application change the icon of the item that the user hovered.


Cheers.


Solution

Hi Dinis,

Here's one way of doing it:

  1. In your screen's JavaScript, declare these two functions:

    function changeIcon(markerId) {
        markers.forEach(function(marker) { 
            if (marker.id === markerId) {
                marker.setIcon('http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Bubble-Azure-icon.png');
            }
        });
    }
    
    function resetIcon(markerId) {
        markers.forEach(function(marker) { 
            if (marker.id === markerId) {
                marker.setIcon(null);
            }
        });
    }
  2. Drop an expression in your screen after the Map widget, set its "Escape Content" property to "No" and its "Value" to:

    "
    <script>
        var markers = [];
        osGoogleMap.getMap('" + MainMap.Id + "').executeOnLoad('" + MainMap.Id + "', function() {
        var map = osGoogleMap.getMap('" + MainMap.Id + "').gMap;
        var marker1 = new google.maps.Marker({ map: map, id: 'outsystems', position: new google.maps.LatLng(52.068430, 5.086758) });
        var marker2 = new google.maps.Marker({ map: map, id: 'product-league', position: new google.maps.LatLng(52.082465, 5.117799) });
    
        markers.push(marker1);
        markers.push(marker2);
    });
    </script>
    "
    This assumes that your Map widget's name is "MainMap".

  3. For the elements that should change the marker icon when hovered, add these two Extended Properties:

    onmouseover
    "changeIcon(<markerId>);"
    onmouseout
    "resetIcon(<markerId>);"
    Examples for the two markers that I added with the javascript above:



Of course, you might want to load the data for the markers from the database or some other source, in which case you would have to adapt this solution to be more dynamic. But I think this is a good starting point.

Solution