How to Add Google Map in WordPress Without API

How to Add Google Map in WordPress Without API

Every webmaster wants to show his business location on the map. We use trustable google for the map service.  WordPress gives you the independence to create content. In this article , You know  How to Add Google Maps in WordPress Without API.

Recently google maps have been having problems. Google does not provide a full free API key. As a theme developer or WordPress site owner we have many ways to use google maps in our site. We will describe two ways to place google maps on a website. Obviously, we will describe it without plugin and API.

Embed Google Map:

Google offers you to embed google maps as iframe. You can share your address as an iframe. Just follow the step:

  1. Go to Google Map websites.

2. Find that location that you want.

How to Add Google Map in WordPress Without API

3. Click the share button.

4. It’s open a popup click “Embed a map”

How to Add Google Map in WordPress Without API

5. Then click “COPY HTML”

6. Then paste on your page editor. If you are using a Gutenberg editor. You can use a custom HTML block.

7. Updated Your page.

This is the Manual way to place google maps on your site.

Create Google Map Shortcode:

If you are going to create your own project and work with a client website. It also helps plugin development. You can use google maps multiple times as shortcodes. Create options for client websites. Let’s create a shortcode for google maps. 

Google Map shortcode function, copy the function and paste it function.php:

function wpk_google_map_shortcode($atts){

 $atts = shortcode_atts( array(
       'title' => 'University of Nebraska State Museum - Morrill Hall',
       'address' => 'Morrill Hall, 645 N 14th St, Lincoln, NE 68588, United States',
       'zoom' => 14,
    ), $atts);


	$title_and_address = 'q='.urldecode($atts['address']).'+('.urldecode($atts['title']).')&';
	$zoom = 'z='.$atts['zoom'].'&';

	$src = 'https://maps.google.com/maps?width=100%25&hl=en&'.$title_and_address.'t=k&'.$zoom.'ie=UTF8&iwloc=B&output=embed';

	$output = '<iframe src="'.$src.'" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>';

	return $output;
}
add_shortcode('WPK_GOOGLE_MAP', 'wpk_google_map_shortcode');

This function automatically generates a google maps iframe.  Just use the shortcode WordPress page editor –

[WPK_GOOGLE_MAP title="University of Nebraska State Museum - Morrill Hall" address="Morrill Hall, 645 N 14th St, Lincoln, NE 68588, United States" zoom =”14”]

If You’re using Gutenberg editor, Use Shortcode Block. This shortcode has 3 attributes: title, address, and zoom. You can copy the title and address of google Maps and Replace it.

This is just an idea I have shared with you. You can extend and modify it. Also, You can use it, it’s working. 

Conclusion: 

Google map is the most common content of WordPress. There are so many plugins provided by Google map services. You can use one of them. But If you want, use it manually. You can use our shortcode. 

If you like our article. If you have a problem feel free to contact us.  Please Comment Below.

Leave a Reply

Your email address will not be published. Required fields are marked *