-1

I'm building a web-based application that uses Google Maps. On the desktop version I plan on showing the map which shows markers for each object that is listed on the page. However, if the screen loads and the device is an iPhone for example then I don't want to show the map. The map can be hidden with CSS like so...

@media only screen and (max-width:800px){
  #map{display:none}
}

However, if the screen is smaller then I don't want the data to be loaded (since it won't be displayed). Is there any way I can stop the data from loading if the device is too small using Javascript/CSS?

jayt
  • 758
  • 1
  • 14
  • 32

2 Answers2

1

What about you do an IF to see if the screen is smaller that 800px, if it is smaller then you skip initMap() (or the name of the callback Function when you load the api)

this can help you in how to get widths Get the size of the screen, current web page and browser window

betofarina
  • 1,066
  • 7
  • 9
0

You could wrap the ajax part in a conditional, like this:

var w = 800;
if ( screen.width >= w) {     
    // load ajax
}
else { 
    alert("small screen, won't load map"); 
}
user2314737
  • 27,088
  • 20
  • 102
  • 114