React native Question posted in
The official React Native documentation can be found here.

How to Display Google Map Iframe in React Native?

I’ve been trying to integrate a Google Map iframe into my React Native app, but I’m encountering issues. I’ve attempted to use the react-native-webview library, following the documentation, but it hasn’t worked as expected. My goal is simply to display an office address on a Google Map within my app.

my code :-

import { WebView } from 'react-native-webview';

    <WebView
          originWhitelist={['*']}
          source={{ html: '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>' }}
        />

I tried RenderHTML also but it didn’t work for me.

Tags:

2

Answers


  1. 0

    I tried Your code but give me error

    Google Maps Platform rejected your request. Invalid request. Invalid 'pb' parameter.

    so I tried my code it’s look good

    const MapScreen = () => {
    return (
      <View style={styles.container}>
        <WebView
          originWhitelist={['*']}
          source={{ html: `<html>
          <body>
            <iframe width="600" height="450" frameborder="0" style="border:0"
      src="https://www.google.com/maps/embed/v1/place?q=The+Westin+Turtle+Bay+Resort+%26+Spa%2C+Mauritius&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU" allowfullscreen></iframe>
          </body>
      </html>` }}
          style={styles.map}
        />
      </View>
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    map: {
      flex: 1,
    },
  });

    Hope this above code working fine

    enter image description here

    Login or Signup to reply.
  2. 0

    iframe in webview doesn’t work for me in simulator or virtual device, try running in physical device or test after creating a release build ! its working fine

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search