Customized Google maps pro tips

Customized Google maps pro tips

Customized Google maps pro tips

Google Maps Javascript V3 API has been around for a while – it’s pretty great and easy to customize right? That may be, however I keep noticing some pesky implementation around. Most have to do with mobile or retina screen issues.

What’s up with that “scroll-hole” you can get stuck in when the map is full-width and longer than the device window and you keep panning around the map, rather than scrolling down the rest of the site? Well it’s not one of the most common settings in the documentation, but it is simple. When you initialize your map, just add this one setting: scrollwheel: false,

The other common oversight, is those custom map markers. You know the pretty icons you make to brand the map (instead of those fugly off-red stock ones). You create your pretty retina-sized image so it looks great on the latest devices, but it render huge on the map. Well you can set it to the right size in your image settings when you add the marker image to your map (replace WIDTH and HEIGHT with the sizes you’d like – which is half your original image’s – without the trailing “px”).

var myMapImage = new google.maps.MarkerImage("images/marker-icon.png", null, null, null, new google.maps.Size(WIDTH,HEIGHT));

Finally, a lot of headaches can be solved by manually forcing a specific version of the maps API when you include the JS resource. This is something to consider when there is a full version upgrade of the API and new updates may “break” certain features and techniques until they patch it in their next release. Just include the version in the javascript call to the google map source.

<script src=""></script>

Hopefully this helps out, ’cause you want your maps to be a help not a hindrance!

1 Comment

  • Tony Douglas March 5, 2016 at 2:57 am

    Nice tip thank you. That was driving me crazy.

Leave a Reply

Providence medicinsk center kansas city Trinity apotek carrollton tx