JavaScript, Element and Layouts

Using JavaScript with Hype
1

Hi,

maybe someone can give me an advise how to handle this:

I created an Element/Symbol which can display a GoogleMap. I just entered a unique ID and used this ID to draw the GoogleMap within JavaScript and call the function after Layout/Element has been loaded - easy (using simply map = new google.maps.Map(hypeDocument.getElementByID("…"), myOptions)).

Now my problem. When I create a new Layout, the Element/Symbol must have a new unique ID and I cannot call the same JavaScript function, as it will paint the GoogleMap in the wrong Element/Symbol cause the new Element/Symbol has the new unique ID. I do not like to create e.g. seven functions using seven times the Element or Symbol.

Any idea?

thx,
jvc

2

use a class and iterate thru the result

3

thx, h_classen. Simple idea.

I just played with document.getElementsByClassName(’…’) and using this function I can find all my Elements. Great.

One more question. I only want to display my GoogleMap in one Element - the active Element e.g. I defined three different layouts with the different position of my GoogleMap. How can I find out which is my “active” displayed Element?

thx,
jvc

4

nice one :wink:
well, i’d think you would either find out what event hype fires or simply check window.width() on load and resize to see which element would be affected / active …

another one: start a script on layoutload that finds the class within the layouts childelements, should then be only one :smile:

5

quickshot:
mayWork.hype.zip (54.7 KB)

happy resizing :wink:

6

Moin h_classen,

first thank you for your great example.

I changed

$(".HYPE_scene[aria-hidden='false']" ).find('.myClass').html(count)

to

$(".myClass", ".HYPE_scene[aria-hidden='false']" ).html(count)

looks nicer for me. Anyhow I do not have the needed experience: How can I insert a map, cause googleMaps is awaiting a Node name:

map = new google.maps.Map(mapDiv:Node????, myOptions);

thx,
jvc

1 Like
7

I just played. Maybe there is a better solution:

$(".myClass", ".HYPE_scene[aria-hidden='false']" ).html("<div id='map-canvas'></div>")
hypeDocument.relayoutIfNecessary();
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);

Also added the delete function:

$(".myClass", ".HYPE_scene[aria-hidden='true']" ).html("My map...")

jvc

1 Like