Google Map Sample

Plain Google Map

Uses v3 of the Google Maps API and plain JavaScript to render a map on the page.

What you will need

• Learn the basics of DOM manipulation and about the module pattern.
• Learn the basics of the GoogleMaps API.

Sample Plain Map

This sample implementation is based on the developer documentation.

Include the Libraries

Typically JavaScript libraries should be loaded at the bottom of the page to improve the perceived speed of the site. I usually include them immediately before the closing body tag.

<div id="google-map" class="container"></div> ... <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="myCustomCode.js"></script>

Make sure to include the Google Maps API before your custom code file.

Custom Code

var Sample = {}; Sample.GMap = function() { var map, el = document.getElementById('google-map'); var defaults = { config: { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }, centralPark: { coords: { latitude: 40.782686, longitude: -73.96524 } } }; function createMap(position) { var point = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); map = new google.maps.Map(el, defaults.config).setCenter(point); } function _init() { createMap(defaults.centralPark); } return { init: _init } }(); // Initialize the class after the DOM is ready window.onload = function() { Sample.GMap.init() }