PricingBlog

Embed Google Maps

  • tony97689-1137429602105557034

    Tony

    2 years ago

    Hi there! I'm looking to create an app leveraging Google Maps but as I'm reading in their documentation it takes JS.

    I have hosted my JS to become a single scripttag. Is that available to insert into my DOM via a web component or what would you advise? Would love to learn how to leverage a work around in Toddle. Thank you.
    1
  • tony97689-1137808078604095578

    Tony

    2 years ago

    This is fantastic! So easy! I'll give it a go.
  • andreasmoller-1137808382011654165

    Andreas Møller

    2 years ago

    Let me know how it goes
  • tony97689-1137825903569817684

    Tony

    2 years ago

    Unfortunately, I didn't get the same result. Followed the steps and setup all the Google required items, including the API and map ID then pasted the script. The layout of the DOM matches yours and I don't see the beautiful map or even an error.
  • andreasmoller-1137826034671169616

    Andreas Møller

    2 years ago

    Can you send me the preview link
  • tony97689-1137830249380446278

    Tony

    2 years ago

    One sec
  • v4-si.toddle.site/maps
  • tony97689-1137832731699580958

    Tony

    2 years ago

    And to confirm, I didn't restrict the API yet per Google's recommendation (left it open). I was unsure of the Toddle domains I needed (.site and .dev I presume).
  • andreasmoller-1137832853200191558

    Andreas Møller

    2 years ago

    Dev should not be relevant
  • Only site
    👍1
  • tony97689-1137834128876777514

    Tony

    2 years ago

    I'm sure you're already looking into the console but any initial ideas?
  • andreasmoller-1137834214637707474

    Andreas Møller

    2 years ago

    I am not by a computer yet
  • tony97689-1137834228927705218

    Tony

    2 years ago

    Oh wait. I just refreshed it and it appears
  • andreasmoller-1137834268421271602

    Andreas Møller

    2 years ago

    It’s gonna be 30 mins or so 🙂
  • tony97689-1137834337270767768

    Tony

    2 years ago

    1137834337002324148-Screenshot_2023-08-06-12-47-17-13_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
  • andreasmoller-1137834396913770496

    Andreas Møller

    2 years ago

    Nice!
  • tony97689-1137834533346091078

    Tony

    2 years ago

    And now it appears on the Dev side too. Sweet. All clear.
  • Tod-1137834535757819974

    Tod

    2 years ago

    Great energy @Tony! Your continuous contribution to the toddle Community just made you advance to Community Level 4!
  • fjp3757-1213259555438600275

    FJP#84

    1 year ago

    Nice, how can I show pins based on external data. For example based on addresses in customer list?
  • andreasmoller-1213368703593349132

    Andreas Møller

    1 year ago

    You will need to get the geolocation for each address
    You can use google geocoding api for that https://developers.google.com/maps/documentation/geocoding/overview
  • andreasmoller-1213369026927927326

    Andreas Møller

    1 year ago

    I would recommend storing the latitude longitude in your database so you don’t have to fetch it every time you show the app