How to Create a Google Map Object with the Maps JavaScript API
See JavaScript: Tips and Tricks for similar articles.To use the Google Maps JavaScript API, you first need to create an instance of the Google Maps object. Here's how:
- Start with a basic HTML5 template, like this:
- Add the Google Maps code by using a
script
tag right above<body>
. ReplaceYOUR_API_KEY
with the API key that you got from Google. - Create an empty div element above the
script
element and give it anid
of "map". This is where your map will be displayed. - Create a
script
element in thehead
of your page and put function calledinitMap
inside it. - Create a
mapOptions
object and set values for the properties you want to modify. You can find a list of available properties here: https://developers.google.com/maps/documentation/javascript/reference#MapOptions. In this example, we'll specify values for thezoom
property, thecenter
property, and themapTypeId
property. - Create an instance of
google.maps.Map
and pass in two parameters:- The location where the map should be rendered in your document.
- The
mapOptions
object
- Use CSS to style the
div
element containing the map: - Check your work. Your finished HTML document should look like this:
- Open your web page in a browser to see the results.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Basic Map</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Basic Map</title>
</head>
<body>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Basic Map</title>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
function initMap() {
}
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(44, -110),
mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Basic Map</title>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
function initMap() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(44, -110),
mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
</script>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Related Articles
- Node.js and Node Package Manager (npm)
- How to Install Node.js on a Mac
- How to Run a Node.js Application on Windows
- How to Send and Receive JSON Data to and from the Server
- How to Run a Node.js Application on a Mac
- How to Open Google Chrome's JavaScript Console
- How to Create a Google Map Object with the Maps JavaScript API (this article)
- Why JavaScript is called JavaScript
- How to Learn JavaScript on Your Own
- How to Install Node.js on Windows