Map appears as a narrow band at top 15% of browser window....
Development and Programming
16 years ago
Hi,
Does anybody know why this is happening? (See the attached image file)
I copied verbatim the code example on http://www.experienceinternet.co.uk/resources/details/sl-google-map/
{exp:weblog:entries weblog="map" disable="categories|category_fields|member_data|pagination|trackbacks"}
{google-map id="example-map" class="map" controls="zoom|scale|overview" map="drag|click_zoom|scroll_zoom" pin="drag|center"}
{map}This is the fallback content for users who cannot see the Google Map.{/map}
{/google-map}
{/exp:weblog:entries}Created the same weblog with the same names etc…
This is the ouput of the html. See the attached image to see what it looks like in the browser….
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<title>Accommodations</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='stylesheet' type='text/css' media='all' href='http://localhost/english/index.php?css=accommodation/site_css' />
<style type='text/css' media='screen'>@import "http://localhost/english/index.php?css=accommodation/site_css";</style>
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://localhost/english/index.php/accommodation/rss_2.0/" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="http://localhost/english/index.php/accommodation/atom/" />
<!-- Include the libraries -->
[removed][removed]
[removed][removed]
[removed][removed]
<!-- Include the SL Google Map JS -->
[removed][removed]
</head>
<body>
<div>
<div id="example-map" class="sl-google-map">
This is the fallback content for users who cannot see the Google Map.
</div>[removed]
if (typeof(SJL) == 'undefined' || ( ! SJL instanceof Object)) SJL = new Object();
if (typeof(SJL.google_maps) == 'undefined' || ( ! SJL.google_maps instanceof Array)) SJL.google_maps = new Array();
SJL.google_maps.push({
init : {
api_key : 'VROoooooooooooooooooooooooooooooooooooooooooooooooooPPPDP',
map_field : '',
map_container : 'example-map',
map_lat : 32.646168604059156,
map_lng : -16.915340423583984,
map_zoom : 14,
pin_lat : 32.646168604059156,
pin_lng : -16.915340423583984,
address_input : '',
address_submit : ''
},
options : {
ui_zoom : '1',
ui_scale : '1',
ui_overview : '1',
ui_map_type : '',
map_drag : '1',
map_click_zoom : '1',
map_scroll_zoom : '1',
pin_drag : '1',
background : '',
map_types : ''
}
});
[removed]
</div>
</body>
</html>What is going on here?
16 years ago
it’s look like you have some div style conflict. Did you try to add height style manully to .sl-google-map or #example-map?
16 years ago
Thanks! That did the trick.