Project

General

Profile

Actions

Feature #20795

open

Migrate sites using google-maps-embed to embed-google-map

Added by Boone Gorges 3 months ago. Updated 3 months ago.

Status:
New
Priority name:
Normal
Assignee:
Category name:
WordPress Plugins
Target version:
Start date:
2024-08-20
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

Previously: #3664, #20766

The old google-maps-embed plugin doesn't really work, and in particular it is occasionally completely broken when it doesn't force HTTPS requests. We should migrate over to whatever is our "official" solution for embedding Google Maps, which from my research appears to be embed-google-map (also super old?). It should be fairly straightforward to crawl through affected sites and rewrite the shortcodes.

I'm copying Ray and Scott here as they might be better positioned to make a recommendation about what should be used in 2024 to embed a Google Map on the Commons.


Files

2024-08-23_141110.png (92.9 KB) 2024-08-23_141110.png Raymond Hoh, 2024-08-23 05:11 PM

Related issues

Related to CUNY Academic Commons - Feature #3664: Google Maps Embed Plugin vs. Embed Google Map PluginResolvedBoone Gorges2014-11-17

Actions
Related to CUNY Academic Commons - Feature #20766: Old plugin reviewResolvedBoone Gorges2024-08-16

Actions
Actions #1

Updated by Boone Gorges 3 months ago

  • Related to Feature #3664: Google Maps Embed Plugin vs. Embed Google Map Plugin added
Actions #2

Updated by Boone Gorges 3 months ago

Actions #3

Updated by scott voth 3 months ago

This plugin looks promising - https://wordpress.org/plugins/wp-google-maps/ Last updated a month ago.

Actions #4

Updated by Boone Gorges 3 months ago

Thanks, Scott! Unfortunately it looks like that plugin requires map objects to be created locally, so the migration routine would be more involved than simply swapping out shortcodes. Not impossible, but a lot more complicated.

Actions #5

Updated by scott voth 3 months ago

I've looked at several other plugins, but they require a Google API key. To set up the key it seems you need to have a billing account. Should we avoid looking at plugins like these?

Actions #6

Updated by Boone Gorges 3 months ago

Yeah, anything that requires an API key is probably off the table.

Actions #7

Updated by Raymond Hoh 3 months ago

I've deactivated google-maps-embed from sites where the [cetsEmbedGmap] shortcode was not found in the post content:

wp plugin deactivate google-maps-embed --url=efernandez.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=scottvoth.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=bccparlaitaliano.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=inperpetualbeta.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=livinglab.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=publicspace.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=urbanenvironmentstudies.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=cunyslist.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=lehmanonline.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=hunternurses.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=gcdi.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=andrewgmckinney.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=thesegalcenter.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=feministstudies.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=cunygraduatecentergeography.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=gcees.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=alandaluscuny.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=annesialamb.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=bronxedtech.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=activistwomen.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=iletcsforum.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=testblogtoday.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=tomryan.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=serapeaegypt.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=eshtestcac.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=preludenyc2013.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=cunyfemtech.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=vawshutdownmap.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=teachingimmigration.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=sissiliu.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=jojokarlin.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=gfarrellyroma.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=foodstuff.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=nurayyilmaz.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=omrit.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=axum.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=tarquinia.commons.gc.cuny.edu && 
wp plugin deactivate google-maps-embed --url=segalarchive.commons.gc.cuny.edu

Yeah, anything that requires an API key is probably off the table.

Without signing up for an API key, you can embed Google Maps with the following <iframe> embed codes.

The older, free Google Maps <iframe> embed code used:

<iframe src="https://maps.google.com/maps?q=LOCATION-SEARCH-OR-ADDRESS&output=embed"></iframe>

This still works today and is what the google-maps-embed plugin uses in their shortcode to generate the <iframe> embed. I don't know how long Google will allow this syntax to continue, but it is widely used on the internet. We could easily write our own maps shortcode such as [gmaps location="CUNY Graduate Center"] with this syntax and this should embed the location of the CUNY Graduate Center like the attached screenshot: https://redmine.gc.cuny.edu/attachments/29469

However, the latest, free Google Maps <iframe> embed code uses:

<iframe src="https://www.google.com/maps/embed?pb=SPECIAL-ENCODED-PARAM"></iframe>

You can generate this embed code yourself from the Google Maps website and using the "Share > Embed a Map" option. See https://blog.hubspot.com/website/how-to-embed-google-map-in-html .

The 'pb' parameter is some special secret sauce that has the longitude and latitude of the address among other things. Some devs have tried to decode this new 'pb' parameter with varying results: https://stackoverflow.com/questions/47017387/decoding-the-google-maps-embedded-parameters

I haven't done too much research into this yet, but it looks like it wouldn't be convenient to use this new embed syntax if we were to stick to a "no API key" approach, unless we tell users to copy the <iframe> 'src' attribute manually from the embed code, which could lead to some support issues.

in particular it is occasionally completely broken when it doesn't force HTTPS requests

Since the google-maps-embed plugin isn't updated any more, we can force the Google Maps URL to HTTPS ourselves. This should resolve the main problems with google-maps-embed. I don't think we should convert the older [cetsEmbedGmap] shortcode to the syntax of another Google Maps plugin at this time.

Actions #8

Updated by Boone Gorges 3 months ago

Ray, thanks so much for the context.

Since the google-maps-embed plugin isn't updated any more, we can force the Google Maps URL to HTTPS ourselves. This should resolve the main problems with google-maps-embed. I don't think we should convert the older [cetsEmbedGmap] shortcode to the syntax of another Google Maps plugin at this time.

Yeah, you're probably right. I guess I'm enjoying the aggressive remove-everything approach, but it seems fine to leave this plugin in place (though hidden):

https://github.com/cuny-academic-commons/cac/commit/091b28621cafffe7b9c11f60f825a790f76b7730
https://github.com/cuny-academic-commons/cac/commit/eecf97e2bea608ebe95bd94245d06d2d52ea381b

Ray, do you have any thoughts about whether https://wordpress.org/plugins/wp-google-maps/ is a good option going forward? The idea would not be to migrate old shortcodes. But it would become our recommended tool for those looking to embed maps.

Actions #9

Updated by Raymond Hoh 3 months ago

Ray, do you have any thoughts about whether https://wordpress.org/plugins/wp-google-maps/ is a good option going forward? The idea would not be to migrate old shortcodes. But it would become our recommended tool for those looking to embed maps.

Other than the various upsells to their premium version, wp-google-maps doesn't use Google Maps by default, it uses OpenStreetMap to render the maps, which is good. The one negative is the plugin creates ten database tables to hold map data such as locations, maps and markers. However, it is quite user-friendly.

Leaflet Map also uses OpenStreetMap by default and is a better technical option as it creates no database tables. However it's less user-friendly than wp-google-maps because it's shortcode-only.

I haven't looked in-depth into other mapping options yet.

Actions

Also available in: Atom PDF