# New Map Component - How to? **URL:** \ **Category:** Elements\ **Created:** [November 12, 2025, 9:47pm UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388 "2025-11-12T21:47:05Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![ticknerdesign](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ticknerdesign/32/33805_2.png) [@ticknerdesign](https://forums.realmacsoftware.com/u/ticknerdesign)\ **Post date:** [November 12, 2025, 9:47pm UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/1 "2025-11-12T21:47:05Z")
Trying to get the new Map component to work from the store. But, it appears that you are required to be a registered Google developer in order to get this to work? Requiring an API Key or something? Very confused. 😵‍💫 ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [November 12, 2025, 10:14pm UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/2 "2025-11-12T22:14:16Z")
Yes, getting a Google API key is pretty annoying, [we’ve put some docs together and included an excellent video](https://docs.realmacsoftware.com/elements-docs/components/map) that shows you how to get it setup 🙂 [![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/4/e41ccfd1c3b088b984f527df5a67abe548b835a7.jpeg "How to Get a Google Maps API Key in 2 Mins") ](https://www.youtube.com/watch?v=hsNlz7-abd0) ---
**Author:** ![ticknerdesign](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ticknerdesign/32/33805_2.png) [@ticknerdesign](https://forums.realmacsoftware.com/u/ticknerdesign)\ **Post date:** [November 12, 2025, 10:39pm UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/3 "2025-11-12T22:39:35Z")
Thank you so much for pointing me in the right direction, Dan. I watched the video but, it appears Google has made changes to their web page since this video was created and it is still much more complicated than I am comfortable with. I’ll keep looking for an easier solution. Thanks again! ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [November 13, 2025, 1:16am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/4 "2025-11-13T01:16:51Z")
I agree that the whole process of dealing with Google was very onerous. Additionally, I was unhappy that I had to provide a credit card number to obtain the API. They claim it is free, but I’m not convinced. Once I had the API, though, I couldn’t get the Map component to work. I entered an address, but nothing appears; all I see in the preview is a blank screen. Maybe there is more to the setup process with Google. I decided it was too much work. ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [November 13, 2025, 1:26am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/5 "2025-11-13T01:26:55Z")
I have an Open Street Map component ready to go when the store is open to third parties. OSM does not require any API key. ![CleanShot 2025-11-13 at 1 .26.01@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/6/0634a1be7e2f3a08562b1019a9572a4565e4a438.jpeg) ---
**Author:** ![MultiThemes](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/multithemes/32/25117_2.png) [@MultiThemes](https://forums.realmacsoftware.com/u/MultiThemes)\ **Post date:** [November 13, 2025, 1:38am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/6 "2025-11-13T01:38:25Z")
can’t wait to see it in action! ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [November 13, 2025, 1:41am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/7 "2025-11-13T01:41:44Z")
OSM, has a limited feature set compared to Google Maps. But I just like not having to go through the whole Google API key process. ---
**Author:** ![differentdan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/differentdan/32/33530_2.png) [@differentdan](https://forums.realmacsoftware.com/u/differentdan)\ **Post date:** [November 13, 2025, 1:51am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/8 "2025-11-13T01:51:30Z")
Apple Maps can also be embedded on websites now. 😊 > **[Apple Maps on the Web - Maps - Apple Developer](https://developer.apple.com/maps/web/)** > > MapKit JS brings Apple Maps to the web. This new JavaScript library lets you add interactive maps to webpages — complete with annotations, overlays, and interfaces to Apple Maps services such as search and directions — to enable rich interactions. But that also requires a developer account. 😞 They have some example code here though if anybody wants to get creative. 🙂 > **[Sample Code - Apple Maps - Apple Developer](https://developer.apple.com/maps/sample-code/)** > > Explore MapKit JS examples and sample code to learn how to easily bring Apple Map experiences to your website. ---
**Author:** ![differentdan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/differentdan/32/33530_2.png) [@differentdan](https://forums.realmacsoftware.com/u/differentdan)\ **Post date:** [November 13, 2025, 4:00am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/9 "2025-11-13T04:00:13Z")
> [@ticknerdesign](#): > > I watched the video but, it appears Google has made changes to their web page since this video was created and it is still much more complicated than I am comfortable with. Hey @ticknerdesign If you need any help let me know, I can do a Zoom call to walk you through it. ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [November 13, 2025, 4:01am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/10 "2025-11-13T04:01:09Z")
Sign me up! ---
**Author:** ![differentdan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/differentdan/32/33530_2.png) [@differentdan](https://forums.realmacsoftware.com/u/differentdan)\ **Post date:** [November 13, 2025, 4:14am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/11 "2025-11-13T04:14:02Z")
> [@handshaper](#): > > They claim it is free, but I’m not convinced. As long as you are only using the Embed API it’s free. > **[Maps Embed API Usage and Billing  |  Google for Developers](https://developers.google.com/maps/documentation/embed/usage-and-billing)** ![google-maps-api-pricing](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/f/ef3161000eebe98b03fc44cf0b7f313ce7de809a.png) > [@handshaper](#): > > Once I had the API, though, I couldn’t get the Map component to work. I entered an address, but nothing appears; all I see in the preview is a blank screen Might need to do a bit more in Google Cloud Console, I got it working here: ![maps-component-2](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/4/d481bb498ef638826859e798c1551143b2e381bd.jpeg) ![maps-component](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/b/fb4dfa922973a2bbb74092fb790f9f8461a02c4d.jpeg) If you restricted the API key to your website, don’t think it would show up in preview mode, you’d probably have to publish the site live. I didn’t restrict my API key so I could test it in preview mode in Elements like above. If you need any help with it let me know. 🙂 ---
**Author:** ![Fuellemann](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fuellemann/32/22871_2.png) [@Fuellemann](https://forums.realmacsoftware.com/u/Fuellemann)\ **Post date:** [November 13, 2025, 5:45am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/12 "2025-11-13T05:45:55Z")
Keep in mind that at least in the EU the embedded Google maps does need the consent of the visitor before it can be displayed. I normally use a screenshot of open maps and then link to the Google Maps webpage (ideally to the routing part which has your address already filled in.) By linking to instead of embedding I do not need the visitors consent. ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [November 13, 2025, 6:21am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/13 "2025-11-13T06:21:07Z")
> [@differentdan](#): > > If you restricted the API key to your website, don’t think it would show up in preview mode, All coming back to me, now you said that. In an old map stack I had, I used to have a key I created hidden inside the stack that got used locally, and I switched to the users key on published page. The plan was to make it easier for the end user, but I ended up with a bill from Google for use on that hidden key. ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [November 13, 2025, 7:55am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/14 "2025-11-13T07:55:48Z")
> [@handshaper](#): > > all I see in the preview is a blank screen. Maybe there is more to the setup process with Google Unfortunately, Google has made it rather convoluted to obtain an API key that works for Maps. You not only have to create an API key, but also ensure it’s enabled for the Maps API itself. The setup process on their site isn’t exactly intuitive, it sometimes feels like they don’t really want the whole internet using their API for free 🤔🤣 For the first version of the Map component, we’ve only added support for Google Maps. However, if there’s enough interest, we could look into adding other map providers in the future. If that’s something you’d like to see, please let me know 🙂 ---
**Author:** ![alchemist](https://avatars.discourse-cdn.com/v4/letter/a/34f0e0/32.png) [@alchemist](https://forums.realmacsoftware.com/u/alchemist)\ **Post date:** [November 13, 2025, 10:38am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/15 "2025-11-13T10:38:13Z")
I suggest considering a Leaflet Component. It is significantly easier to work with than Google Maps (I have worked with both). There are a massive number of features and basemaps available, very well documented. I had several hundred maps in RW and now Elements, where I use Leaflet with Alpine.js. The map shown in the enclosed screendump is dynamic, with data (the dots) coming from a home-made CMS system. Take a look at [https://leafletjs.com](https://leafletjs.com). It is a European product - that is important for us Europeans 🙂 ![map](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/5/859f439850ad6a5f26312134a5e26257b6666870.jpeg) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [November 13, 2025, 10:42am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/16 "2025-11-13T10:42:05Z")
That looks great! I’m leaning toward keeping the built-in Map component focused on Google Maps and letting third-party developers handle the alternative providers. It keeps things simple while still giving everyone plenty of choice. Best of all worlds 😄 ---
**Author:** ![RussOggi255](https://avatars.discourse-cdn.com/v4/letter/r/ee7513/32.png) [@RussOggi255](https://forums.realmacsoftware.com/u/RussOggi255)\ **Post date:** [November 13, 2025, 11:23am UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/17 "2025-11-13T11:23:40Z")
Which OSM servers does it use? ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [November 13, 2025, 12:05pm UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/18 "2025-11-13T12:05:06Z")
Pure OSM data (default) OSM data styled by Carto (dark / light vector mode) OSM + SRTM (elevation) Esri imagery data (satelite) ---
**Author:** ![RussOggi255](https://avatars.discourse-cdn.com/v4/letter/r/ee7513/32.png) [@RussOggi255](https://forums.realmacsoftware.com/u/RussOggi255)\ **Post date:** [November 13, 2025, 1:19pm UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/19 "2025-11-13T13:19:16Z")
So does it read the ‘raw’ data exported from OSM or connect to an OSM server? ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [November 13, 2025, 5:17pm UTC](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388/20 "2025-11-13T17:17:09Z")
I have made two attempts to get this to work, with no success. Google does appear to make this very difficult; it should be easy. [Next page](https://forums.realmacsoftware.com/t/new-map-component-how-to/52388.md?page=2)