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

Forge Component
(16)
Published on 2018-10-11 by Labs
16 votes
Published on 2018-10-11 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;