0

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.

Dan Is Fiddling By Firelight
  • 5,981
  • 17
  • 77
  • 128
Poncho Guerrero
  • 1
  • 1

1 Answers1

1

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.

mlrawlings
  • 711
  • 4
  • 9
  • This is just great!! Thank you very much for your help. I have another problem you might be familiarized with. I'm using the `broswer-refresh` npm library. It works perfectly when running the `browser-refresh server.js` console command. But, when running `node server.js` the map stops working. I tried to log just after calling onMount() method and it didn't show the message in the console. – Poncho Guerrero Apr 30 '19 at 18:08
  • Edit: The error I get with `node server.js` is: `Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document'.` – Poncho Guerrero Apr 30 '19 at 18:26