Entering google map with multiple addresses forming a large region


(Gustavo) #1

I need to insert in my site a delivery area with several regions of the city forming a delivery zone. This has already been done on a html page by the client. (www.pizzariavenite.com.br)

I would like to know how I can make this work in hype.

The code they use in html is this:codigo.txt.zip (1.3 KB)


(Jonathan Deutsch) #2

The easiest way is:

  1. Include the <script> referencing https://maps.googleapis.com in the Head HTML. No need to have the async or defer attributes and you can remove the &callback=initMap (though if you need asynchronous loading that would be more complex)
  2. Add a Rectangle element in Hype and give it a Unique Element ID of map in the Identity Inspector
  3. Add an On Scene Load action in the Scene Inspector and have it Run JavaScript… that runs the code within initMap

Here’s an example:
map.hype.zip (9.4 KB)


#3

I would also look at Leaflet.js where if you can get your head around it offers a good way to create overlapping panes and interactiveness especially in Hype.


(Gustavo) #4

Perfect. Thank you very much.