New Map Component - How to?

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. :face_with_spiral_eyes:

Yes, getting a Google API key is pretty annoying, we’ve put some docs together and included an excellent video that shows you how to get it setup :slight_smile:

1 Like

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!

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.

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.

8 Likes

can’t wait to see it in action!

1 Like

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.

2 Likes

Apple Maps can also be embedded on websites now. :blush:

But that also requires a developer account. :disappointed_face:

They have some example code here though if anybody wants to get creative. :slightly_smiling_face:

2 Likes

Hey @ticknerdesign

If you need any help let me know, I can do a Zoom call to walk you through it.

Sign me up!

As long as you are only using the Embed API it’s free.

Might need to do a bit more in Google Cloud Console, I got it working here:

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. :slightly_smiling_face:

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.

4 Likes

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.

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 :thinking::rofl:

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 :slightly_smiling_face:

3 Likes

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. It is a European product - that is important for us Europeans :slight_smile:

1 Like

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 :grinning_face_with_smiling_eyes:

1 Like

Which OSM servers does it use?

Pure OSM data (default)
OSM data styled by Carto (dark / light vector mode)
OSM + SRTM (elevation)
Esri imagery data (satelite)

1 Like

So does it read the ‘raw’ data exported from OSM or connect to an OSM server?

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.

1 Like