How to create a Google Map in your Web page

Learn how to add a Google Map to a web page.


My First Google Map


1.   Start with a simple basic web page.

Add a <div> element where you want the map to display:

CODE:

<!DOCTYPE html>
<html>
<body><h1>My First Google Map</h1><div id=”map”>My map will go here</div></body>
<html>


2.  Set the size of the map:

CODE:

<div id=”map” style=”width:400px;height:400px;background:yellow“>

3.  Create a JavaScript function to display the map:

CODE:

function myMap() {
var mapCanvas = document.getElementById(“map”);
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.2),
zoom: 10
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}

4. Variables

The mapCanvas variable is the map’s HTML element.

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 google.maps.Map object is created with mapCanvas and mapOptions as parameters.


Add the Google API

The functionality of the map is provided by a JavaScript library located at Google:

CODE:

<script src=”https://maps.googleapis.com/maps/api/js?callback=myMap”></script>

Leave a Reply

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

WordPress spam blocked by CleanTalk.