Solved

How do I resize a google map on a responsive site?

Posted on 2015-02-09
16
224 Views
Last Modified: 2015-02-12
Hi
I have a map appearing on my site and I would like to resize it based on the device being used. I also want it to resize if the e.g. phone is rotated from portrait to landscape.

Can you help?
thanks
Nick
0
Comment
Question by:lz7cjc
  • 8
  • 8
16 Comments
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40598642
I suppoe your map is appearing in a div called map-canvas-big, as from Google snippet: is it correct?
If so you just have to et the map-canvas-big properties width and height as follows

#map-canvas-big{
    width: 100%;
    height: 600px; // this can change depending onb your needs
}

Open in new window

Then, you can use media-queries to change the height accordingly to the resolution.
0
 

Author Comment

by:lz7cjc
ID: 40598716
thanks - i understand how to set the map dimension as you have shown with the style sheet properties. I was hoping to understand how to dynamically change those settings based on the device and orientation.
I imagine that is done by "media-queries to change the height accordingly to the resolution." Could you explain that in more detail, please? That is the bit I am stuck on!

thanks
0
 
LVL 31

Accepted Solution

by:
Marco Gasi earned 500 total points
ID: 40598733
For instance, with the following rules:

@media(min-width:320px) and (max-width:479px){
	#map-canvas-big{
		height: 200px;
	}
}
@media(min-width:480px) and (max-width:589px){
	#map-canvas-big{
		height: 200px;
	}
}

Open in new window

If you use Firefox or Chrome, you can install Web Developer Toolbar. Among its functions you find the Resize menu which lets you see how your website is rendered at different reolutions. An incredibly useful tool nowadays, and you can even add new resolutions to check!
With this tool you can adjust the height in real-time using Firebug or the Chrome Developer tools before to store your changes in your css.
Hope this is enough, but feel free to ask if you need some more explanation :-)
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:lz7cjc
ID: 40598749
thanks Marco
I am just finishing up on another bit of code at the moment. Hope to get onto this tomorrow so will let you know then
all the best
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40598757
No problem at all. Have a nice day.
0
 

Author Comment

by:lz7cjc
ID: 40600352
ok, so I have added this to my page:
 <style>
    @media(min-width:320px) and (max-width:479px){
      #map{
            height: 200px;
            width: 320px;
      }
}
    @media(min-width:480px) and (max-width:589px){
      #map{
            height: 400px;
        width: 480;
        }

    @media(min-width:600px) {
      #map{
            height: 400px;
        width: 600;
        }
}
</style>
          <div id="map"></div>

but the map size doesn't change -what have I done wrong?

thanks
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40600365
Oops I think to have misunderstood your wishes: do you want the map itself resize? Street name font, streets, buildings and so on? If o, I don't think it is possible and franckly I don't think it would be nice: in a smartphone a resized map would be probably unreadable and unusable.
I'm sorry if I wasted your time: my solution only resize the div containing the map keeping the map itself correctly centered.
Cheers
0
 

Author Comment

by:lz7cjc
ID: 40600372
the map is vector based i believe so it shouldn't be a problem but thanks anyway
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40600378
I'mdoing some search about: I'll post here the results
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40600398
A quick Google tour made me think I was right: all samples I found resize the map container, that i the map-canvas or map-canvas-big, but not the map itself wich remains identical.
0
 

Author Comment

by:lz7cjc
ID: 40600406
thanks am doing the same
I found this

        <script>
    function resizeBootstrapMap() {
    var mapParentWidth = $('#map').width();
    $('#map').width(mapParentWidth);
    $('#map').height(3 * mapParentWidth / 4);
    google.maps.event.trigger($('#map'resize');
    console.log(mapParentWidth);
}

// resize the map whenever the window resizes
$(window).resize(resizeBootstrapMap);</script>
     <style>

    #map {
        height: 500px;
        width: 800px;
        }

    </style>

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

Open in new window


but can't get it to trigger
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40600417
Accordingly to Google API v3 reference it should be triggered this way:
  $(window).resize(function() {
    // (the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");
  });

Open in new window

But in my test it just got the same result, or better it had no result at all, since only the map container was resized...
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40600421
For instance, you can take a look at this: http://webomnizz.com/demo/make-responsive-google-map/
At a glance, it looks working but it's only an illusion due probably to the fact that the map disappears when you resize the window. Look at the Sirsi location in the right-bottom corner: when you resize the map, it goes out of the map scope.
I'm not able to find at least one working example of a responsive map.
0
 

Author Comment

by:lz7cjc
ID: 40605362
ok thanks for your efforts
0
 

Author Comment

by:lz7cjc
ID: 40605761
Hi - having taken another look at this I would be happy to just resize the div. Can you confirm whether this is correct?
<script>
@media(min-width:320px) and (max-width:479px){
      #map-canvas-big{
            height: 200px;
      }
}
@media(min-width:480px) and (max-width:589px){
      #map-canvas-big{
            height: 200px;
      }
}

</script>

It doesn't change the div on my page as i increase and decrease the device display area

thanks
0
 

Author Closing Comment

by:lz7cjc
ID: 40605809
my mistake - this works well
thanks
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Mouse event to control image and transparency. 4 33
Hide Table in merge 3 30
Html Newline 7 20
Responsive Font Size 6 26
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question