[Resolved] Add a static google image as background of every post.

[Author]

Posts

[matthiasV-2]

Original threat that was not yet solved: https://toolset.com/forums/topic/google-maps-background-image/

Refer this ticket to Waqar.

How "exactly" in the view template can we add the suggested HTML block as the background of a container (now there is only an option for solid, gradient and image).

So we specifically want to have the static google image to appear as the background image of every "eiegndommen" post.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I've read the discussion from the other ticket and one thing is clear that whether you use dynamic Google Maps or the Maps Static API for this "map as a background" requirement, it will hurt you in terms of performance and Google Maps billing cost. For this reason, I'll not recommend using any of those options.

Here is how I would accomplish it:

1. For the "eiegndommen" post type, I'll include a new image type custom field "Map Background Image".

2. For each "eiegndommen" post, I would open the Google Maps in a new tab ( hidden link ) and enter the location of that property and take the screenshot of the map.

3. Next, that image/screenshot can be uploaded in that "eiegndommen" post's "Map Background Image" field and it can be set as a source for the container background image.

This solution does mean that the website's admin will have to perform an extra step of creating a map's image manually, while adding an "eiegndommen" post. However, since no connections will be made to Google Maps API, on each page load/visit of this background image(s), it will provide you significant cost and performance benefits in the longer run.

regards,
Waqar

[matthiasV-2]

We are looking for a way to include google maps, whether or not static, to Toolset's template view ONCE, not a way of saving images and adding them manually for more than 1 million properties.

[Waqar]

I feel there is some confusion around what has been discussed already about this particular requirement, so I'm going to share a brief summary again.

Option 1, fully interactive map:

The view at /eigendom-zoeken/ is set to show 36 posts/results, per page. If you add a fully interactive map for each post result on this page, it will mean that 36 instances of Google Maps will need to be initialized on a single page load/visit. This will greatly increase the page's loading time and your Google Maps billing cost.

Option 2, Image from Google Maps Static API:

This is the option that Nigel shared in this reply:
https://toolset.com/forums/topic/google-maps-background-image/#post-2146753

Using custom HTML and CSS code, you can get the non-interactive map image from the Google Maps Static API, but, it will still mean, that for each page load/visit, 36 separate connections/requests will be made to the API to fetch the images for each post/result.

This means that this option will also have the drawbacks related to performance and billing costs.
( you can read about this API's billing and usage at hidden link )

Option 3, saving images from the Google Maps Static API:

If you manage to save the images obtained from the Maps with each post, you'll be able to show them like regular images, without having to connect to Google Maps API, every time the page loads.

If performing this action manually for each property, (as I suggested in my earlier reply) is not feasible, then you'll need to consider hiring a professional from our list of recommended contractors, to see if something like this is possible using custom code:
https://toolset.com/contractors/