Responsive design with Google Maps

Question

I am using ng-map to display Google Maps in my Angular app, but his may well be a stright JS question (or even just CSS?).

How do I implement responsive design so that my map looks well on different display sizes, whether desktop/mobile, or simply just the user resizing the browser page?

This page does it, but it uses I-frames and only has a static map, whereas I will be updating my map at run-time (tracking periodically).

I am rather new to all of this, so I hope that I phrased my question understandably.

Answer 1

It's quite easy to to adjust Google Maps using CSS queries as suggested. The tricky part of responsive maps is when you have markers, polygons or any other elements on your map. Then you have to add an event listener and manipulate your map's behaviour. I have created a full example on Jsfiddle trying create a simple Angular.js app.

I have attached a main map and an event listener for the markers. Also another event listener is handling the resizing of the map.

//resize function add bounds to fit the markers
        google.maps.event.addDomListener(window, "resize", function() {
            var bound = new google.maps.LatLngBounds();
            for(var i in $scope.markers)
            {
               bound.extend($scope.markers[i].getPosition());
            }
            $scope.map.fitBounds(bound);
        });

Least but not last you will see a grid view of dynamically created maps and some CSS styles to manipulate their view.

Full example on jsFiddle

Answer 2

Good question.

You'll want to use a combination of CSS media queries to set the breakpoints for the div you want your map in (lots of screen sizes found here http://screensiz.es/phone) and the google maps API to listen for and respond to a resize event.

If you set a center for the map, that will always be the center for the window when it loads. However, if you want to listen for a window resize and then re-center the map, you can use some basic google maps APIv3 methods to calculate the center and then reset it.

Here's a gist with a working example of what it seems to be you're after. I tossed in some media queries from Sai Ram Sudheer's answer above, just so for the sake of example (the map takes up the whole screen in this case, so they're not important with that large a map).

The actual code needed to calculate and re-set the center is only a few lines (look at the map.js file)

https://gist.github.com/markthethomas/5da15a050f560cc58d4f

Here's just the code relevant to the resizing. If you want to do more with markers and bounds, you'll have to write functions to determine what center means for your program and/or parameters (ie how many markers to fit in the frame, which ones should be displayed, etc. )

// create a variable to hold center
  var center;
// calculate the center with getCenter
  function calculateCenter() {
    center = map.getCenter();
  }
// Add an event listener that calculates center on idle  
  google.maps.event.addDomListener(map, 'idle', function() {
    calculateCenter();
  });
  // Add an event listener that calculates center on resize  

  google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
  });

Hope this helps a little bit!

Answer 3

You can do this using media-queries consider your map div with class maps

css:consider you want your div to be center aligned with div width for a device of

   // show maps in a div with width 600px when you're on a big screen
//and div width of 160px in a device of 320px 
@media screen and (min-width: 1200px) {
    .maps{
        width:600px;
    }
}
@media screen and (max-width: 320px) {
        .maps{
            width:160px;
        }
    }

here is a list for common device breakpoints

   /* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

Answer 4

For google maps V3 you will want to trigger the resize event, which is for when the div with the map changes size.

google.maps.event.trigger(map, "resize");

Here is the event reference.

You can trigger the resize event when the page changes by checking this answer.

Basically you just make the div responsive to the size (maybe use percentage based sizing) and then ask the map to resize itself.

Hope this helped!