Dynamic Google Map Width
Monday, March 26th, 2012
Problem
I’m building a skatepark finder mobile web app. I’m using Google Distance Matrix API to get the distance between the user’s location and the location of the nearest skatepark. Because of this little disclaimer “Use of the service in an application that doesn’t display a Google map is prohibited.“, I need to show a map in the app.
Since this is for mobile web, I didn’t want to display an interactive map because reducing HTTP requests and especially requests to 3rd party services is a mobile development best practice. Also, I can just create a button that links to Google maps and let the user use an interactive map however they see fit.
To minimize the service requests for the map, I decided to go with a static map. The problem with this is the limitations in the request URL. The request URL looks something like this:
https://maps.googleapis.com/maps/api/staticmap?center=39.7391536,-104.9847034&zoom=14&size=320x180&sensor=true
Notice that the size parameter is a static number and it’s required, so you have to put something in there. I don’t know if the user is using a smartphone, tablet or desktop, so I want the map to stretch the width of the application. Otherwise, you get something looking like this in landscape view on an iPhone:
Posted in Code, Design, Development, jQuery, Mobile | 1 Comment »