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?
Solved
Has anyone embedded Google Maps in an Acumatica aspx page?
+13Best answer by Zoltan Febert
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>
+3Hi
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>
Zoltan Febert (Acumatica Developer, MVP)
+13zfebert56 wrote:
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.
+3OK, 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>
Zoltan Febert (Acumatica Developer, MVP)
+13Thank 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!
Daryl ⚡Contract Acumatica Developer (MVP🏆) for hire ⏩ linkedin.com/in/darylbowman
1 person likes this
+13Not according to Google. However, there may be limitations to the how many points can be passed from the Acumatica backend to the JavaScript frontend.
Daryl ⚡Contract Acumatica Developer (MVP🏆) for hire ⏩ linkedin.com/in/darylbowman
1 person likes this
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.