Google Maps in JSFiddle

google-maps-icon

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.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha loading...

This site uses Akismet to reduce spam. Learn how your comment data is processed.