Google Maps in ERPNext?

I’m trying to build a map using the new Frappe Custom HTML Block. I have the following html/css/javascript, but the map doesn’t load, but it also doesn’t give any console errors.

Has anybody had any success using Google Maps in things like custom dialogs or elsewhere in ERPNext?

#map-canvas {
    height: 300px;
    width: 600px;
    background-color: #CCC;
<div id="map-canvas"></div>
function initialize() {
  window.addEventListener('load', function(event) {
       //Here is my logic now

    var myLatLng = new google.maps.LatLng(45.4375, 12.3358),
        myOptions = {
            zoom: 5,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
        marker = new google.maps.Marker({
            position: myLatLng,
            map: map

    moveMarker(map, marker);

function moveMarker(map, marker) {

    //delayed so you can see it move
    setTimeout(function () {

        marker.setPosition(new google.maps.LatLng(45.4375, 12.3358));
        map.panTo(new google.maps.LatLng(45.4375, 12.3358));

    }, 1500);



This is an old repo link where we had used leaflet maps instead of Google to show on the Address doctype. You may find it helpful.

Thanks for the input, but I’d much rather use Google Maps.

Hi @oguruma:

Should import google library somewhere …

Or use just an iframe

<div class="map">

Hope this helps

Even with the Google library imported, the map still won’t load.

It works fine with a plain html file, so it must be something in ERPNext. Is there something in ERPNext that’s designed to prevent Google Maps from loading or something?

I got it working by setting dimensions in the div.


<div id="map" style="height:400px;width:500px"></div>


 (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "INSERT_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
    let map_element = root_element.querySelector('#map');
  map = new Map(map_element, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,

1 Like