adssfskjdasdfasdf Posted March 30, 2021 Share Posted March 30, 2021 Site URL: https://www.prescribinglife.com/thubs I am attempting to include a custom Google map via Google Maps Javascript API. My code block (containing my HTML code) works in Save Preview Mode. However, when viewing the live page (https://www.prescribinglife.com/thubs) there is no map. Any ideas what I am doing wrong? Could it be a DIV height / width size issue? Thanks in advance for any help on this issue. Here is the code in my code block: <!DOCTYPE html> <html> <head> <title>Simple Map LER</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <style type="text/css"> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> <script> let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); } </script> </head> <body> <div id="map" style="width:100%; height:100%"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3ywKcIzCvF9etVLjmV4eirtvltibvi_k&callback=initMap&libraries=&v=weekly" async ></script> </body> </html> Link to comment
Beyondspace Posted March 31, 2021 Share Posted March 31, 2021 5 hours ago, adssfskjdasdfasdf said: Site URL: https://www.prescribinglife.com/thubs I am attempting to include a custom Google map via Google Maps Javascript API. My code block (containing my HTML code) works in Save Preview Mode. However, when viewing the live page (https://www.prescribinglife.com/thubs) there is no map. Any ideas what I am doing wrong? Could it be a DIV height / width size issue? Thanks in advance for any help on this issue. Here is the code in my code block: <!DOCTYPE html> <html> <head> <title>Simple Map LER</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <style type="text/css"> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> <script> let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); } </script> </head> <body> <div id="map" style="width:100%; height:100%"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3ywKcIzCvF9etVLjmV4eirtvltibvi_k&callback=initMap&libraries=&v=weekly" async ></script> </body> </html> It is showing BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
adssfskjdasdfasdf Posted March 31, 2021 Author Share Posted March 31, 2021 Tuan Phan pointed out that I was missing the following code. Once I added it, my map appeared on my live page. Add this before </style> #map { height: 500px !important; } Thank you :) tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment