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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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