[Google Maps] Open marker info box when clicking on external link

[Google Maps] Open marker info box when clicking on external link

  
Forge Component
(14)
Published on 4 Oct by OutSystems Labs
14 votes
Published on 4 Oct by OutSystems Labs
By using the code below it is possible to click on an external link and open the info box in the map. Is it possible to do the same with the Outsystems actions provide?
 
function initialize() {
 
        var mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(40.714364, -74.005972),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
 
 
        var locations = [
            ['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
        ];
 
 
        var marker, i;
        var infowindow = new google.maps.InfoWindow();
 
 
        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });
 
 
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: locations[i][3]
            });
 
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
 
            // Push the marker to the 'markers' array
            markers.push(marker);
        }
 
    }
    google.maps.event.addDomListener(window, 'load', initialize);
 
    // The function to trigger the marker click, 'id' is the reference index to the 'markers' array.
    function myClick(id){
        google.maps.event.trigger(markers[id], 'click');
    }

<a href="#" onclick="myClick(0);">Open Info Window</a>

Best regards,
Niek.
Hey, Niek,

I think so: what that example essentially does is add a click listener to each marker, which in turn opens its specific InfoWindow. This will make every marker open/close a customized InfoWindow when you click on them. (They also add a Map click event to close a currently open InfoWindow, but that's another story)

Then, they declare a myClick function which you can use to simulate a click on a given marker, which you could use on your button.

This is mostly correct, but I'd do the first part with OutSystems: there's a nice working example of adding multiple markers to map, each with a click handler that opens an InfoWindow on the MultipleMarkers screen of the Google Maps Demo module. Have a look at the Preparation; you can safely ignore Bounds actions if you don't need automated centering of the map around the markers you create.

For the second part, I'd use a Screen Action with the RunJavaScript action, but run a tweaked version of the code you provided:

"function() {
    var osMap = osGoogleMap.getMap("+MapId+")
    var osMarker = osMap.getMarker("+MarkerId+");
    google.maps.event.trigger(osMarker.gMarker, 'click');
}()"

Notice we are no longer using the markers[id] array reference to get to our marker. Instead, we use the osGoogleMaps JS variable to get the map wrapper, then use its getMarker function to get the marker wrapper and finally the gMarker property to obtain the actual Google Maps API marker object, which you can provide to the trigger function.

Also note the MapId and MarkerId inline variables: your action should have these local variables and assign them the respective Map and Marker identifiers you need, so be sure to have something in place that allows you to do it.

I only left out the part where we close an opened InfoWindow if we click on the map, which would allow you to close opened InfoWindow markers, but you'd have to change the function you defined to open them to also assign a global variable with the InfoWindow reference, so you can call globalInfoWindow.close() on both the Map click handler and at the beginning of the Screen Actions JavaScript, but that part shouldn't be hard.

Let me know if you need further help :)

Best regards,

Carlos Simões
 Hello Carlos,

This doesn't seem to be working. Could this have something to do with the version we are using 9.0.1.40 with google maps version 1.1.8. please have a look at the provided espace.
 
Thanks,
Niek.
Solution
Niek Oosterbeek wrote:
 Hello Carlos,

This doesn't seem to be working. Could this have something to do with the version we are using 9.0.1.40 with google maps version 1.1.8. please have a look at the provided espace.
 
Thanks,
Niek.
 
Hmm, looks like I made a mistake on my example...here's the correct JS you have to run:
"(function() {
    var osMap = osGoogleMap.getMap("+MapId+")
    var osMarker = osMap.getMarker("+MarkerId+");
    google.maps.event.trigger(osMarker.gMarker, 'click');
})()"
The object I was talking about to obtain the map was actually 'osGoogleMap' and the function needed to be wrapped in parentheses in order to be executed.

You can check it out working on my Personal Environment here. I also refactored the code a little, to illustrate the global object I was talking about (it's on the attachment).
Solution
Carlos Simões wrote:
Niek Oosterbeek wrote:
 Hello Carlos,

This doesn't seem to be working. Could this have something to do with the version we are using 9.0.1.40 with google maps version 1.1.8. please have a look at the provided espace.
 
Thanks,
Niek.
 
Hmm, looks like I made a mistake on my example...here's the correct JS you have to run:
"(function() {
    var osMap = osGoogleMap.getMap("+MapId+")
    var osMarker = osMap.getMarker("+MarkerId+");
    google.maps.event.trigger(osMarker.gMarker, 'click');
})()"
The object I was talking about to obtain the map was actually 'osGoogleMap' and the function needed to be wrapped in parentheses in order to be executed.

You can check it out working on my Personal Environment here. I also refactored the code a little, to illustrate the global object I was talking about (it's on the attachment).
 Thanks Carlos. This works perfectly!