Introduction to Maps in JavaScript

Posted By :Razat Vir Singh |28th October 2022

Interactive maps can be made using Leaflet, an open-source Javascript library. It has all the mapping capabilities that the majority of us require for any project, including the ability to zoom, add markers, popup windows, vector layers, and choose a location's latitude and longitude.


We will learn how to use Leaflet maps in this blog and also perform tasks like adding markers and popups.


Creating your webpage

  1. Include the Leaflet CSS file in the head area of your HTML page.

Leaflet.css can be found at this address:

  1. Include a Javascript file for Leaflet.

A leaflet is available at

  1. Add a div element with the Id of the area where you want your map to appear.

<div class="myMap">

  1. Make sure the container for your map has a certain height. CSS can be used as follows:

#myMap {height: 250 px}.

Let's start by initializing the map right away.


Setting up the map


Initialize your map first, then set the zoom level and some geographic coordinates for the view.

map is set to"myMap").

centre of London with zoom level 13: setView([51.505, -0.09], 13);


Add a tile layer to the map after that. In this situation, the tile layer should be OpenStreetMap. Setting the URL template for the tile images and the attribute is necessary to add a tile layer.

('', 'attribution: OpenStreetMap contributors) is a tile layer.



Make sure to call all of these lines of code following the inclusion of the div and the javascript file leaflet.js. Your map container will now include a rendered version of the map.


Putting marker on


By entering the lat-lng, a marker may be added quickly. Add a marking now:

L.marker([51.5, -0.09]).addTo(map);


Inserting popups


When you want to include more details with a map object, popups are employed. In Leaflet, affixing popups to objects is quite easy:


marker.bindPopup( "World, welcome! The popup that I am ").openPopup();

About Author

Razat Vir Singh

Razatvir Singh is an experienced MEAN stack developer with a diverse skill set and practical experience in using the latest tools and frameworks. His expertise includes Angular, Node.js, HTML, CSS, JavaScript, jQuery, and databases such as MongoDB and Opensearch. He has worked on various projects, such as E-Cart, a fully functional e-commerce website, MS-Excel Clone Project, a project where data is fetched from a popular sports website called "" using Node.js packages and JavaScript, Konfer Project and he has also worked on other projects like Automation and Prediction of Stock Prices using Machine Learning. With his diverse skill set and expertise in the latest technologies, Razatvir is well-equipped to take on any MEAN stack development project and deliver high-quality solutions that meet the client's requirements.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us