Copy link to clipboard
Copied
Hello,
I have some simple javascript code, which displays a google map fullscreen and puts some markers on it - retrieved from a json file.
This code works fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=xxx">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(58, 16),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { width:100%; height: 100% }
</style>
<div id="map_canvas"></div>
<script type="text/javascript">
// https://coderwall.com/p/hojgtq/auto-center-and-auto-zoom-a-google-map
// $(document).ready(function() {
$(window).bind("load", function() {
$.getJSON("data/path_markers.js", function(json1) {
bounds = new google.maps.LatLngBounds();
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.title
});
bounds.extend(latLng)
marker.setMap(map);
});
map.fitBounds(bounds);
map.panToBounds(bounds);
});
});
</script>
<script type="text/javascript">
window.onload = function () {
initialize();
}
</script>
</html>
I am trying to embed this map into Muse now.
It works somewhat.
I place the <head> part into html for <head> and then create an object - insert html in muse with size 790px x 200px
The critical part seems to be here:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { width:100%; height: 100% }
</style>
<div id="map_canvas"></div>
I was hoping, that the google map will fill the rectangle in muse with the specified size (790x200).
However, the page is blank. Firefox firebug tells me, that the div map_canvas has a size of 790x0.
Screenshot shows firebug.
If I specify a certain size
#map_canvas { width: 100px; height: 50px }
the map displays in the browser.
How is it possible to make the google automatically use the full rectangle?
Would it then be possible, that the map automatically resizes with browser windows changes?
This was my final goal: to beautify the webpage with muse and make it usable on tablet, phones and pc browser - displaying always some variations of the google map.
Thanks for any help.
Regards,
Marc
Copy link to clipboard
Copied
Simply leave out the redundant html and body CSS definitions. They interfere with Muse's own do-dads.
Mylenium
Copy link to clipboard
Copied
Hi Mylenium,
yes, I tried that already, but I still end up with a div with vertical size "0".
I played around a bit with these settings and removed the html / body css definitions.
I changed also the div id to "myownmap" to rule out the possibility, that "map_canvas" is already used somewhere else.
Test Cases:
(a)
<style type="text/css">
#myownmap { width:100%; height: 200px }
</style>
works fine - but the height will be fixed to 200px
(b)
<style type="text/css">
#myownmap { width:100%; height: 100% }
</style>
Does not work - produces div with 0px height
(c)
<style type="text/css">
#myownmap { width:100% }
</style>
Does not work either - produces div with 0px height
So it got a bit better.
Would it be possible to make the height change automatically / dynamically?
Marc
Copy link to clipboard
Copied
Provide full source code, I think, only in this case, experts will be able to help you.
Copy link to clipboard
Copied
Right, full source code.
I pasted it into original question, but somehow this board software did not display it.
In this editor, I do not see the option to format code...
Trying again here:
Head section:
<meta charset="utf-8" name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=xxxxx">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(58, 16),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("myownmap"),
mapOptions);
}
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js">
</script>
Section for the object - insert html :
<style type="text/css">
#myownmap { width:100%; height: 100% }
</style>
<div id="myownmap"></div>
<script type="text/javascript">
$(window).bind("load", function() {
$.getJSON("data/path.json", function(json1) {
bounds = new google.maps.LatLngBounds();
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.title
});
bounds.extend(latLng)
marker.setMap(map);
});
map.fitBounds(bounds);
map.panToBounds(bounds);
});
});
</script>
<script type="text/javascript">
window.onload = function () {
initialize();
}
</script>