• Home
  • Courses
    • Advance Data Science
    • Data Analysis with Python
    • Python Development Course
    • Full Stack Development
  • Self Learning
  • Labs
  • Contact
  • Blog
Have any question?
+919632807666
info@netzwerkacademy.com
Login
Netzwerk AcademyNetzwerk Academy
  • Home
  • Courses
    • Advance Data Science
    • Data Analysis with Python
    • Python Development Course
    • Full Stack Development
  • Self Learning
  • Labs
  • Contact
  • Blog

Full-stack

  • Home
  • Blog
  • Full-stack
  • Using Google Maps in HTML

Using Google Maps in HTML

  • Categories Full-stack
  • Date February 25, 2021

Google Maps is a free mapping service by Google that provides various types of geographical information. Using google maps, one can search for places or get directions, view and navigate through horizontal and vertical panoramic street level images.

Google maps provides an API using which one can customize the maps and the information displayed on them.

HTML Google Maps:

HTML Google Map is used to display maps on the web page. One can simply add a map on the basic HTML page.

  • Set the Map Size:

One can set the map size by using the following syntax:

<div id=” map” style=” width; height”>

</div>

How to create a function to set the map properties by creating a function. Here, the function is myMap (). One must use the functionalities of Google Maps API provided by a JavaScript library located at Google. Use the following script to refer to the Google Maps API with a callback to the myMap function.

  • map Options: It is a variable which defines the properties for the map.
  • Center: It specifies where to center the map (using latitude and longitude coordinates).
  • Zoom: It specifies the zoom level for the map (try to experiment with the zoom level).
  • map Type Id: It specifies the map type to display. The following map types are supported: Road map, satellite, Hybrid, and Terrain.

Steps to Load the Map on a Web page:

Follow the steps given below to load a map on a web page-

Step 1: Create an HTML page

Create a basic HTML page with head and body tags as shown below…

<!DOCTYPE html>

<html>

<head>

</head>

<body>

……………….

</body>

</html>

 

Step 2: Load the API

Load or include the Google Maps API using the script tag as shown below –

<!DOCTYPE html>

<html>

<script src = “https: //maps.googleleapis.com/maps.api/js” ></script>

</head>

<body>

……………………..

</body>

</html>

Step 3: Create the Container

To hold the map, one must create a container element, generally the <div> tag (a generic container) is used for this purpose. Create a container element and defines its dimensions as shown below-

<div id = “sample” style = “width, height,></div>

Step 4: Before initializing the map, one must create a map Options object (it is created just like a literal) and set values for map initialization variables. A map has three main options, namely, center, zoom, and map Type Id which is mentioned above.

Step 5: create a Map Object

One can create a map by instantiating the JavaScript class called Map. While instantiating this class, one must pass an HTML container to hold the map and the map options for the required map.

Step 6: Load the map:

Finally load the map by calling the loadMap () method or by adding DOM listener.

Conclusion:

It is likely that Google Maps will have a large coverage of users soon as mapping technology is getting accessible to everyone with the aid of internet. Google maps is one of the innovations in the decade that brings great improvements of one’s lives.

  • Share:
User-Admin-Account

Previous post

Facts and Myths of HTML
February 25, 2021

Next post

Must Know CSS Properties
February 25, 2021

You may also like

CSS box model and box sizing
2 March, 2021

CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages (HTML or XML). This language contains coding elements and its composed of these “cascading style sheets” which are equally called …

Must Know CSS Properties
25 February, 2021

CSS can be seemed to be difficult at a first glance when one is new to it. But with the help of properties it is easy to learn CSS. It is the language that is used to style an HTML …

Facts and Myths of HTML
25 February, 2021

HTML is perhaps the most hyped technology since people starting putting rounded corners on everything and using unnecessary gradients. In fact, a lot of what people call HTML 5 is actually just old-fashioned DHTML or AJAX. Mixed in what all …

Search

Recent Posts

  • CSS box model and box sizing
  • Must Know CSS Properties
  • Using Google Maps in HTML
  • Facts and Myths of HTML
  • Key Features of HTML 5 over HTML 4
2Netzwerk-Academy-Logo-min
+919632807666
info@netzwerkacademy.com

BRIDGE Co working and Training 17, 5th A Cross Rd, R.K Colony, Manjunath Colony, 2nd Phase, J. P. Nagar, Bengaluru, Karnataka 560078

View on Map

Find us on

Facebook
Instagram
Youtube
Telegram
Whatsapp

  • Privacy Policy
  • Terms and Conditions

Login with your site account

Lost your password?