Question

I have a Google Map embedded in a jQuery Mobile app. I get the following behavior when viewing the map on the iPhone and clicking the infoWindows:

1. If I click an infoWindow that requires the map to pan to the left, the right-hand side of the infoWindow falls off of the right-hand side of the screen.
2. Clicking an infoWindow that requires the map to pan to the right does not have this same problem.

All infoWindows are sized correctly, but the map simply isn’t panning to the right location. I’m using the following code to place the map:

<style type="text/css">
.page-map, .ui-content, #map_canvas { width: 100%; height: 100%; padding: 0; }
#map_canvas img{max-width:none};
.content-primary, #map_canvas { height: 100%; min-height: 100%; }
</style>

<div data-role="page" data-theme="b" id="mappage" class="page-map" style="width:100%; height:100%;">
    <div data-role="content" class="fullHeight">
        <div id="map_canvas"></div>
    </div>
</div>

I need to figure out how to get the infoWindows to pan correctly when clicking a marker that causes the map to pan to the left.

Answer 1

The auto-sizing of the windows was causing the issue. I adjusted my CSS to force the info window to be 225 pixels. Once I forced the info window to be smaller than the opening of the iPhone viewport, it properly placed the infoWindow as I expected it to.