Google Maps in ERPNext?

1

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
        });

    marker.setMap(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);

};

initialize();
2

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.

3

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

4

Hi @oguruma:

Should import google library somewhere …

Or use just an iframe

<div class="map">
    <iframe
        width="600"
        height="450"
        frameborder="0"
        style="border:0"
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2824.7550855442924!2d-93.47895428450719!3d44.862149979098314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87f6217d2bc3e9c3%3A0xe9a98dcb1a4689e7!2sNewOrleans!5e0!3m2!1sen!2sus!4v1639448793852!5m2!1sen!2sus"
        allowfullscreen
    ></iframe>
</div>

image
image1214×803 63.1 KB

Hope this helps

5

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?

6

I got it working by setting dimensions in the div.

HTML:

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

JS:

 (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}apis.com/maps/api/js?`+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,
  });
}

initMap();
1 Like