2

I am trying to create a responsive Google Map using Bootstrap.Here is a sample of what I did till now . What I need to do is setting a method to control the map's zoom level based on the windows size.For example as when as user re-size the map the map start zooming out and zooming in on the other way! Can you please let me know if this is possible and how I can do it?

var map;
var panorama;
jQuery(function($) {
$(document).ready(function() {
    var latlng = new google.maps.LatLng(49.241943,-122.889318);
    var myOptions = {
        zoom: 18,
        center: latlng,
        panControl: true,
        zoomControl: true,
        zoomControlOptions: {
                              style: google.maps.ZoomControlStyle.SMALL
                            },
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
       };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    });
 });
madth3
  • 7,275
  • 12
  • 50
  • 74
Mona Coder
  • 6,212
  • 18
  • 66
  • 128
  • You want to keep the same viewport (area of the map) as the map div is resized? Note that zoom levels are discrete, so there will be jumps as the zoom level changes. – geocodezip Jun 08 '13 at 15:49
  • thanks geocodezip, to be honest I am not worry about the jumps since this is going to affect on only mobile and tablets sizes. I fact I am not interested to do this in pixel by pixel format and it is more like media queries size for tablets and smart phones. so maybe 3 or 4 different zoom levels. thanks again – Mona Coder Jun 08 '13 at 17:15

1 Answers1

2

You can change the zoom level of the map with this:

var mq = window.matchMedia( "(min-width: 768px)" );
if (mq.matches) {
    map.setZoom(6);
}
ivarni
  • 17,658
  • 17
  • 76
  • 92
ebargom
  • 21
  • 2