How to use Google Maps with Marko.js and Lasso.js and link global variables to other templates
Question
I'm in a project using Marko.js with Lasso.js for building .js and .scss code. I can successfully interact with Google Maps API through <script> tags. I wish to send latitude and longitude values to other templates, how do I do this?
I tried using this guide inside the docs but it didn't work. I tried to reference a global variable from an index.marko with inline js inside a <script> tag.
The reason I'm forced to use inline js has to do with Lasso.js and Google Maps using <script async defer src='https://maps.googleapis.com/maps/api/...&callback=initMap'/> , it has a callback to an inline js function called initMap() inside another <script> tag. Every time I tried to move the inline js code to an individual .js file, by adding it to the browser.json file like everything else. It throws an error saying that there is no initMap function loaded.
Ok so here is my root directory
src
|_ pages
|_ home
|_ index.marko
|_ index.js
src
|_ components
|_ location-search
|_ index.marko
This is location-search/index.marko:
div.search-container.location-search
div.input-field
p.input-label -- Search
input.controls#pac-input type="text" placeholder="Search Box"
div#map
<script>
functioninitMap() {
// Do Google Maps stuff and obtain an array of lat lng values.
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/...&callback=initMap"/>
This is home/index.marko
lasso-page package-path="./browser.json"
<!DOCTYPE html>
html lang="en"
head
meta charset="UTF-8"
meta name="viewport" content="initial-scale=1.0"
meta http-equiv="X-UA-Compatible" content="ie=edge"
title -- App
lasso-head
body
location-search
browser-refresh
lasso-body
I expect to be able to access from another page the array of latitude and longitude values obtained in components/location-search/index.marko. Marko is a great tool, it just needs more documentation. Thanks in advance.
1 answers
solution1
1 2019-04-24 16:38:55
The reason I'm forced to use inline js has to do with Lasso.js and Google Maps using https://maps.googleapis.com/maps/api/...&callback=initMap'/>, it has a callback to an inline js function called initMap() inside another tag.
I'd recommend using this package: https://www.npmjs.com/package/load-google-maps-api . It allows you to load the google maps api and get access to it without creating a global handler.
import loadGoogleMapsApi from "load-google-maps-api";
class {
onMount() {
loadGoogleMapsApi.then((googleMaps) => {
this.map = new googleMaps.Map(this.getEl('map'), {
center: {
lat: 40.7484405,
lng: -73.9944191
},
zoom: 12
});
});
}
}
div.search-container.location-search
div.input-field
p.input-label -- Search
input.controls#pac-input type="text" placeholder="Search Box"
div key="map"
I tried using this guide inside the docs but it didn't work. I tried to reference a global variable from an index.marko with inline js inside a tag.
As far as this goes, the globals talked about in this doc aren't globals like window is a global. They're more like "render globals" only available in the templates, but available to all of them while rendering.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.