问题
Everything about Google map works fine in different desktop browsers even in smaller screen - initialise, markers, infobubbles etc are working perfectly. But on iPhone/iPad, the InfoBubble doesn't appear when the marker is clicked.
After research on Stackoverflow and followed the various solutions:
- Google Map Infowindow not showing properly
- Google Maps API v3: InfoWindow not sizing correctly
- Why does Safari on the iPad not display my marker on an embedded Google Maps page?
- how can i bind touch events for a marker in google maps?
- click event is not working in ipad
The problem remained. Anyone can help? Thank you in advanced!
//set up infobubble
var infowindow = new InfoBubble({
map: map,
maxHeight: 380,
minWidth: 270,
shadowStyle: 0,
pixelOffset: new google.maps.Size(0, 35),
padding: 0,
borderRadius: 0,
arrowSize: 8,
borderWidth: 0,
borderColor: '#fff',
disableAutoPan: true,
hideCloseButton: true,
arrowPosition: 50,
arrowStyle: 0
});
// open infowindow when marker is clicked
var mm=[];
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function()
{
if(mm !='')
{
mm[0].setVisible(true);
mm=[];
}
mm.push(marker);
marker.setVisible(false);
infowindow.setContent(this.IWcontent);
infowindow.open(map, marker);
}
})(marker, i));
回答1:
Just in case anyone is facing this similar problem. It takes us 3 days to solve this problem. Our approaches are:
- load google map api via http
- load the map earlier than infobubble.js without using async or defer
来源:https://stackoverflow.com/questions/46237734/google-maps-marker-doesnt-display-infobubble-on-iphone-ipad