Google Maps in JSFiddle

JsFiddle is a great tool to use for experiments with Google Maps. If you want to see the map displayed in the output frame, there are a few tweaks you need to know about, which I will cover here and share in a working example. I started with an example from the excellent developer resources Google provides.

Note: Using Google Maps API V3

Tweak One: The Google API Library include:

The include must be modified from the following to work in JSFiddle:

https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true

&dummy=.js is a workaround JSFiddle uses to recognize that this is a JavaScript library when it doesn’t end with a .js suffix – paste this in instead of the default URI:

https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&dummy=.js

Tweak Two: The Google examples provide a initialization call that does not work in JSFiddle:

google.maps.event.addDomListener(window, 'load', initialize);

replace it with this:

initialize();

(Not Really a Tweak) You must have the CSS to see the map container div:

The html and body entries are required, the map div can be set to pixel values if you want.

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas{
width:100%;
height:100%;
}

Example

below requires your permission to display your current location in the map. Location information does not go to this website, it goes directly to Google Maps.