[Google Maps Mobile] On Click event placed inside the Map Marker Info Window requires double click in iOS.

Forge Component
(17)
Published on 3 Jul by Labs
17 votes
Published on 3 Jul by Labs

Hi Team,

 We have used the Google Maps Mobile Plugin from forge https://www.outsystems.com/forge/component-overview/1396/google-maps-mobile.

   We have added Map marker List and a Map InfoWindow with the below Javascript. The Onclick actions set on the button in the below Javascript is working fine in Android but in iOS we have to double click on the button for the button action to be triggered.


    var map = osGoogleMap.OSMaps[ $parameters.MapId ].gMap;

var marker = osGoogleMap.OSMaps[ $parameters.MapId ].markers[ $parameters.Marker ].gMarker;

var contentString = '<div class="maps-info-window-wrapper" style=overflow:hidden!important;z-index:99999;white-space: nowrap;>'+

'<div id="bodyContent" style=height:35%;>'+


   // '<button type="button" onclick=document.getElementsByClassName("school-overview-' + $parameters.SchoolId + '")[0].click()>'+

'<div class=ThemeGrid_Width12 onclick=document.getElementsByClassName("school-overview-' + $parameters.SchoolId + '")[0].click()>' +

'<div class=ThemeGrid_Width2 style=float:left;><img style=height:45px;width:35px;margin-top:5px; src="data:image/jpg+;base64,'+$parameters.image+'">'+

'</div>' +

'<div class=ThemeGrid_Width10 style=float:right;font-size:12px;><div style=margin-left:5px;margin-top:5px;class=ThemeGrid_Width12;color:#326AAE; >'+$parameters.SchoolName+'</div><div style=margin-left:5px;class=ThemeGrid_Width12;color:#326AAE;>'+$parameters.country+','+$parameters.city+'</div></div>'+

'<div class="ThemeGrid_Width12 OSAutoMarginTop">' +

'</div>' +

'</div>' +

'<div class=ThemeGrid_Width12 style=border-bottom:5px solid white;height:15px; ><button style="font-size:13px;font-weight:bold;margin-top:9px;border:2px;border-color:#326AAE;border-radius: 4px;padding:2% 3%;background-color:#447ec4;color:#fff;" onclick=document.getElementsByClassName("school-' + $parameters.SchoolId + '")[0].click()>Visit Us</button><button style="font-size:13px;border:2px;border-color:#326AAE;border-radius: 4px;padding:2% 3%;font-weight:bold;float:right;margin-top:9px;background-color:#447ec4;color:#fff;" onclick=document.getElementsByClassName("school-direct-' + $parameters.SchoolId + '")[0].click()>Navigate</button></div>' +

'</div>' +

//'</button>'+

'</div>';


var infowindow = new google.maps.InfoWindow({

content: contentString

});



if( window.activeInfoWindow) {

window.activeInfoWindow.close()

}


infowindow.open(map, marker);

window.activeInfoWindow = infowindow;

a quick and easy solution would be to fire the click event twice.  since you only appear to be navigating to another screen.  ie:


'<div class=ThemeGrid_Width12 onclick=;document.getElementsByClassName("school-overview-' + $parameters.SchoolId + '")[0].click();document.getElementsByClassName("school-overview-' + $parameters.SchoolId + '")[0].click()>' 


if you've got the time, set up a doubleclick listener and trigger the event on the div.  extra elegance for filtering only double click for ios user agent.