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 app 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.

Also Read Our Latest Blog : Exploring the Future of Web Mapping: Integrating Google Maps in Leaflet in 2024  

Before Start!

You should have a 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 tilesFor 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

Book your free consultation with us

 

 

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Hire certified

Developers

  • Avg. 6+ Years of Experience.
  • Dedicated Resource on Demand.
  • NDA Protected Terms.
  • Start/Interview within 24 Hours.
  • Flexible Engagement Models.
  • Best code practices.
Start Now!
E-Book

eBook

6 Most Important Factors for a Successful Mobile App!

Every precaution that you take in the development process will help you to be effective in building products that will help you grow and reach your goals. Consider these 6 factors before heading for mobile app development.

Subscribe to our newsletter and stay updated

Loading