DMXzone Google Maps 2 Support Product Page
Answered
map 100% W x H
Asked 04 Sep 2014 17:30:05
3
have this question
04 Sep 2014 17:30:05 Ryan Pratt posted:
how can i make the map 100% w &h. i tried 100% in both but i get nothing?Thanks Replies
Replied 04 Sep 2014 18:08:45
04 Sep 2014 18:08:45 Teodor Kuduschiev replied:
Hello,
100% widht and height works fine for DMXzone google maps. Then i takes up 100% of the width and height of the parent container it is placed into.
Most probably you "get nothing" as the container you map is placed into is not styled and does not have any height applied.
100% widht and height works fine for DMXzone google maps. Then i takes up 100% of the width and height of the parent container it is placed into.
Most probably you "get nothing" as the container you map is placed into is not styled and does not have any height applied.
Replied 04 Mar 2015 16:23:57
04 Mar 2015 16:23:57 thomas strmiska replied:
hi!
this isn´t working - i always get a blank page.
i use:
<div id="container" style="width:100%;height:100%;">
<div class="dmxGoogleMaps" id="map1" style="width:100%;height:100%;">
</div>
<script type="text/javascript">
// <
.dmxGoogleMaps(
{"width": "100%", "height": "100%", "dataSource": "", "latitude": "", "longitude": "", "zoom": 16, "markers": [{"address": "Trattnerhof2, 1010 Wien", "html": "Trattnerhof 2<br>\rA-1010 Wien<br>\ <br>\rT: +43 1 533 67 94", "title": "Ziel"}]}
);
}
);
// ]]>
</script>
</div>
this isn´t working - i always get a blank page.
i use:
<div id="container" style="width:100%;height:100%;">
<div class="dmxGoogleMaps" id="map1" style="width:100%;height:100%;">
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#map1"
.dmxGoogleMaps({"width": "100%", "height": "100%", "dataSource": "", "latitude": "", "longitude": "", "zoom": 16, "markers": [{"address": "Trattnerhof2, 1010 Wien", "html": "Trattnerhof 2<br>\rA-1010 Wien<br>\ <br>\rT: +43 1 533 67 94", "title": "Ziel"}]}
);
}
);
// ]]>
</script>
</div>
Replied 04 Mar 2015 16:34:15
04 Mar 2015 16:34:15 Teodor Kuduschiev replied:
Well,
What is the height of the container your map is placed into?!
You set a height of 100% for the map, 100% of what?
What is the height of the container your map is placed into?!
You set a height of 100% for the map, 100% of what?
Replied 04 Mar 2015 17:29:08
04 Mar 2015 17:29:08 thomas strmiska replied:
<div id="container" style="width:100%;height:100%;">
Replied 04 Mar 2015 17:34:16
04 Mar 2015 17:34:16 Teodor Kuduschiev replied:
So ... where is this container placed?! Its height is also 100% - 100% of what?
Replied 04 Mar 2015 17:39:09
04 Mar 2015 17:39:09 thomas strmiska replied:
if i create a new html5 page. i click the map and put the adress in, then click ok.
all is done automatically, also the container-div.
if i set in map {"width": "100%", "height": "100%", - i get a blank page.
could you be so kind and give an example?
all is done automatically, also the container-div.
if i set in map {"width": "100%", "height": "100%", - i get a blank page.
could you be so kind and give an example?
Replied 04 Mar 2015 17:46:06
04 Mar 2015 17:46:06 Teodor Kuduschiev replied:
When you place the map into a container, and set its height to 100%, the map takes the height of the container.
If your container height is 0px the map height is also 100% of 0 = 0 ....
If your container height is 0px the map height is also 100% of 0 = 0 ....
Replied 04 Mar 2015 17:50:48
04 Mar 2015 17:50:48 thomas strmiska replied:
ok - thanks, i know. my intention is to make the map fullscreen - responsive,
so it fits to every screen. this isn´t possible, if i use a pixel-parameter.
so it fits to every screen. this isn´t possible, if i use a pixel-parameter.
Replied 04 Mar 2015 17:53:43
04 Mar 2015 17:53:43 Teodor Kuduschiev replied:
Well, i am not sure how familiar you are with basic HTML and CSS.
First you need to make your body and html 100% high (basic html/css requirement for fullscreen pages...)
Then you place your map in the <body> </body> tags and set it to 100% width and 100% height.
First you need to make your body and html 100% high (basic html/css requirement for fullscreen pages...)
html, body {
height:100%;
margin:0;
padding:0;
}Then you place your map in the <body> </body> tags and set it to 100% width and 100% height.
Replied 04 Mar 2015 18:02:16
04 Mar 2015 18:02:16 thomas strmiska replied:
ok - got it:
<style>
html {
height:100%;
}
body {
background-color: #FFFFFF;
margin:0;
height:100%;
}
</style>
thanx a lot!
regards
<style>
html {
height:100%;
}
body {
background-color: #FFFFFF;
margin:0;
height:100%;
}
</style>
thanx a lot!
regards