Solved

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

Posted on 2015-02-09
16
197 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 30

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 30

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
 

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 30

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 30

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 30

Expert Comment

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

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 30

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 30

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now