CODEWITHSUNDEEP
react-nativegoogle-mapswebviewmapsreact-native-windows
explorer_ab
explorer_ab

Reputation: 5

JavaScript Maps api using react native

Hello I'm actually new to windows app development and I'm trying to implement google maps in React Native windows app using the JavaScript Maps api and WebView.

index.html
<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",l="importLibrary",q="__ib__",m=document,b=window;b=b["google"]||(b["google"]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback","google.maps."+q);a.src='https://maps.googleapis.com/maps/api/js?'+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>


index.js

let map;

async function initMap() {
  const {Map} = await google.maps.importLibrary('maps');

  map = new Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8,
  });
}

initMap();




style.css
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
 #map {
    height: 100%;
  }
  
  /* 
   * Optional: Makes the sample page fill the window. 
   */
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

I'm trying to display the index.html in my Map custom component.

Output: blank screen

expected: google maps

Kindly guide me, where I went wrong.

Upvotes: 1

Views: 62

Answers (0)

Related Questions