• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 598
  • Last Modified:

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

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
lz7cjc
Asked:
lz7cjc
  • 8
  • 8
1 Solution
 
Marco GasiFreelancerCommented:
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
 
lz7cjcAuthor Commented:
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
 
Marco GasiFreelancerCommented:
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
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
lz7cjcAuthor Commented:
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
 
Marco GasiFreelancerCommented:
No problem at all. Have a nice day.
0
 
lz7cjcAuthor Commented:
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
 
Marco GasiFreelancerCommented:
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
 
lz7cjcAuthor Commented:
the map is vector based i believe so it shouldn't be a problem but thanks anyway
0
 
Marco GasiFreelancerCommented:
I'mdoing some search about: I'll post here the results
0
 
Marco GasiFreelancerCommented:
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
 
lz7cjcAuthor Commented:
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
 
Marco GasiFreelancerCommented:
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
 
Marco GasiFreelancerCommented:
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
 
lz7cjcAuthor Commented:
ok thanks for your efforts
0
 
lz7cjcAuthor Commented:
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
 
lz7cjcAuthor Commented:
my mistake - this works well
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 8
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now