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 to the end. If you found value in this, kindly recommend (by clicking the share buttons below) so other people can learn too!
Is there a Howto you'd love to learn? We'll be glad to create it for you, let us know in the comments. Cheers!

CONTACT US

We're always here. You can send us an email and we'll get back to you, asap.

Sending

© 2015 - 2018 Howtos.ng

or

Log in with your credentials

Forgot your details?