Lessons
HTML
- HTML HOME
- HTML Introduction
- HTML Editors
- HTML Basic
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Styles
- HTML Formatting
- HTML Quotations
- HTML Comments
- HTML Colors
- HTML CSS
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Blocks
- HTML Classes
- HTML Id
- HTML Iframes
- HTML JavaScript
- HTML File Paths
- HTML Head
- HTML Layout
- HTML Responsive
- HTML Computercode
- HTML Entities
- HTML Symbols
- HTML Charset
- HTML URL Encode
- HTML XHTML
HTML5
HTML Graphics
HTML Media
HTML APIs
HTML Examples
HTML References
- HTML Tag List
- HTML Attributes
- HTML Events
- HTML Colors
- HTML Canvas
- HTML Audio/Video
- HTML Doctypes
- HTML Character Sets
- HTML URL Encode
- HTML Lang Codes
- HTML Messages
- HTML Methods
- PX to Em Converter
- Keyboard Shortcuts
HTML Forms
HTML Google Maps
HTML Google Maps
Google Maps allows you to display maps on your web page:
Use ctrl + scroll to zoom the map
A Basic Web Page
To demonstrate how to add a Google Map to a web page, we will use a basic HTML page:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map">My map will go here</div>
</body>
<html>Set the Map Size
Set the size of the map:
Example
<div id="map" style="width:400px;height:400px">Create a Function to Set The Map Properties
This example defines a Google Map centered in London, England:
Example
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}Example Explained
The mapOptions variable defines the properties for the map.
The center property specifies where to center the map (using latitude and longitude coordinates).
The zoom property specifies the zoom level for the map (try to experiment with the zoom level).
The mapTypeId property specifies the map type to display. The following map types are supported: ROADMAP, SATELLITE, HYBRID, and TERRAIN.
The line: var map=new google.maps.Map(document.getElementById("map"), mapOptions); creates a new map inside the <div> element with id="map", using the parameters that are passed (mapOptions).
Add the Google Maps API
Finally, show the map on the page!
The functionality of the map is provided by a JavaScript library located at Google. Add a script to refer to the Google Maps API with a callback to the myMap function:
Example
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>Go to our Google Maps Tutorial to learn more about Google Maps.