Snippet

Add Google Maps to WordPress: Easy Code Snippet Guide

How to add google maps to wordpressEmbed google maps in wordpress without pluginAdd google maps to wordpress siteWordpress google maps integrationGoogle maps api key for wordpressBest plugin for google maps in wordpressCustomize google maps on wordpressGoogle maps shortcode wordpressWordpress google maps tutorialGoogle maps widget for wordpress

Explanation

To add Google Maps to your WordPress site without using a plugin, you can use a bit of custom code. Here's a simple way to do it:

Step 1: Enqueue Google Maps API

First, you need to load the Google Maps API script on your site. This is done by adding a function that includes your Google Maps API key. Make sure to replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.

Step 2: Create a Shortcode

Next, you'll create a shortcode that allows you to easily embed a map anywhere on your site. This shortcode accepts attributes like latitude, longitude, zoom, width, and height. These attributes let you customize the map's location and appearance.

Using the Shortcode

Once the code is added to your theme's functions.php file, you can use the shortcode [google_map] in your posts or pages. You can customize it by adding attributes like this:

  • [google_map latitude="40.7128" longitude="-74.0060" zoom="12" width="600px" height="450px"]

This will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.

Remember, this method requires you to have a valid Google Maps API key, which you can obtain from the Google Cloud Platform.

Code

1<?php 2// Function to enqueue Google Maps API script 3function wp_dudecom_enqueue_google_maps_api() { 4 // Replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual Google Maps API key 5 $api_key = 'YOUR_GOOGLE_MAPS_API_KEY'; 6 wp_enqueue_script('google-maps-api', 'https://maps.googleapis.com/maps/api/js?key=' . esc_attr($api_key), array(), null, true); 7} 8add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_google_maps_api'); 9 10// Shortcode function to display Google Maps 11function wp_dudecom_google_maps_shortcode($atts) { 12 // Extract shortcode attributes 13 $atts = shortcode_atts( 14 array( 15 'latitude' => '37.7749', // Default latitude 16 'longitude' => '-122.4194', // Default longitude 17 'zoom' => '10', // Default zoom level 18 'width' => '100%', // Default width 19 'height' => '400px' // Default height 20 ), 21 $atts, 22 'google_map' 23 ); 24 25 // Generate a unique ID for the map container 26 $map_id = 'wp-dudecom-map-' . uniqid(); 27 28 // Output the map container and initialization script 29 ob_start(); 30 ?> 31 <div id="<?php echo esc_attr($map_id); ?>" style="width: <?php echo esc_attr($atts['width']); ?>; height: <?php echo esc_attr($atts['height']); ?>;"></div> 32 <script type="text/javascript"> 33 function initMap() { 34 var mapOptions = { 35 center: new google.maps.LatLng(<?php echo esc_js($atts['latitude']); ?>, <?php echo esc_js($atts['longitude']); ?>), 36 zoom: <?php echo intval($atts['zoom']); ?> 37 }; 38 var map = new google.maps.Map(document.getElementById('<?php echo esc_js($map_id); ?>'), mapOptions); 39 } 40 google.maps.event.addDomListener(window, 'load', initMap); 41 </script> 42 <?php 43 return ob_get_clean(); 44} 45add_shortcode('google_map', 'wp_dudecom_google_maps_shortcode'); 46?>

Instructions

File Location: Add the code to your theme's functions.php file or a custom plugin file.

Prerequisites:

  • Ensure you have a valid Google Maps API key. You can obtain this from the Google Cloud Platform.

Implementation Steps:

  1. Open your WordPress Dashboard: Log in to your WordPress admin panel.
  2. Access Theme Editor: Navigate to Appearance > Theme Editor. If you prefer using a plugin, go to Plugins > Add New and search for a plugin that allows custom code snippets.
  3. Edit functions.php: In the Theme Editor, locate and open the functions.php file from the right-hand side file list.
  4. Insert the Code: Copy and paste the provided code into the functions.php file. Ensure you replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.
  5. Save Changes: Click the Update File button to save your changes.
  6. Use the Shortcode: In your WordPress post or page editor, insert the shortcode [google_map] where you want the map to appear. Customize it with attributes like latitude, longitude, zoom, width, and height if needed.

Example Usage:

  • [google_map latitude="40.7128" longitude="-74.0060" zoom="12" width="600px" height="450px"]

This will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.

If you need assistance with implementation or more advanced functionality, consider reaching out to wp-dude.com for expert help.

