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