[Resolved] Maps – Google Maps Static API but still use Dynamic Source for map markers

[Author]

Posts

[brendonD]

Tell us what you are trying to do?
- I currently have Toolset Maps set up to dynamically source the map markers using dynamic addresses on custom posts.
- I have a map on each custom post (as part of a template) and we currently have over 2300 of these custom posts with more being added regularly.
- With our number of website users we've already exceeded Google's $200 'free' amount (per month) that they allow and we are growing at a fast rate (and will continue to grow a LOT larger, yet).

Is there a way to lessen costs using Toolset? Such as using Google Maps Static API (Which is 2.00 USD per 1000 instead of the current 7.00 USD per 1000)?

If not, I CAN remove the map from the content template to drastically reduce costs; I'd just rather keep it if because it DOES add quite a lot to have that visual on each custom post. (And I don't mind paying to keep it; I just can't afford it at the current rate)

Is there any documentation that you are following?
- I went back and re-looked at the info on this page - https://toolset.com/course-lesson/displaying-a-simple-map/

Is there a similar example that we can see?
- I don't think that's relevant.

What is the link to your site?
- I could tell you but you need membership access to see the pages I'm talking about, and I don't think getting access is really all that relevant here, yet, anyway. (See attached image, anyway)

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Brendon

I wrote a model answer about just this topic last week.

Please see https://toolset.com/forums/topic/without-openstreet-maps-how-can-we-make-google-maps-cheaper/

[brendonD]

Thank you Nigel!

That sounds exactly like what I need! Only problem is; I have absolutely no idea how to implement it.

I finished the first step - "update your Google API key to include the Static Maps API" - But after that every instruction is "Here's some code!" and you lost me.

[Luo Yang]

Hello,

Please provide a test site, fill below private message box with the login details, also point out the problem post URL, I can setup a demo for you

[brendonD]

Hey Luo,

Sorry. I think there's been a miscommunication.

I'm after instructions on how to use Static Maps with Toolset Maps; I'm not trying to troubleshoot a problem.

Cheers,
Brendon.

[Luo Yang]

I think there is a misunderstanding, the instruction had provided example codes for displaying the static Google map image:

<img class="image-cover" src="<em><u>hidden link</u></em> field='location-address' format='FIELD_LATITUDE,FIELD_LONGITUDE'][/types]&zoom=16&size=640x640&maptype=roadmap&markers=|[types field='location-address' format='FIELD_LATITUDE,FIELD_LONGITUDE'][/types]&key=your-api-key">

You just need to:
- replace "location-address" with your custom address field slug
- replace "your-api-key" with your Google map API key

[brendonD]

Okay. Thank you.

So, I created a Custom HTML block and added that code. I replaced the sections with what you said. It didn't work properly.

My guess is maybe I set the slug wrong. All I did was type in "suburb-of-offender" as the slug is written in the Toolset Custom Fields section (see 2nd image).

The API key, I know, is correct (I copy-pasted it from Toolset Settings > Maps and it's been working for all other maps)
And your code, I assume, is good.
So that just leaves the only other thing I edited; the slug.

I also tried several different iterations of the code: the one you sent, the one Nigel first posted in the other thread, AND the code he also posted that combined link and image - All 3 showed the same 'broken' map.

[Luo Yang]

I have tried it in my localhost, it works fine, please check these:
1) Make sure you have enabled "Maps Static API" for your Map API key
hidden link

2) Use a shortcode block to display below codes:

<img class="image-cover" src="<em><u>hidden link</u></em> field='uburb-of-offender' format='FIELD_LATITUDE, FIELD_LONGITUDE'][/types]&zoom=16&size=640x640&maptype=roadmap&markers=|[types field='uburb-of-offender' format='FIELD_LATITUDE, FIELD_LONGITUDE'][/types]&key=your-api-key">

replace "your-api-key" with your Google map API key

[brendonD]

Awesome! Thank you so much! That seems to have worked!

The only thing I did differently was I used a "Shortcode" block instead of the "Custom HTML" one I was using before so that seems to have done the trick; thank you!

Lastly now, please, I seem to be having trouble with the size.
- You had it set at 640x640, and that worked fine,
- I want it full width (1050) by 250.

It seems to be allowing me to make it LESS than 640, but it won't let me go ABOVE 640 at all.

Meaning that when I have it set at "size=1050x250" it's always half the width of the page (or less), left-aligned, but at least it's the correct height.

Is this a setting within Google Maps Static API or something?

[Luo Yang]

According to Google document, if you want a larger map image, you need to contact them:
hidden link
section "Larger image sizes"

[brendonD]

Thank you for all this. I know I'm probably a difficult person to help since my knowledge isn't the best, but I appreciate that you took the time and patience to get it sorted as succinctly as possible.

My issue is resolved now. Thank you!