\n ","encodingFormat":"application/x-httpd-php","datePublished":"2024-12-20T15:58:36","dateModified":"2024-12-20T15:58:36","author":{"@type":"Person","name":"123","url":"https://srv106014.seohost.com.pl"},"keywords":"External Integrations"},{"@type":"HowTo","@id":"https://wp-dude.com/code-snippet/add-google-maps-to-wordpress-code-snippet#howto","name":"Add Google Maps to WordPress: Easy Code Snippet Guide – instrukcja","description":"To add Google Maps to your WordPress site without using a plugin, you can use a bit of custom code. Here's a simple way to do it:\n\nStep 1: Enqueue Google Maps API\nFirst, you need to load the Google Maps API script on your site. This is done by adding a function that includes your Google Maps API key. Make sure to replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.\n\nStep 2: Create a Shortcode\nNext, you'll create a shortcode that allows you to easily embed a map anywhere on your site. This shortcode accepts attributes like latitude, longitude, zoom, width, and height. These attributes let you customize the map's location and appearance.\n\nUsing the Shortcode\nOnce the code is added to your theme's functions.php file, you can use the shortcode [google_map] in your posts or pages. You can customize it by adding attributes like this:\n\n [google_map latitude=\"40.7128\" longitude=\"-74.0060\" zoom=\"12\" width=\"600px\" height=\"450px\"]\n\n\nThis will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.\n\nRemember, this method requires you to have a valid Google Maps API key, which you can obtain from the Google Cloud Platform.","step":[{"@type":"HowToStep","text":"Ensure you have a valid Google Maps API key. You can obtain this from the Google Cloud Platform."},{"@type":"HowToStep","text":"Open your WordPress Dashboard: Log in to your WordPress admin panel."},{"@type":"HowToStep","text":"Access Theme Editor: Navigate to Appearance > Theme Editor. If you prefer using a plugin, go to Plugins > Add New and search for a plugin that allows custom code snippets."},{"@type":"HowToStep","text":"Edit functions.php: In the Theme Editor, locate and open the functions.php file from the right-hand side file list."},{"@type":"HowToStep","text":"Insert the Code: Copy and paste the provided code into the functions.php file. Ensure you replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key."},{"@type":"HowToStep","text":"Save Changes: Click the Update File button to save your changes."},{"@type":"HowToStep","text":"Use the Shortcode: In your WordPress post or page editor, insert the shortcode [google_map] where you want the map to appear. Customize it with attributes like latitude, longitude, zoom, width, and height if needed."},{"@type":"HowToStep","text":"[google_map latitude=\"40.7128\" longitude=\"-74.0060\" zoom=\"12\" width=\"600px\" height=\"450px\"]"},{"@type":"HowToStep","name":"Kod (PHP)","text":" '37.7749', // Default latitude\n 'longitude' => '-122.4194', // Default longitude\n 'zoom' => '10', // Default zoom level\n 'width' => '100%', // Default width\n 'height' => '400px' // Default height\n ),\n $atts,\n 'google_map'\n );\n\n // Generate a unique ID for the map container\n $map_id = 'wp-dudecom-map-' . uniqid();\n\n // Output the map container and initialization script\n ob_start();\n ?>\n
\" style=\"width: ; height: ;\">
\n \n "}]},{"@type":"FAQPage","@id":"https://wp-dude.com/code-snippet/add-google-maps-to-wordpress-code-snippet#faq","mainEntity":[{"@type":"Question","name":"how to add google maps to wordpress","acceptedAnswer":{"@type":"Answer","text":"To add Google Maps to your WordPress site without using a plugin, you can use a bit of custom code. Here's a simple way to do it:\n\nStep 1: Enqueue Google Maps API\nFirst, you need to load the Google Maps API script on your site. This is done by adding a function that includes your Google Maps API key. Make sure to replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.\n\nStep 2: Create a Shortcode\nNext, you'll create a shortcode that allows you to easily embed a map anywhere on your site. This shortcode accepts attributes like latitude, longitude, zoom, width, and height. These attributes let you customize the map's location and appearance.\n\nUsing the Shortcode\nOnce the code is added to your theme's functions.php file, you can use the shortcode [google_map] in your posts or pages. You can customize it by adding attributes like this:\n\n [google_map latitude=\"40.7128\" longitude=\"-74.0060\" zoom=\"12\" width=\"600px\" height=\"450px\"]\n\n\nThis will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.\n\nRemember, this method requires you to have a valid Google Maps API key, which you can obtain from the Google Cloud Platform."}},{"@type":"Question","name":"embed google maps in wordpress without plugin","acceptedAnswer":{"@type":"Answer","text":"To add Google Maps to your WordPress site without using a plugin, you can use a bit of custom code. Here's a simple way to do it:\n\nStep 1: Enqueue Google Maps API\nFirst, you need to load the Google Maps API script on your site. This is done by adding a function that includes your Google Maps API key. Make sure to replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.\n\nStep 2: Create a Shortcode\nNext, you'll create a shortcode that allows you to easily embed a map anywhere on your site. This shortcode accepts attributes like latitude, longitude, zoom, width, and height. These attributes let you customize the map's location and appearance.\n\nUsing the Shortcode\nOnce the code is added to your theme's functions.php file, you can use the shortcode [google_map] in your posts or pages. You can customize it by adding attributes like this:\n\n [google_map latitude=\"40.7128\" longitude=\"-74.0060\" zoom=\"12\" width=\"600px\" height=\"450px\"]\n\n\nThis will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.\n\nRemember, this method requires you to have a valid Google Maps API key, which you can obtain from the Google Cloud Platform."}},{"@type":"Question","name":"add google maps to wordpress site","acceptedAnswer":{"@type":"Answer","text":"To add Google Maps to your WordPress site without using a plugin, you can use a bit of custom code. Here's a simple way to do it:\n\nStep 1: Enqueue Google Maps API\nFirst, you need to load the Google Maps API script on your site. This is done by adding a function that includes your Google Maps API key. Make sure to replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.\n\nStep 2: Create a Shortcode\nNext, you'll create a shortcode that allows you to easily embed a map anywhere on your site. This shortcode accepts attributes like latitude, longitude, zoom, width, and height. These attributes let you customize the map's location and appearance.\n\nUsing the Shortcode\nOnce the code is added to your theme's functions.php file, you can use the shortcode [google_map] in your posts or pages. You can customize it by adding attributes like this:\n\n [google_map latitude=\"40.7128\" longitude=\"-74.0060\" zoom=\"12\" width=\"600px\" height=\"450px\"]\n\n\nThis will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.\n\nRemember, this method requires you to have a valid Google Maps API key, which you can obtain from the Google Cloud Platform."}},{"@type":"Question","name":"wordpress google maps integration","acceptedAnswer":{"@type":"Answer","text":"To add Google Maps to your WordPress site without using a plugin, you can use a bit of custom code. Here's a simple way to do it:\n\nStep 1: Enqueue Google Maps API\nFirst, you need to load the Google Maps API script on your site. This is done by adding a function that includes your Google Maps API key. Make sure to replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.\n\nStep 2: Create a Shortcode\nNext, you'll create a shortcode that allows you to easily embed a map anywhere on your site. This shortcode accepts attributes like latitude, longitude, zoom, width, and height. These attributes let you customize the map's location and appearance.\n\nUsing the Shortcode\nOnce the code is added to your theme's functions.php file, you can use the shortcode [google_map] in your posts or pages. You can customize it by adding attributes like this:\n\n [google_map latitude=\"40.7128\" longitude=\"-74.0060\" zoom=\"12\" width=\"600px\" height=\"450px\"]\n\n\nThis will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.\n\nRemember, this method requires you to have a valid Google Maps API key, which you can obtain from the Google Cloud Platform."}},{"@type":"Question","name":"google maps api key for wordpress","acceptedAnswer":{"@type":"Answer","text":"To add Google Maps to your WordPress site without using a plugin, you can use a bit of custom code. Here's a simple way to do it:\n\nStep 1: Enqueue Google Maps API\nFirst, you need to load the Google Maps API script on your site. This is done by adding a function that includes your Google Maps API key. Make sure to replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.\n\nStep 2: Create a Shortcode\nNext, you'll create a shortcode that allows you to easily embed a map anywhere on your site. This shortcode accepts attributes like latitude, longitude, zoom, width, and height. These attributes let you customize the map's location and appearance.\n\nUsing the Shortcode\nOnce the code is added to your theme's functions.php file, you can use the shortcode [google_map] in your posts or pages. You can customize it by adding attributes like this:\n\n [google_map latitude=\"40.7128\" longitude=\"-74.0060\" zoom=\"12\" width=\"600px\" height=\"450px\"]\n\n\nThis will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.\n\nRemember, this method requires you to have a valid Google Maps API key, which you can obtain from the Google Cloud Platform."}},{"@type":"Question","name":"best plugin for google maps in wordpress","acceptedAnswer":{"@type":"Answer","text":"To add Google Maps to your WordPress site without using a plugin, you can use a bit of custom code. Here's a simple way to do it:\n\nStep 1: Enqueue Google Maps API\nFirst, you need to load the Google Maps API script on your site. This is done by adding a function that includes your Google Maps API key. Make sure to replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.\n\nStep 2: Create a Shortcode\nNext, you'll create a shortcode that allows you to easily embed a map anywhere on your site. This shortcode accepts attributes like latitude, longitude, zoom, width, and height. These attributes let you customize the map's location and appearance.\n\nUsing the Shortcode\nOnce the code is added to your theme's functions.php file, you can use the shortcode [google_map] in your posts or pages. You can customize it by adding attributes like this:\n\n [google_map latitude=\"40.7128\" longitude=\"-74.0060\" zoom=\"12\" width=\"600px\" height=\"450px\"]\n\n\nThis will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.\n\nRemember, this method requires you to have a valid Google Maps API key, which you can obtain from the Google Cloud Platform."}},{"@type":"Question","name":"customize google maps on wordpress","acceptedAnswer":{"@type":"Answer","text":"To add Google Maps to your WordPress site without using a plugin, you can use a bit of custom code. Here's a simple way to do it:\n\nStep 1: Enqueue Google Maps API\nFirst, you need to load the Google Maps API script on your site. This is done by adding a function that includes your Google Maps API key. Make sure to replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.\n\nStep 2: Create a Shortcode\nNext, you'll create a shortcode that allows you to easily embed a map anywhere on your site. This shortcode accepts attributes like latitude, longitude, zoom, width, and height. These attributes let you customize the map's location and appearance.\n\nUsing the Shortcode\nOnce the code is added to your theme's functions.php file, you can use the shortcode [google_map] in your posts or pages. You can customize it by adding attributes like this:\n\n [google_map latitude=\"40.7128\" longitude=\"-74.0060\" zoom=\"12\" width=\"600px\" height=\"450px\"]\n\n\nThis will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.\n\nRemember, this method requires you to have a valid Google Maps API key, which you can obtain from the Google Cloud Platform."}},{"@type":"Question","name":"google maps shortcode wordpress","acceptedAnswer":{"@type":"Answer","text":"To add Google Maps to your WordPress site without using a plugin, you can use a bit of custom code. Here's a simple way to do it:\n\nStep 1: Enqueue Google Maps API\nFirst, you need to load the Google Maps API script on your site. This is done by adding a function that includes your Google Maps API key. Make sure to replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.\n\nStep 2: Create a Shortcode\nNext, you'll create a shortcode that allows you to easily embed a map anywhere on your site. This shortcode accepts attributes like latitude, longitude, zoom, width, and height. These attributes let you customize the map's location and appearance.\n\nUsing the Shortcode\nOnce the code is added to your theme's functions.php file, you can use the shortcode [google_map] in your posts or pages. You can customize it by adding attributes like this:\n\n [google_map latitude=\"40.7128\" longitude=\"-74.0060\" zoom=\"12\" width=\"600px\" height=\"450px\"]\n\n\nThis will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.\n\nRemember, this method requires you to have a valid Google Maps API key, which you can obtain from the Google Cloud Platform."}},{"@type":"Question","name":"wordpress google maps tutorial","acceptedAnswer":{"@type":"Answer","text":"To add Google Maps to your WordPress site without using a plugin, you can use a bit of custom code. Here's a simple way to do it:\n\nStep 1: Enqueue Google Maps API\nFirst, you need to load the Google Maps API script on your site. This is done by adding a function that includes your Google Maps API key. Make sure to replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.\n\nStep 2: Create a Shortcode\nNext, you'll create a shortcode that allows you to easily embed a map anywhere on your site. This shortcode accepts attributes like latitude, longitude, zoom, width, and height. These attributes let you customize the map's location and appearance.\n\nUsing the Shortcode\nOnce the code is added to your theme's functions.php file, you can use the shortcode [google_map] in your posts or pages. You can customize it by adding attributes like this:\n\n [google_map latitude=\"40.7128\" longitude=\"-74.0060\" zoom=\"12\" width=\"600px\" height=\"450px\"]\n\n\nThis will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.\n\nRemember, this method requires you to have a valid Google Maps API key, which you can obtain from the Google Cloud Platform."}},{"@type":"Question","name":"google maps widget for wordpress","acceptedAnswer":{"@type":"Answer","text":"To add Google Maps to your WordPress site without using a plugin, you can use a bit of custom code. Here's a simple way to do it:\n\nStep 1: Enqueue Google Maps API\nFirst, you need to load the Google Maps API script on your site. This is done by adding a function that includes your Google Maps API key. Make sure to replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.\n\nStep 2: Create a Shortcode\nNext, you'll create a shortcode that allows you to easily embed a map anywhere on your site. This shortcode accepts attributes like latitude, longitude, zoom, width, and height. These attributes let you customize the map's location and appearance.\n\nUsing the Shortcode\nOnce the code is added to your theme's functions.php file, you can use the shortcode [google_map] in your posts or pages. You can customize it by adding attributes like this:\n\n [google_map latitude=\"40.7128\" longitude=\"-74.0060\" zoom=\"12\" width=\"600px\" height=\"450px\"]\n\n\nThis will display a Google Map centered on the specified latitude and longitude, with the desired zoom level and dimensions.\n\nRemember, this method requires you to have a valid Google Maps API key, which you can obtain from the Google Cloud Platform."}}]}]}