embedded html div with google map and size 0

Report · Mar 11, 2017

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

Report · Mar 12, 2017

Simply leave out the redundant html and body CSS definitions. They interfere with Muse's own do-dads.

Mylenium

Report · Mar 13, 2017

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)

#myownmap { width:100%; height: 200px }

</style>

works fine - but the height will be fixed to 200px

(b)

#myownmap { width:100%; height: 100% }

</style>

Does not work - produces div with 0px height

(c)

#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

Report · Mar 13, 2017

Provide full source code, I think, only in this case, experts will be able to help you.

Report · Mar 13, 2017

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:

src="https://maps.googleapis.com/maps/api/js?key=xxxxx">

</script>

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>

Section for the object - insert html :

#myownmap { width:100%; height: 100% }

</style>

$(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>

window.onload = function () {

initialize();

}

</script>

Adobe Community

embedded html div with google map and size 0