Howto

How To Create A Google Map Using Javascript, Html, And Css

How To Create A Google Map Using Javascript, Html, And Css

Image result for what is google map

What is Google Map?

Google Maps is a desktop web mapping service developed by Google. It offers satellite imagery, street maps, 360° panoramic views of streets (Street View), real-time traffic conditions (Google Traffic), and route planning for traveling by foot, car, bicycle (inbeta), or public transportation.

Google Maps began as a C++ desktop program designed by Lars and Jens Eilstrup Rasmussen at Where 2 Technologies. In October 2004, the company was acquired by Google, which converted it into a web application. After additional acquisitions of a geospatial data visualization company and a realtime traffic analyzer, Google Maps was launched in February 2005.

The service’s front end utilizes JavaScript, XML, and Ajax. Google Maps offers an API that allows maps to be embedded on third-party websites,[2]and offers a locator for urban businesses and other organizations in numerous countries around the world. Google Map Maker allows users to collaboratively expand and update the service’s mapping worldwide.

Steps On How To Create A Google Map Using Javascript, Html, And Css

 

Step 1 ADD HTML

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

 

<h1>My First Google Map</h1>

 

<div id=”map” style=”width:400px;height:400px;background:yellow”>My map will go here</div>

 

</body>

</html>

 

 

STEP2 ADD Javascipt

 

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);

}

 

 


P.S. Thanks for reading this far! If you found value in this, we’d really appreciate it if you recommend this post (by clicking the share buttons) so other people can learn!

Found this Howto helpful? Subscribe for more!

You may also learn:

Comments
To Top