Leaflet – Unable to Display Google Basemap in Leaflet.js

basemapgoogle mapsleafletreact

I am trying to display Google basemap using leaflet.js on web but getting strange results, screenshot is attached

enter image description here

I have also added the code for react component below

import React, { Component } from 'react';
import L from 'leaflet';

class MapEditor extends Component{
    state={}

    componentDidMount() {
        var map = L.map('map', {
            center:[30.2541,69.703431],
            zoom: 6})
        L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
            maxZoom: 19,
            subdomains:['mt0']
        }).addTo(map);
    };
    
    render(){
        return(
            <div id='mapeditor'>
                    <div id='map'>
                    </div>
                
            </div>
        )
    };
}

export default MapEditor;

How can I fix this issue?

Best Answer

Your L.tileLayer link works for me. I used it in the minmal sample from LeafletJS


<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Quick Start - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        .leaflet-container {
            height: 400px;
            width: 600px;
            max-width: 100%;
            max-height: 100%;
        }
    </style>

    
</head>
<body>

<div id="map" style="width: 600px; height: 400px;"></div>
<script>
    var map = L.map('map').setView([30.2541,69.703431], 13);

    var tiles =  L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
      maxZoom: 19,
      subdomains:['mt0']
  }).addTo(map);
  
</script>
</body>
</html>

Could be an CSS issue or related to React.

Related Question