I am wondering if it is possible to display a Google Maps map generated from the Maps JavaScript API in an ASPX page.
Does anyone have experience with this or something similar?
Best answer by Zoltan Febert
View originalHas anyone embedded Google Maps in an Acumatica aspx page?
+11
Userlevel 6
+3
Hi
If JavaScript is not necessary, you can use a simple Label and embedded HTML map like this:
<px:PXLabel Height="400" Text="<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3094853.40138902!2d-76.81555214851113!3d40.755035!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259ace01f6307%3A0x6a70a25994abe692!2sNet%20at%20Work%20%7C%20Managed%20IT%20Services%20%26%20Support%20(MSP)%20New%20York%20%7C%20Technology%2C%20Software%20%26%20Business%20Consulting!5e0!3m2!1sen!2sca!4v1692987544368!5m2!1sen!2sca" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>" runat="server" ID="GooglePanel" ></px:PXLabel>
+11
If JavaScript is not necessary, you can use a simple Label and embedded HTML map like this:
Interesting. Unfortunately, I would like to use the JavaScript API to plot points on the map.
Userlevel 6
+3
OK, let’s do it with JavaScript.
Add these three PXLiteral to your page. The first loads Google API, the second displays the map, and the third declares the div for the map.
I got the scripts from here: https://developers.google.com/maps/documentation/javascript/adding-a-google-map#javascript
I do not have an API key, so I used the Beta key from the documentation. It didn’t display the map properly, but I saw the scripts were running.
Once you replace the demo scripts with your working ones, you should do it in the customization editor, and PXLiteral control will encode them properly. Make sure there is no line comment in your script, because PXLiteral converts the multi line script into a one line script, and half of your script will be commented out.
<px:PXLiteral Enabled="True" runat="server" ID="s1" Text="<!-- prettier-ignore --> <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>" ></px:PXLiteral>
<px:PXLiteral Enabled="True" runat="server" ID="s2" Text="<script > let map; function retek() {}; async function initMap() { const position = { lat: -25.344, lng: 131.031 }; const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap(); </script>" ></px:PXLiteral>
<px:PXLiteral Text="<div id="map" style="height:400px; width:400px"></div>" runat="server" ID="s3" ></px:PXLiteral>
+11
Thank you! I was trying pieces of this but couldn’t get far enough to have a basic working model. This is surprisingly simple. The real API key did make the difference.
I appreciate the time you spent. Thanks again!
Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.