CODEWITHSUNDEEP
jqueryhtmlgoogle-maps
tbowden
tbowden

Reputation: 1058

Centre Google Maps on Responsive Website

I am using a Google Map on my website through an API. It works fine however I have two additional bits of code. One to make it responsive and one to keep it centred. For some reason I can't integrate both bits of code at the same time.

Here's the current working code (with responsive part):

<script>
    var map;
jQuery(function($) {
    $(document).ready(function() {
        var latlng = new google.maps.LatLng(-40.893591, 132.023621);
        var myOptions = {
            zoom: 5,
            center: latlng,
            disableDefaultUI: true,
            draggable: false,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false,
            scaleControl: false,
           };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        // init Height
        $('#map_canvas').height($( window ).height());
        });
        // On Resize
        $(window).resize(function(){ 
        $('#map_canvas').height($( window ).height());});

      var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});

});
    </script>

Thanks in advance.

Upvotes: 0

Views: 63

Answers (1)

tbowden
tbowden

Reputation: 1058

Found a solution: 

<script>
  function initMap() {
    var lnglat = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: lnglat,
      disableDefaultUI: true,
      draggable: false,
      scrollwheel: false,
      navigationControl: false,
      mapTypeControl: false,
      scaleControl: false,
    });

      var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});

  }
    </script>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_ID&callback=initMap">
</script>

Upvotes: 1

Related Questions