title: Google Map on Iphone Appears Different Than Android
body: <p>We are working on a web application in react with typescript. Using <code>react-google-maps</code> package we've embedded google map. Everything works fine except the map is not appearing as expected on iphone. We've used <code>fitBounds</code> but that doesn't work on iphone.
  Here is the code.</p>
  <pre><code>import React, { useContext, useRef, useEffect } from 'react';
  import { compose, withProps } from 'recompose';
  import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
  import env from '../../utils/env.utils';
  import { compileGoogleMapsScriptSrc, silverMapDesign } from '../../utils/misc.utils';
  import DrawingManager from 'react-google-maps/lib/components/drawing/DrawingManager';
  import { ThemeContext } from 'styled-components';
  import Boundry from './polygon';
  import { BuildingLocation } from '../../state/tour/tour.types';
  import images from '../../utils/img.utils';
  
  const MapLocator = compose(
    withProps({
      googleMapURL: compileGoogleMapsScriptSrc(env.googleApiKey),
      loadingElement: &lt;div /&gt;,
      containerElement: &lt;div style={{ height: `100%`, width: `100%` }} /&gt;,
      mapElement: &lt;div style={{ height: `100%` }} /&gt;,
    }),
    withScriptjs,
    withGoogleMap,
  )(props =&gt; {
    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
    // @ts-ignore
    // prettier-ignore
    const { data, allData, center: location, zoomValue: zoom, marker, selected, selectAll, doneDrawing, allowEdit } = props;
    const ref: any = useRef&lt;HTMLElement&gt;(null);
    const { primary: primaryColor } = useContext(ThemeContext);
  
    useEffect(() =&gt; {
      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
      // @ts-ignore
      const bounds = new window.google.maps.LatLngBounds();
      data.forEach((coor: any) =&gt; {
        const { lat, lng } = coor;
        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
        // @ts-ignore
        const latLng = new window.google.maps.LatLng(lat, lng);
        bounds.extend(latLng);
        console.log(zoom);
        ref.current?.fitBounds(bounds);
      });
    }, [data]);
    return (
      &lt;GoogleMap
        // defaultZoom={zoom}
        defaultCenter={location}
        defaultOptions={{ styles: silverMapDesign, streetViewControl: false }}
        ref={ref}
      &gt;
        {allData ? (
          allData.map((ele: BuildingLocation[], index: number) =&gt; &lt;Boundry data={ele} key={index} /&gt;)
        ) : (
          &lt;Boundry data={data} /&gt;
        )}
        {allowEdit &amp;&amp; (
          &lt;DrawingManager
            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
            // @ts-ignore
            defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
            defaultOptions={{
              drawingControl: true,
              drawingControlOptions: {
                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                // @ts-ignore
                position: google.maps.ControlPosition.TOP_CENTER,
                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                // @ts-ignore
                drawingModes: [google.maps.drawing.OverlayType.POLYGON],
              },
              polygonOptions: {
                strokeColor: primaryColor,
                strokeOpacity: 1,
                strokeWeight: 4,
                fillColor: 'rgba(6, 56, 231, 1)',
                fillOpacity: 0.05,
              },
            }}
            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
            // @ts-ignore
  
            onPolygonComplete={doneDrawing}
          /&gt;
        )}
        {marker &amp;&amp;
          marker.map((mark: Location, i: number) =&gt; {
            return (
              &lt;Marker
                position={mark}
                key={i}
                icon={selectAll || selected === i ? images.blueMapMarker : images.grayMapMarker}
                zIndex={selected === i ? 200 : 100}
              /&gt;
            );
          })}
      &lt;/GoogleMap&gt;
    );
  });
  
  export default MapLocator;
  </code></pre>
  <p>Here is the screenshot of the current behaviour on iphone.
  <a href="https://i.stack.imgur.com/MYxM1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MYxM1.png" alt="enter image description here" /></a></p>