0

What approaches are there for hiding Google's Static Maps on wider viewports, while displaying the dynamic Google JavaScript Maps instead?

It is common to build mobile-first websites, enhanced through CSS media queries for larger viewports.

When it comes to maps, static ones are arguably better for mobile UX (smartphones too). But you might decide that for larger viewports (computer displays and even tablets), the interactive/dynamic maps may be better for your users — depending on the purpose of the website.

What criteria are important to use to choose the best approach to combine the two? What should one be careful with?



I have not been able to find a conclusive answer, but here is my research so far:

One author suggested in 2010 that a fallback option is built into the JavaScipt API:

The basic premise here is that the API replaces the content of the map_canvas container with the map display. So, why not just add some fallback content to that container?

Modifying his code, I can insert an image inside the div that will become the JS-enabled Google Maps. In this case, the image is from Static Maps V2:

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%">
    <img src="http://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400&sensor=false">
  </div>
</body>

However, that does not disable JavaScript Maps on smartphones — simply provides a fallback for devices without JS.

Another author (also in 2010) also suggests to use a single line of jQuery to hide that image — the updates code for V3 would likely be:

$('#map_canvas img').remove();

But that also does nothing to disable Google's JS Maps on narrow-viewport devices (smartphones).

Both of those guides are from 2010 — likely using V2 of Google Maps? (I even came across another author's guide from 2009 using some clever regex, but he is yet to update to "the new way [V3] of doing things".)

Baumr
  • 6,124
  • 14
  • 37
  • 63

1 Answers1

1

The second approach(hiding the image) is absolutely useless, the image will be replaced anyway when the map loads.

The first approach looks good, all you need is a condition at the start of initialize(), where you filter "small" devices and leave the function. It may look like that:

if(Math.min(screen.width,screen.height)<768){
        return;
}
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Thank you! Interesting — so your suggested code is basically a 'media query' via JS? Will it work in older browsers? – Baumr Jan 06 '13 at 15:52
  • 1
    screen.width/height has been introduced in JS Version 1.2(1997) , it will work in any browser that is supported by the maps-API . – Dr.Molle Jan 06 '13 at 16:06
  • Since 1997 means: [basically on every browser](http://en.wikipedia.org/wiki/JavaScript#Versions), thanks! **I don't see any drawbacks with your method**, so I'll implement it and report back – Baumr Jan 06 '13 at 16:12