[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2015-02-09
16
Medium Priority
?
389 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…

656 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