11 Replies Latest reply on Aug 8, 2017 2:47 PM by user19752

    Google maps to fit container

    barand

      Hello Filemaker users,

       

      I am trying to get google maps to fit the web viewer. I have tried many things to some of the options shown on google but I am unsuccesful to make google maps fit the size of its container. What do I have to change in the code?

       

      <!DOCTYPE html>
      <html>
      <head>
       
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
       
      <title>Google Maps Multiple Markers</title>
       
      <script src="http://maps.google.com/maps/api/js?sensor=false"
        
      type="text/javascript"></script>
      </head>
      <body>
       
      <div id="map" style="width: 500px; height: 400px;"></div>

       
      <script type="text/javascript">
        
      var locations = [
        
      ['Bondi Beach', -33.890542, 151.274856, 4],
        
      ['Coogee Beach', -33.923036, 151.259052, 5],
        
      ['Cronulla Beach', -34.028249, 151.157507, 3],
        
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        
      ['Maroubra Beach', -33.950198, 151.259302, 1]
        
      ];

        
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom
      : 10,
        center
      : new google.maps.LatLng(-33.92, 151.25),
        mapTypeId
      : google.maps.MapTypeId.ROADMAP
        
      });

        
      var infowindow = new google.maps.InfoWindow();

        
      var marker, i;

        
      for (i = 0; i < locations.length; i++) { 
        marker
      = new google.maps.Marker({
        position
      : new google.maps.LatLng(locations[i][1], locations[i][2]),
        map
      : map
        
      });

        google
      .maps.event.addListener(marker, 'click', (function(marker, i) {
        
      return function() {
        infowindow
      .setContent(locations[i][0]);
        infowindow
      .open(map, marker);
        
      }
        
      })(marker, i));
        
      }
       
      </script>
      </body>
      </html>

       

      Kind regards,


      Baran

        • 1. Re: Google maps to fit container
          jormond

          Without testing it myself, it looks like you need to change:

          <div id="map" style="width: 500px; height: 400px;"></div>

          to

          <div id="map" style="width: 100%; height: 100%;"></div>

           

           

          If that doesn't work straight out of the box, take a look at app.works sample file in their downloads. There are definitely many samples around about how to approach this.

          Downloads – AppWorks

          • 2. Re: Google maps to fit container
            barand

            That is unfortunately not the answer. Anyone else that has the answer?

             

            I will also check the link..

            • 3. Re: Google maps to fit container
              jormond

              A working version is in the demo file on the site I linked to. You will have to look at what you are doing vs what they are doing. That will give you clue as to what the problem is.

               

              The other option is to use what they are doing, and change your approach. It's a bit tricky to diagnose without actually seeing the rest of the architecture and scripts, etc.

              • 4. Re: Google maps to fit container
                Jade

                Barand,

                 

                Try adding the following line after <head>

                 

                <meta name=\"viewport\" content=\"initial-scale=1.0\" />

                 

                 

                 

                 

                Edit: corrected </head> to <head>

                • 5. Re: Google maps to fit container
                  user19752

                  It looks there need 100% (or some width/height) on both <html> and <body> if you use 100% on <div>

                  (and need adjust margin / border / padding to avoid scroll bars)

                  • 6. Re: Google maps to fit container
                    jormond

                    I think you are right. If the OP doesn't get it figured out I can look at it more. But honestly, I've usually just copied it out of somewhere that was already working.

                    • 7. Re: Google maps to fit container
                      Menno

                      According to the google-documentation, the map-dimensions should be set in the header. After changing that I could not get your example to work, so I pasted your coordinates into an example html fro the google-website and that fills the webviewer:

                       

                      <!DOCTYPE html>

                      <html>

                        <head>

                          <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

                          <meta charset="utf-8">

                          <title>Simple markers</title>

                          <style>

                            /* Always set the map height explicitly to define the size of the div

                             * element that contains the map. */

                            #map {

                              height: 100%;

                            }

                            /* Optional: Makes the sample page fill the window. */

                            html, body {

                              height: 100%;

                              margin: 0;

                              padding: 0;

                            }

                          </style>

                        </head>

                        <body>

                          <div id="map"></div>

                          <script>

                      function initMap() {

                        var map = new google.maps.Map(document.getElementById('map'), {

                                          zoom: 11,

                                          center: { lat: -33.923036, lng: 151.259052 } });

                        var marker = new google.maps.Marker({

                                          position: { lat: -33.890542, lng: 151.274856 },

                                          map: map,

                                          title: 'Bondi beach' });         

                        var marker = new google.maps.Marker({

                                          position: { lat: -33.923036, lng: 151.259052 },

                                          map: map,

                                          title: 'Coogee beach' });

                        var marker = new google.maps.Marker({

                                          position: { lat: -34.028249, lng: 151.157507 },

                                          map: map, 

                                          title: 'Cronulla beach' });

                        var marker = new google.maps.Marker({

                                          position: { lat: -33.80010128657071, lng: 151.28747820854187 },

                                          map: map,

                                          title: 'Manly beach' });

                        var marker = new google.maps.Marker({

                                          position: { lat: -33.950198, lng: 151.259302 },

                                          map: map,

                                          title: 'Maroubra beach' });

                      }

                          </script>

                          <script async defer

                          src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">

                          </script>

                        </body>

                      </html>

                       

                      You may or may have not to enter your API_KEY directly behind "key=" otherwise you may get the "OOPS something went wrong...."

                      3 of 3 people found this helpful
                      • 8. Re: Google maps to fit container
                        sam_oda

                        Hi,

                        How about his?

                        I changed(added) red color code.

                        And remove some strange characters (BOM?) in the code

                         

                        Screen Shot 2017-08-08 at 19.58.42.png

                         

                        Here is my code.(Paste this in the web viewer definition)

                         

                        data:text/html,<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title>Google Maps Multiple Markers</title><script src="http://maps.google.com/maps/api/js?sensor=false"

                           type="text/javascript"></script>

                           <style>*{margin:0;}</style>

                        </head>

                        <body><div id="map" style="width: 100vw; height:100vh;"></div>

                         

                          <script type="text/javascript">

                           var locations = [

                           ['Bondi Beach', -33.890542, 151.274856, 4],

                           ['Coogee Beach', -33.923036, 151.259052, 5],

                           ['Cronulla Beach', -34.028249, 151.157507, 3],

                           ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

                           ['Maroubra Beach', -33.950198, 151.259302, 1]

                           ];

                         

                           var map = new google.maps.Map(document.getElementById('map'), {

                          zoom: 10,

                          center: new google.maps.LatLng(-33.92, 151.25),

                          mapTypeId: google.maps.MapTypeId.ROADMAP

                           });

                         

                           var infowindow = new google.maps.InfoWindow();

                         

                           var marker, i;

                         

                           for (i = 0; i < locations.length; i++) { 

                          marker = new google.maps.Marker({

                          position: new google.maps.LatLng(locations[i][1], locations[i][2]),

                          map: map

                           });

                         

                          google.maps.event.addListener(marker, 'click', (function(marker, i) {

                           return function() {

                          infowindow.setContent(locations[i][0]);

                          infowindow.open(map, marker);

                           }

                           })(marker, i));

                           }

                          </script>

                        </body>

                        </html>

                        3 of 3 people found this helpful
                        • 9. Re: Google maps to fit container
                          bhamm@mac.com

                          user19752 is correct. This is how my all of my maps are set up.

                           

                          body, html {
                          height: 100%; width: 100%; margin-top: 0px; margin-left: 0px;
                          }
                          #map {
                          width: 100%; height: 100%;
                          }
                          1 of 1 people found this helpful
                          • 10. Re: Google maps to fit container
                            barand

                            I am back! The solution sam_oda provided helped me the best because my knowledge of JavaScript is very limited and his solution was a "small" adjustment to the html code that I am using.

                            • 11. Re: Google maps to fit container
                              user19752

                              Using vw / vh as the unit may be the best way for such case.

                              1 of 1 people found this helpful