How to Embed Google Maps in WordPress Without Using Plugins

Google Maps is one of the best ways to display your location or business location online. Although there are many plugins that simplify the process of embedding maps, you can do it manually without the need for any external plugin. In this guide, we will go through the process of embedding a Google Map in a WordPress site step by step, with all the details explained for beginners.

Step 1: Get the Embed Code from Google Maps

1. Open Google Maps: Go to
   maps.google.com in your browser.
2. Search for the location: Type the name of the place or address you want to display on your map and press Enter.
3. Click the Share button: After the location appears on the map, click the Share icon in the sidebar or next to the address (sometimes it’s within a dropdown menu).
4. Select the “Embed a Map” tab: In the popup window, go to the Embed a Map tab.
5. Copy the Embed Code: Below the map, you will find the iframe code. Click Copy HTML Link or manually copy the code.

The embed code will look something like this:

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy">
</iframe>

Step 2: Add the Embed Code to a Page or Post in WordPress

There are several ways to embed the code in WordPress, here are the two most common methods:

1. Using the Gutenberg Block Editor

1. Open the block editor in WordPress when creating or editing a page/post.
2. Click the (+) icon to add a new block.
3. Search for the Custom HTML block and add it.
4. Paste the embed code (iframe) you copied from Google Maps into this block.
5. Save the changes or publish the content and preview the map.

2. Using the Classic Editor

1. When editing a post or page in the Classic Editor, switch to Text mode instead of Visual mode.
2. Paste the iframe code where you want the map to appear.
3. Save the changes and then preview the page to ensure the map appears correctly.

Step 3: Customize the Map Size and Appearance

You can adjust the map size and style according to your site’s needs:

• Change width and height: In the iframe code, you can adjust the values of width and height as desired, for example: width="100%" height="400".
• Hide the border: By using the style="border:0;" property, you can remove the gray border around the map.
• Add custom CSS: If you want to further customize the design, place the iframe inside a div container with a class and write your styles in the style.css file or in the “Additional CSS” section.

<div class="map-container">
    <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1..."
        width="100%"
        height="400"
        style="border:0;"
        allowfullscreen=""
        loading="lazy">
    </iframe>
</div>

.map-container {
    max-width: 800px;
    margin: 0 auto; /* Centers the map on the page */
    /* You can add more properties as needed */
}

Step 4: Improve Performance and Speed

Keep in mind that embedding Google Maps adds additional requests to your site, which could affect load times. Here are some tips:

• Lazy Loading: If not enabled by default in WordPress, you can enable lazy loading for embedded iframes so that the map only loads when the user scrolls to it.
• Reduce Dimensions: If the map is too large, reducing the dimensions can help speed up loading.
• Check for unnecessary plugins: Ensure you’re not embedding any unnecessary libraries or tools with the map.

Step 5: Additional Tips for a Better User Experience

• Accurate Location Pins: If you want to display a specific location, make sure to drop an accurate pin rather than just listing the city.
• Adding Address and Directions: You can also link your location to Google Maps Directions so users can find the best route to your place.
• Mobile Compatibility: Use percentage width (width=”100%”) to ensure the map displays well on small screens.

The Importance of Having a Professional Site with ITQAN

Embedding a map with simple steps adds a professional touch to your site and helps your visitors easily find your location or your branch locations. However, embedding Google Maps is just one detail in a much larger set of factors that determine how exceptional your website is. From attractive design to fast load times and security, all these elements play a significant role in your site’s success.

This is where Itqan comes in; we provide comprehensive WordPress development services with a high level of professionalism, focusing on:

• High-Quality Design: Attractive user interfaces that are comfortable for Arabic-speaking users.
• Performance and Security Optimization: We ensure that your site is fast, secure, and compliant with the latest standards.
• Support and Consultation: We provide advice and technical solutions to ensure the success of your digital project.

Contact Us Now!

If you need help building or developing a comprehensive WordPress site, or want to professionally add Google Maps and other elements, don’t hesitate to get in touch with the Itqan team. Start your digital journey with us through the following link:

Contact ITQAN

Elevate your visitors’ experience and make them feel the professionalism and ease with every click. Let us help you build a distinguished digital presence!