Savvy / Blog / WordPress Development / How to Add a Google Map to WordPress (Maps API, No Plugin)

How to Add a Google Map to WordPress (Maps API, No Plugin)

Hot (According to Analytics) •

By Roee Yossef • Updated on Nov 23, 2024 • No Comments

Google Maps is a powerful tool for displaying locations and directions on your WordPress website. While plugins make this easy, you can also embed Google Maps manually without adding extra bloat to your site.

This guide will show you how to achieve this with step-by-step instructions, including how to use the Google Maps API and add custom markers.

Step 1: Get a Google Maps API Key

To use Google Maps on your website, you need an API key. Follow these steps to generate one:

Visit the Google Cloud Console: Open the
Google Cloud Console and sign in using your Google account.
Create or Select a Project:
- Locate the project dropdown at the top of the page.
- Select an existing project, or click New Project to create a new one.
- Give the new project a name (e.g., “My Website Project”) and click Create.
Set Up Billing:
- Google Maps API requires an active billing account. Navigate to
  Billing in the Cloud Console.
- Follow the instructions to set up your billing account by adding your payment method.
- Note: Google offers a $200 monthly free usage tier, which covers most small websites. You’ll only be charged if your usage exceeds this limit.
Enable the Maps JavaScript API:
- Go to APIs & Services > Library in the left-hand menu.
- Search for Maps JavaScript API and click on it.
- Click Enable to activate the API for your selected project.
Go to Credentials:
- Select APIs & Services > Credentials from the left-hand menu.
- Click Create Credentials and choose API Key from the dropdown.
Restrict the API Key for Security:
- Click the Edit icon next to your API key.
- Under Application Restrictions, choose HTTP Referrers (Websites).
- Add your website’s domain(s) in the format https://yourwebsite.com/*. For local testing, add https://localhost/*.
- Under API Restrictions, select Restrict Key and choose Maps JavaScript API from the dropdown.
- Click Save to apply the restrictions.
Copy Your API Key:
Once you’ve set up and secured your API key, copy it. You’ll use this in the next steps to integrate Google Maps into your WordPress site.

Important: Ensure that billing is set up to avoid interruptions. Remember, Google’s $200 monthly free tier covers most basic map integrations.

Tip: Always restrict your API key to prevent unauthorized usage and extra charges.

Step 2: Add Google Maps to WordPress

Integrating Google Maps directly into your WordPress theme or page template involves embedding the code and ensuring it works seamlessly with your site design.

1. Enqueue the Google Maps Script

Add the following code to your theme’s functions.php file to load the Google Maps API:

function enqueue_google_maps() {
    wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY', null, null, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_google_maps' );

Replace YOUR_API_KEY with the API key you generated earlier.

2. Add the HTML for the Map

Insert the following HTML into your page or post using the WordPress editor:

<div id="map" style="width: 100%; height: 400px;"></div>

3. Initialize the Map with JavaScript

Create a new JavaScript file (e.g., maps.js) and include the following code to initialize the map:

