Return an id to HTML

Return an id to HTML
0

#1

Hi,

I try to return variables called map and pano that created in JS but it does not show up its value in HTML

HTML = line 87 and line 90
CSS = line 34-38

This is the code: Weather App

I do have the working example, unfortunately it uses pixel based value, instead of percentage, I don’t want to use it because it won’t be responsive to browser’s screensize Weather App with px

How do I show its value in HTML (preferable using percentage)?

Thanks


#2

I think you have to call the initMap function somewhere.

I never used the API, but I gave it a quick read and I found this.

In the example above, we used CSS to set the height of the map div to “100%”. This will expand to fit the size on mobile devices. You may need to adjust the width and height values based on the browser’s screensize and padding. Note that divs usually take their width from their containing element, and empty divs usually have 0 height. For this reason, you must always set a height on the <div> explicitly.

I changed the #map's height from 30% to some pixel based value, and the map is there!


#3

I typed
<script>$(document).ready(initMap());</script>
Inside your html and the map showed up, presenting my current location.


#4

Thanks @kevcomedia.

I set the CSS to use pixel based value instead of %

height: 300px;
width: 633px;


#5

Hi @andrebrito,

I try to add it based on your suggestion inside the HTML, but it does not show up the map in my HTML?


#6

I still don’t get it, how come the other code pens, like these are:

Geolocation-1

Geolocation-2

successfully loaded the map, event without calling the function initMap(). Now, I already call the initMap() with no luck :tired_face:

I hope someone can enlightening me about this problem.

Thanks


#7

I just changed in CSS to use the values you said:
#pano, #map { height: 300px; width: 633px; }

And it worked just fine. Have you tried it?

PS.: sorry about the code format, I’m new to the forum and I’m trying to figure out how to paste code here.


#8

Yup, I already give it a try and it’s working fine but I prefer to use % based value instead of pixel based value, because it won’t be responsive in mobile devices. It looks good on tablet/laptop/desktop but it’s not responsive to screen smaller than 6"

Weather App with px