A API do google Maps já não é gratuito conforme disse o @ngueno; entretanto, podes usar a API do Mapbox com leaflte js.
O Leaflet é a principal biblioteca JavaScript de código aberto para mapas interativos compatíveis com dispositivos móveis.
O Mapbox é a plataforma de dados de localização para aplicativos móveis e da web.
A sua integração seria algo assim:
window.onload = () => {
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
var mapboxToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; // Token do map box
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token='+mapboxToken , {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(mymap);
}
<html>
<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-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px; position: relative;"></div>
</body>
</html>
Para usar tiles do Mapbox, você também deve solicitar um token de acesso.