Responsive Design Using Google Maps

Question

I use ng-mapto display Google Maps in my Angular application, but it may very well be a difficult JS question (or even just CSS?).

How can I implement a responsive design so that my map looks good on different screen sizes, whether it’s a desktop or mobile, or just a user who resizes a browser page?

This page does this, but uses I-frames and only has a static map, while I will update my map at startup, time (tracking periodically).

I am new to all of this, so I hope that I have formulated my question in an understandable way.

Answer 1

It is very easy to customize Google Maps using CSS queries as suggested. The hardest part of adaptive maps is when you have markers, polygons, or any other elements on the map. Then you must add an event listener and control your map behavior. I created a complete Jsfiddle example to create a simple Angular.js application.

I linked the main map and event listener for markers. Another event listener also handles resizing 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);
        });

Less, but not the last, you will see a grid view of dynamically created maps and some CSS styles to control their presentation.

Full jsFiddle example

Answer 2

Good question.

- CSS div, ( http://screensiz.es/phone) API Google .

, . , , , APIv3 Google Maps , reset it.

, . - Sai Ram Sudheer , ( , ).

, , - ( map.js)

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

, . , , , center / ( , , ..)..)

// 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);
  });

, !

Answer 3

, - div

css: , , div div

   // 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;
        }
    }

   /* 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

Google V3 , , div .

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

.

, .

div (, ), .

, !