jquerygoogle-mapsjquery-gmap3

Map on page using GMAP3 is loading zoomed way out, and only zooms in after clicking the tab button a second time


I inherited working on this site so I'm not 100% on some variables there may be, heres what I know. Up until recently, it did work fine.

The site is using the GMAP3 5.1.1 plugin, with jQuery v1.8.2

the link is here:http://www.wcsmith.com/dc-apartments/

When click the Map View button, the map loads zoomed out. When clicking it again, it shows zoomed in.

I tried to a couple window.resize functions to know avail.

My next step is to copy the site locally and really dive in but thought someone else may have had this problem...


Solution

  • on gmap3.min.js line 2653 you got something like this:

       $('#gmap_view_wrapper').gmap3({
              map: {
                options: {
                  mapTypeId: "RoadMap",
                  zoomControl: true,
                  panControl: false,
                  streetViewControl: false,
                  mapTypeControlOptions: {
                    mapTypeIds: ["RoadMap", google.maps.MapTypeId.SATELLITE]
                  }
                }
              },
    

    add zoom desired:

       $('#gmap_view_wrapper').gmap3({
              map: {
                options: {
                  mapTypeId: "RoadMap",
                  zoomControl: true,
                  zoom: 4,
                  panControl: false,
                  streetViewControl: false,
                  mapTypeControlOptions: {
                    mapTypeIds: ["RoadMap", google.maps.MapTypeId.SATELLITE]
                  }
                }
              },
    

    change values from 1 to 13 if I recall good

    EDIT:

    on a second look, its the bounds part what's messing it up. same file the very last part:

    var bounds = new google.maps.LatLngBounds(
             new google.maps.LatLng((points[0].lat * 0.99999), points[0].lng ),
             new google.maps.LatLng((points[0].lat * 1.00008), points[0].lng));
            for(var i = 1; i < points.length; i++) bounds.extend(new google.maps.LatLng(points[i].lat, points[i].lng));
            gm = $('#gmap_view_wrapper').gmap3('get');
            gm.fitBounds(bounds);
      }
    }
    

    when removing that part map loads normally, but out of bounds, so if you tweak that part of the code, you'll get where you want. Good luck!