function initMap() {
    let mapOptions = {
        center: { lat: 32.0853, lng: 34.7818 }, // Coordinates for Tel Aviv
        zoom: 12
    };
    let map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

It is better to use let instead of var. For more information, check out the post on JavaScript Variables and Constants.

Link this JavaScript file in your theme by adding it to your functions.php file:

function enqueue_map_script() {
    wp_enqueue_script( 'custom-map', get_template_directory_uri() . '/js/maps.js', array( 'google-maps' ), null, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_map_script' );

Update the path to maps.js based on your theme’s file structure.

At this point, you should already see the map displayed on your site. If the map is not appearing, refer to the Troubleshooting Common Issues section. Now, let’s explore how to customize the map to better fit your design and user experience needs.

Add Markers to the Map

To add custom markers to your map, update the initMap function as follows:

function initMap() {
    let mapOptions = {
        center: { lat: 32.0853, lng: 34.7818 }, // Coordinates for Tel Aviv
        zoom: 12
    };
    let map = new google.maps.Map(document.getElementById('map'), mapOptions);

    // Add multiple markers
    let locations = [
        { lat: 32.0853, lng: 34.7818, title: 'Tel Aviv' },
        { lat: 32.0623, lng: 34.7691, title: 'Ramat Gan' }
    ];

    locations.forEach(function(location) {
        new google.maps.Marker({
            position: { lat: location.lat, lng: location.lng },
            map: map,
            title: location.title
        });
    });
}

The code above demonstrates how to add multiple custom markers to your Google Map. Each marker represents a specific location, defined by its latitude, longitude, and an optional title. In this example, markers are added for Tel Aviv and Ramat Gan.

Customizing Markers:

You can further customize your markers by adding properties such as icon to use custom images for markers, or animation to add visual effects like a bounce animation.

new google.maps.Marker({
    position: { lat: 32.0853, lng: 34.7818 },
    map: map,
    title: 'Tel Aviv',
    icon: 'https://example.com/custom-icon.png', // Custom icon URL
    animation: google.maps.Animation.DROP // Drop animation effect
});

Tip: Use descriptive titles and custom icons to make your markers more informative and visually appealing for users.

Change the Map Design

You can customize the map’s appearance by applying styles. Below are three complete design options for your map:

Night Style

let nightStyle = [
    { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
    { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
    { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
    { featureType: "administrative.locality", elementType: "labels.text.fill", stylers: [{ color: "#d59563" }] },
    { featureType: "poi", elementType: "labels.text.fill", stylers: [{ color: "#d59563" }] },
    { featureType: "poi.park", elementType: "geometry", stylers: [{ color: "#263c3f" }] },
    { featureType: "poi.park", elementType: "labels.text.fill", stylers: [{ color: "#6b9a76" }] },
    { featureType: "road", elementType: "geometry", stylers: [{ color: "#38414e" }] },
    { featureType: "road", elementType: "geometry.stroke", stylers: [{ color: "#212a37" }] },
    { featureType: "road", elementType: "labels.text.fill", stylers: [{ color: "#9ca5b3" }] },
    { featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#746855" }] },
    { featureType: "road.highway", elementType: "geometry.stroke", stylers: [{ color: "#1f2835" }] },
    { featureType: "road.highway", elementType: "labels.text.fill", stylers: [{ color: "#f3d19c" }] },
    { featureType: "transit", elementType: "geometry", stylers: [{ color: "#2f3948" }] },
    { featureType: "transit.station", elementType: "labels.text.fill", stylers: [{ color: "#d59563" }] },
    { featureType: "water", elementType: "geometry", stylers: [{ color: "#17263c" }] },
    { featureType: "water", elementType: "labels.text.fill", stylers: [{ color: "#515c6d" }] },
    { featureType: "water", elementType: "labels.text.stroke", stylers: [{ color: "#17263c" }] }
];

Retro Style

let retroStyle = [
    { elementType: "geometry", stylers: [{ color: "#ebe3cd" }] },
    { elementType: "labels.text.fill", stylers: [{ color: "#523735" }] },
    { elementType: "labels.text.stroke", stylers: [{ color: "#f5f1e6" }] },
    { featureType: "administrative", elementType: "geometry.stroke", stylers: [{ color: "#c9b2a6" }] },
    { featureType: "administrative.land_parcel", elementType: "geometry.stroke", stylers: [{ color: "#dcd2be" }] },
    { featureType: "administrative.land_parcel", elementType: "labels.text.fill", stylers: [{ color: "#ae9e90" }] },
    { featureType: "landscape.natural", elementType: "geometry", stylers: [{ color: "#dfd2ae" }] },
    { featureType: "poi", elementType: "geometry", stylers: [{ color: "#dfd2ae" }] },
    { featureType: "poi", elementType: "labels.text.fill", stylers: [{ color: "#93817c" }] },
    { featureType: "poi.park", elementType: "geometry.fill", stylers: [{ color: "#a5b076" }] },
    { featureType: "poi.park", elementType: "labels.text.fill", stylers: [{ color: "#447530" }] },
    { featureType: "road", elementType: "geometry", stylers: [{ color: "#f5f1e6" }] },
    { featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#fdfcf8" }] },
    { featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#f8c967" }] },
    { featureType: "road.highway", elementType: "geometry.stroke", stylers: [{ color: "#e9bc62" }] },
    { featureType: "road.highway.controlled_access", elementType: "geometry", stylers: [{ color: "#e98d58" }] },
    { featureType: "road.highway.controlled_access", elementType: "geometry.stroke", stylers: [{ color: "#db8555" }] },
    { featureType: "road.local", elementType: "labels.text.fill", stylers: [{ color: "#806b63" }] },
    { featureType: "transit.line", elementType: "geometry", stylers: [{ color: "#dfd2ae" }] },
    { featureType: "transit.line", elementType: "labels.text.fill", stylers: [{ color: "#8f7d77" }] },
    { featureType: "transit.line", elementType: "labels.text.stroke", stylers: [{ color: "#ebe3cd" }] },
    { featureType: "water", elementType: "geometry.fill", stylers: [{ color: "#b9d3c2" }] },
    { featureType: "water", elementType: "labels.text.fill", stylers: [{ color: "#92998d" }] }
];

To apply any style, use the `styles` property in the `mapOptions` object:

let mapOptions = {
    center: { lat: 32.0853, lng: 34.7818 },
    zoom: 12,
    styles: silverStyle // Change to nightStyle or retroStyle
};

Tip: Experiment with different styles to align the map’s appearance with your website’s design.

Changing the Language of Google Maps

You can customize the language of your Google Maps interface by adding the language parameter to the API URL. This parameter sets the language for labels, buttons, and other map interface elements.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&language=fr"></script>

In this example, the language=fr parameter sets the map’s interface to French. Replace fr with the desired language code (e.g., en for English, es for Spanish, or he for Hebrew).

For further localization, you can also add the region parameter:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&language=es&region=ES"></script>

Here, region=ES suggests Spanish region-specific details for the map.

Refer to the Google Maps documentation for a full list of supported language codes.

Troubleshooting Common Issues

Addressing these common issues ensures a seamless integration of Google Maps into your WordPress site, providing users with a reliable and engaging mapping experience.

Map Not Displaying: Ensure your API key is correct and the Maps JavaScript API is enabled in the Google Cloud Console.
API Key Errors: Check if your key is restricted correctly. Add https://yourwebsite.com/* or http://localhost/* for local development. Note that wildcards may not always function as expected, so specify your domains carefully.
RefererNotAllowedMapError: Verify that the referrers in your API restrictions include the exact domain you’re using during development or production.
Mixed Content Warning: Ensure your website and the Google Maps script are both served over HTTPS.
Map Not Loading After Changes: Clear your browser cache or use an incognito window to test the latest updates.
Marker Not Appearing: Double-check the coordinates and syntax in your maps.js file.

Tip: Use your browser’s developer tools (console and network tabs) to debug API errors and missing resources.

Conclusion

Adding Google Maps without a plugin gives you complete control over its functionality and appearance, reduces reliance on third-party tools, and improves your site’s performance by minimizing unnecessary code overhead.

Better Performance: Plugins can sometimes slow down your website.
Full Control: You can customize the map exactly how you want it.
Learning Opportunity: You’ll gain valuable knowledge about using APIs and JavaScript.

By following the steps above, you can embed a responsive, customizable map that enhances user experience. Let us know in the comments if you have any questions or suggestions for further enhancements!