CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Roshan Kumar
Roshan Kumar

Reputation: 187

Google Map mobile view

I am using Google Map API V3 & for styling, I am using Snazzy Maps. And I am using multiple markers for multiple locations. Everything is good working fine I just want to show all the marker on the mobile screen right now one has to drag the screen with two fingers to locate the locations in mobile devices.

Is there any way to adjust zoom level for mobile devices?

Thanks in advance.

Here is my code.

function initMap() {

var usa = {lat: 38.6318618, lng: -98.318221};
var pacificOcean= new google.maps.LatLng(39.964202, -130.271346);
var atlanticOcean= new google.maps.LatLng(37.391290, -58.478699);


var alabama = {
    info: '<p class="m_title">Alabama</p>\
                <p class="m_desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>\
                <a class="m_link" href="#">Learn More</a>',
    lat: 32.806671,
    long: -86.791130
};

var utslRO = {
    info: '<p class="m_title">Utah RO</p>\
                <p class="m_desc">Lorem Ipsum</p>\
                <a class="m_link" href="#">Learn More</a>',
    lat: 40.7762691,
    long: -112.2006695
};

var utccRP = {
    info: '<p class="m_title">Utah RP</p>\
                <p class="m_desc">Lorem ipsum</p>\
                <a class="m_link" href="#">Learn More</a>',
    lat: 37.6848877,
    long: -113.1720903
};

var ohio = {
    info: '<p class="m_title">Ohio</p>\
                <p class="m_desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>\
                <a class="m_link" href="#">Learn More</a>',
    lat: 40.388783,
    long: -82.764915
};

var locations = [
  [alabama.info, alabama.lat, alabama.long, 0],
  [utslRO.info, utslRO.lat, utslRO.long, 1],
  [utccRP.info, utccRP.lat, utccRP.long, 2],
  [ohio.info, ohio.lat, ohio.long, 3],
];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4.2,
    center: usa,
    bounds: new google.maps.LatLngBounds(new google.maps.LatLng(39.964202, -130.271346), google.maps.LatLng(37.391290, -58.478699)),


        draggable: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow({


});

var marker, i;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon:'marker.png'
    });



    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i)); 
}
}

Upvotes: 1

Views: 474

Answers (1)

Roshan Kumar
Roshan Kumar

Reputation: 187

I figured it out a simple JS trick here its

function initMap() {
  var zoomVal = 4.2;
  if (window.matchMedia('(max-width: 767px)').matches) {
    zoomVal = 2.5;
  }

 var map = new google.maps.Map(document.getElementById('map'), {
    zoom: zoomVal,
    center: usa,
    mapTypeId: google.maps.MapTypeId.ROADMAP
 });
}

It works perfectly on all mobile devices.

Upvotes: 1

Related Questions