How to use Google Maps in Leaflet?

How to use Google Maps in Leaflet?

Abstract

This article helps the user to render the map on the page using Leaflet. Using the leaflet, we can render the map into an HTML element and we can set the marker on the map. Leaflet works efficiently across all major desktop and mobile platforms.

Introduction

The leaflet is an open-source JavaScript library for intelligent web maps. It’s lightweight, basic, and adaptable, and is most likely the mainstream open-source mapping library right now. The leaflet is created or developed by Vladimir Agafonkin (presently of MapBox) and different supporters.

What is Leaflet:

Sharp maps with zooming, Tile layers, WMS, Markers, Popups, Vector layers (polylines, polygons, circles, etc.), Image overlays and GeoJSON and feature layers that you supply. It handles different essential undertakings like changing data to map layer and mouse connections, and it’s anything but difficult to stretch out with plugins. It will likewise function admirably crosswise over most sorts of gadgets. See Anatomy of a Web Map for a prologue to the most widely recognized sorts of web maps, which is the thing that Leaflet is useful for.
Provide any information for you! The leaflet is a system for appearing and interfacing with map data, however, it’s dependent upon you to give that data, including a basemap. The leaflet is not GIS, in spite of the fact that it very well may be joined with devices like CartoDB for GIS-like capacities. On the off chance that you require to add up to an opportunity of form, communication, changes, and map projections.

Before Start!

You should have the text editor like Sublime Text or Notepad++.

Let’s make a map!

The map above requires only a few things:

The html page

The Leaflet CSS styles

The Leaflet JavaScript library

<div>  element to hold the map

A height style specified for the map div.

A short script to create the map in that <div>

Downloading Leaflet

You can download Leaflet from

http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css

http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js

How about we center around the code in that <script> tag close to the end.
What did we do?

    • Made a map variable
    • Utilized L.map() to instantiate the map object.
    • passing this object to the id of the div, where we need the map to render
    • Use the setView() function to focus the initial map
  • Use L.tileLayer() function to pass URL of map tile pictures. to make a base layer of map tiles

    For example in this article, we’re using google’s basemap. Though, there are numerous alternatives out there. {z}/{x}/{y} is a format that Leaflet uses to discover tiles at the right zoom, x, and y facilitates. (See Anatomy of a Web Map). Similarly, we indicated a couple
    of alternatives:

Utilized addTo() method to add this tile layer to the map, we have just created.

Steps to use leaflet on your page:

Step 1:

First include css and js file in your page

<link rel=”stylesheet” type=”text/css” href=”leaflet/leaflet.css”/>

<script type=’text/javascript’ src=”leaflet/leaflet.js”></script>

Step 2:

Create a div element with an id

<div id=”myMap”></div>

Make sure the map container has a defined height eg.
# myMap { width:600px;height: 550px;}

Step 3:

Add script section on your page

<script>
window.onload=function(){

} <script>

Step 4:

Setting up the map
First initialize the map and set the geographical coordinates and a zoom level do this code in window.onload
var mymap = L.map('map').setView([51.505, -0.09], 13);

Step 5:

Add layer to the map

L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
}).addTo(mymap);

Output:

leaflet_img1

set marker on map:

For setting the marker, we will pass the geographical coordinates in to L.marker and add it to the map

var marker=L.marker([51.5, -0.09]).addTo(mymap);

Set popup on marker:
For setting the popup we will pass the message in to bindPopup and open the popup


marker.bindPopup('I am marker.')
marker.openPopup();

Output:

Set custom icon marker:

Make the icon


var customicon = L.icon({
iconUrl: 'customicon.png', //image file
iconSize: [38, 95], // size of the icon
});

Add this icon on the map

var marker= L.marker([51.5, -0.09], {icon: customicon}).addTo(mymap)
marker.bindPopup('I am marker.')
marker.openPopup();

Output:

leaflet_img3

We can also set the marker as HTML content rather than an image icon. For this, We will create Div Icon and then add it to map


var markerOptions = {
icon: new L.DivIcon({
className: 'my-div-icon',
html: '<b class="icon" style="font-size: 16px;border:solid;padding:2px;border-width:
thin;border-bottom: 3px solid;border-right: 3px solid;color:white;background-color:red;border-
color:black">icon</b>'
})
};

I have used inline CSS, though an external CSS can also be used.

Now add the “markerOption” variable into marker

var marker= L.marker([51.5, -0.09], markerOptions).addTo(mymap)

marker.bindPopup(‘I am marker.’)
marker.openPopup();

Output:

leaflet_img4

we can also set marker popup as html content rather than string or text. For this add html into popup and you can also set width and height of this popup


var marker= L.marker([51.5, -0.09]).addTo(mymap)
marker.bindPopup("<div class='markerPopup' ><h2>London, UK<h/h2><h3>Wednesday,
2:00 PM</h3><h3>Mostly Cloudy</h3></div>", {
maxWidth : 560
});
marker.openPopup();

Output:

leaflet_img5

About Author:
Author Zeeshan Raza Khan is working as a Software Developer at QSS Technosoft having an experience of 1.4 years. Having the knowledge .Net, PHP, jQuery, JavaScript.

About QSS:
QSS has a proven track executing HTML, CSS and Java script based web and mobile applications for its esteemed customers. The company has a core competency in developing and delivering Enterprise level applications using HTML, CSS and Java script. The HTML/CSS/Java script competency has experienced and dedicated team of frontend UI developers. To Know More...

Renovate unique Business Processes into Digitally Transformed solutions with QSS Technosoft!!

Do you want to remove manual operations, acting as impediment to your business growth? Realize your ideas into reliable web and mobile software solutions with our professional services. Take first step to launch your project by filling the form.

Let's computerize your business process


or Call Us