How to import html for Google maps webcomponent #3311
Comments
|
I'm not familiar with the conventions for using published WebComponents, but I think you want to do an HTML Import instead of importing an html file in Javascript: diff --git a/app.js b/app.js
index 17b6c65..5d5dc12 100644
--- a/app.js
+++ b/app.js
@@ -1,2 +1 @@
import './bower_components/webcomponentsjs/webcomponents-lite.js';
-import './bower_components/google-map/google-map.html';
diff --git a/index.html b/index.html
index cee838d..43371ef 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<body>
+ <link rel="import" href="./bower_components/google-map/google-map.html">
<script src="app.js"></script>
<google-map fit-to-markers api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc">But it still doesn't work in Chrome 78... Maybe you can setup a project that works without any bundler at all (just using a local webserver)? Then we can test if Parcel is working correctly |
|
What's indeed weird is that it seems that the import itself is working since I see the file, and the registered custom element.
https://jsfiddle.net/gbjd04zm/ Note that we get an error from the Map, but I believe it's because the API key in their example has expired. But at least the custom-element appears.
|
|
I wasn't able to get google-maps to work, but good-map works fine like this: <script src="bower_components/good-map/good-map.js" async defer></script>
<style>
good-map {
display: block;
height: 400px;
}
</style>
<good-map latitude="30" longitude="-100" zoom="2"></good-map>The google-maps component on bower doesn't have a JS module like this. <script src="node_modules/@em-polymer/google-map/google-map-elements.js" async defer></script>
<style>
google-map {
height: 100vh;
}
</style>
<google-map fit-to-markers>
<google-map-marker
latitude="37.78"
longitude="-122.4"
draggable="true"
></google-map-marker>
</google-map>This approach using HTML imports doesn't work either (emty window without Parcel and some error with Parcel): <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link
rel="import"
href="bower_components/google-map/google-map.html"
/>
<style>
google-map {
height: 100vh;
}
</style>
<google-map fit-to-markers>
<google-map-marker
latitude="37.78"
longitude="-122.4"
draggable="true"
></google-map-marker>
</google-map>🤷♂ |
|
Thanks @mischnic for checking all those libraries! |
|
I'm closing this issue because this is more related to the outdated google-maps component than to Parcel itself. |
❔ Question
How to use Google map webcomponent with parcel.
I have tried to adapt the example from the above link to be used with Parcel, but see no map.
🔦 Context
I'm trying to use Google-maps webcomponent, that is available via bower.
💻 Code Sample
Here's a sample repo with the import.
and in index.html:
However it it doesn't show the map.
I have confirmed that the file is loaded, and that the custom element is indeed registered
(code from here)
🌍 Your Environment
The text was updated successfully, but these errors were encountered: