4 Replies Latest reply on Mar 13, 2017 5:42 AM by MarcSpo

    embedded html div with google map and size 0

    MarcSpo

      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.

       

                                      
           

       

       

      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.

       

      Unbenannt.JPG

       

      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

        • 1. Re: embedded html div with google map and size 0
          Mylenium Most Valuable Participant

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

           

          Mylenium

          • 2. Re: embedded html div with google map and size 0
            MarcSpo Level 1

            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

            • 3. Re: embedded html div with google map and size 0
              Pavel Homeriki Adobe Community Professional

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

              • 4. Re: embedded html div with google map and size 0
                MarcSpo Level 1

                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>