Embed the new Google Maps without a plugin or shortcode

  • Hi,

    There are a lot of tutorials about embedding Google Maps in your posts, but after a long and painful research, I notice that every single tutorial was about embedding **THE OLD** Google Maps platform… the one with the url scheme ‘maps.google.com’.

    **THE NEW** Google Maps scheme (https://www.google.com/maps/place/) is completely different, and there almost no documentation on how to make it work in WordPress.

    So, here is a quick tutorial on how to embed **THE NEW** Google Maps in WordPress posts without a plugin and just pasting the map url in the post body:

    1. First, you need an API Key from Google. Follow the instructions at https://developers.google.com/maps/documentation/embed/guide#api_key.

    2. Once you have your API Key, we can get into the code. In your favorite theme, open functions.php and add:

    <?php
wp_embed_register_handler( 'googlemapsv1', '#https?://www.google.com/maps/place/(.*?)/#i', 'wpgm_embed_handler_googlemapsv1' );
function wpgm_embed_handler_googlemapsv1( $matches, $attr, $url, $rawattr ) {
	if ( ! empty( $rawattr['width'] ) && ! empty( $rawattr['height'] ) ) {
		$width  = (int) $rawattr['width'];
		$height = (int) $rawattr['height'];
	} else {
		list( $width, $height ) = wp_expand_dimensions( 425, 326, $attr['width'], $attr['height'] );
	}
	return apply_filters( 'embed_googlemapsv1', "<iframe width='{$width}' height='{$height}' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://www.google.com/maps/embed/v1/place?q=" . esc_attr($matches[1]) . "&key=***YOUR-API-KEY***'></iframe>" );
};
?>

    Be sure to replace ***YOUR-API-KEY*** with your KEY. Save & close.

    3. Test the new code by adding a new post and just pasting a google maps url like this one from The White House:

    https://www.google.com/maps/place/The+White+House/@38.896278,-77.0306687,17z/data=!3m1!4b1!4m2!3m1!1s0x89b7b7bcdecbb1df:0x715969d86d0b76bf

    That works the same way as just using:
    https://www.google.com/maps/place/The+White+House/

    The RegEx can be tweaked to allow different URL schemes for the four new modes, detailed here: https://developers.google.com/maps/documentation/embed/guide#modes.

    This method only works for ‘place’ mode, but reading the documentation will get you on track to make the ‘directions’, ‘search’ and other modes working.

    That’s it. I hope it works for you guys (and excuse my english). Any contributions for the code will be appreciated.

Viewing 10 replies - 1 through 10 (of 10 total)

  • This is Awesome

    I have looking this code everywhere.. well done mate!

    but this code only working for ‘google.com’ and not working for google country region domain. because sometimes when we open google maps, google will redirect us to the google country region. in my case, when i try to visit ‘google.com/maps’ it will redirect to ‘google.co.id/maps/

    so i have to change the code:
    https?://www.google.com/maps/place/(.*?)/#i
    to
    https?://www.google.co.id/maps/place/(.*?)/#i

    Thank You..

    Hi,

    Thanks but tried this and it doesn’t work.
    No idea why, I have followed the tutorial to the letter.

    Does anyone know what the theme ‘functions.php’ code would be for a Google.co.uk map?

    Thanks.
    Armando.

    I’m having issues too. My theme has a Contact Us section. Using the theme’s dummy data, the map loads just fine (it’s a map of New York, but the Google Map’s copy is in a non-English language – probably the theme developer’s native tongue).

    My theme has a custom area under Appearance where I’m supposed to just be able to replace their New York map with the URL from my Google Map, but when I do that, the map doesn’t load.

    Wondering if I need my own Google API key in order for the map to render? I’ve acquired the key from Google, but don’t know where to place it given the theme has a custom option for the map.

    Moderator bcworkz

    (@bcworkz)

    Ellamia, yes you need to use your own API key. Keys are tied to the URL you registered when you got the key. If the map request does not come from that URL, Google will not serve the map imagery. The key still goes where indicated in the OP’s code. If you are using a custom option, you may need need to alter the code’s RegExp, but the key still goes in the same place.

    Thanks bcworkz! Glad to have that confirmed. Now I’ll go chase down the pre-existing API key and replace it. I appreciate the reply.

    Good day

    i will preface my post with the fact that i am a very NEW editor of php and wordpress

    I really appreciate this code, as i have a site which will have a few dozen embedded google maps (or at minimum links to the referenced map)

    I have embedded this code into my theme functions and am getting the following error when loading the page. The code looks the same to other functions already in place in the file so i am a little confused as to why this code isnt working.

    Parse error: syntax error, unexpected ‘<‘ in /home/websrvnt/public_html/wp-content/themes/eshop/functions.php on line 486

    Can anyone point me to the correct syntax to solve my PARSE error?

    Many thanks
    Jeff

    slowly working through my problem here.
    I simply removed the preceeding and trailing <?php and ?> and it seems to work !?!?!

    You are a life saver – this code will save me soooo much time editing the dozens of maps/links i need to add to my site.

    Jeff

    Would the OP (or anyone) be willing to work with me to develop a special code for my project along the lines of the original concept of this post?

    Many thanks
    Jeff

    Moderator bcworkz

    (@bcworkz)

    Hi Jeff, you may have better luck finding development help at https://jobs.wordpress.net . This forum is more for the quick get me out of a bind type of answers. It is expressly not for soliciting or offering paid help.

    Thanks
    I wasnt soliciting anyone
    I would like to get a solution to the code presented on this page (which ISNT working for me the way i need it to work – i.e. get me out of a bind)
    If someone is willing to help me what i need, i would appreciate it.
    otherwise, thanks anyway

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Embed the new Google Maps without a plugin or shortcode’ is closed to new replies.