How to Integrate (Customized) Google Maps into WordPress without Plugins

Google Maps integration can greatly enhance the functionality and user experience of your WordPress site. In this tutorial, we will walk you through the process of integrating Google Maps without relying on plugins. You will learn how to enable billing, obtain an API key, enable required API services, add markers with custom icons, display info windows, implement map interactions, and apply custom styles. Whether you’re a beginner or a pro developer, this step-by-step guide will help you seamlessly add customized maps to your website. So, let’s get started!

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Enable Billing in Google Cloud Platform

To access the Google Maps API, you need to enable billing in the Google Cloud Platform. This is necessary to cover any usage beyond the free limits. Here’s how you can enable billing:

1. Visit the Google Cloud Console.
2. Create a new billing account and set up a billing profile.
3. Link the billing account to your project.

Obtain a Google Maps API Key

To utilize the Google Maps API, you’ll need an API key. Follow these steps:

1. Go to the Google Cloud Console.
2. Create a new project or select an existing one.
3. Enable the necessary Google Maps API services for your project. Enable services like Maps JavaScript API and Geocoding API.
4. Generate an API key with the necessary restrictions.

Enqueue Google Maps JavaScript API

To enqueue the Google Maps JavaScript API with your API key, you need to add the following code snippet to your WordPress theme’s functions.php file:

function enqueue_google_maps_api() {
	wp_enqueue_script( 'google-maps-api', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_google_maps_api' );
Code language: PHP (php)

Remember to replace YOUR_API_KEY with your actual API key.

Create a Map Container

Choose the WordPress page or post where you want to display the map and add a container element to hold it. You can use the following HTML code snippet as an example:

<div id="map-container"></div>
Code language: HTML, XML (xml)

Add a Single Marker to the Map

To add a single marker to your map, follow these steps:

1. Create a new JavaScript file called “custom.js” in your child theme’s “js” folder (create the folder if it doesn’t exist).
2. Open the “custom.js” file and initialize the map and define the marker position using the following code snippet:

(function($) {
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map-container'), {
            center: { lat: 40.712776, lng: -74.005974 },
            zoom: 10
        });

        var marker = new google.maps.Marker({
            position: { lat: 40.712776, lng: -74.005974 },
            map: map,
            title: 'Marker Title'
        });
    }
    
    initMap();
})(jQuery);
Code language: JavaScript (javascript)

Replace the latitude and longitude coordinates (lat and lng) with your desired location. Customize the marker title as needed.

Display Multiple Markers on the Map

To display multiple markers on the map, add the following code snippet to the existing “custom.js” file:

(function($) {
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map-container'), {
            center: { lat: 40.712776, lng: -74.005974 },
            zoom: 10
        });

        var markers = [
            { lat: 40.712776, lng: -74.005974 }, // Marker 1
            { lat: 40.728157, lng: -73.995361 }, // Marker 2
            { lat: 40.739308, lng: -74.002988 }  // Marker 3
        ];

        for (var i = 0; i < markers.length; i++) {
            var marker = new google.maps.Marker({
                position: markers[i],
                map: map,
                title: 'Marker ' + (i + 1)
            });
        }
    }
    
    initMap();
})(jQuery);
Code language: JavaScript (javascript)

Customize the markerPositions array with your desired latitude and longitude coordinates for each marker.

Add Markers with Custom Icons and Info Windows

To add markers with custom icons to your map, add the following code snippet to the existing “custom.js” file:

(function($) {
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map-container'), {
            center: { lat: 40.712776, lng: -74.005974 },
            zoom: 10
        });

        var markers = [
            {
                position: { lat: 40.712776, lng: -74.005974 },
                icon: 'path_to_icon.png',
                title: 'Marker Title 1',
                info: 'Marker Info 1'
            },
            {
                position: { lat: 40.728157, lng: -73.995361 },
                icon: 'path_to_icon.png',
                title: 'Marker Title 2',
                info: 'Marker Info 2'
            }
            // Add more markers as needed
        ];

        for (var i = 0; i < markers.length; i++) {
            var marker = new google.maps.Marker({
                position: markers[i].position,
                map: map,
                icon: markers[i].icon,
                title: markers[i].title
            });

            var infoWindow = new google.maps.InfoWindow({
                content: markers[i].info
            });

            marker.addListener('click', function() {
                infoWindow.open(map, marker);
            });
        }
    }
    
    initMap();
})(jQuery);
Code language: PHP (php)

Replace the latitude and longitude coordinates (lat and lng) with the desired marker positions. Also, specify the path to your custom marker icons (icon) and customize the marker titles (title) and information (info).

Add Cluster Markers

To create cluster markers that group multiple markers together, we’ll use the MarkerClusterer library. Enqueue the extra script. Your enqueue function would look like this:

function enqueue_google_maps_api() {
	wp_enqueue_script( 'google-maps-api', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap', array(), null, true );
	wp_enqueue_script( 'google-maps-marker-clusterer', 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js', array( 'jquery' ), '1.0', true );

}
add_action( 'wp_enqueue_scripts', 'enqueue_google_maps_api' );
Code language: PHP (php)

(function($) {
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map-container'), {
            center: { lat: 40.712776, lng: -74.005974 },
            zoom: 10
        });

        var markers = [
            {
                position: { lat: 40.712776, lng: -74.005974 },
                icon: 'path_to_icon.png',
                title: 'Marker Title 1',
                info: 'Marker Info 1'
            },
            {
                position: { lat: 40.728157, lng: -73.995361 },
                icon: 'path_to_icon.png',
                title: 'Marker Title 2',
                info: 'Marker Info 2'
            }
            // Add more markers as needed
        ];

        var markerObjects = [];

        for (var i = 0; i < markers.length; i++) {
            var marker = new google.maps.Marker({
                position: markers[i].position,
                map: map,
                icon: markers[i].icon,
                title: markers[i].title
            });

            var infoWindow = new google.maps.InfoWindow({
                content: markers[i].info
            });

            marker.addListener('click', function() {
                infoWindow.open(map, this);
            });

            markerObjects.push(marker);
        }

        var markerCluster = new MarkerClusterer(map, markerObjects, {
            imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
        });
    }
    
    initMap();
})(jQuery);

Code language: PHP (php)

In this updated code, we use the MarkerClusterer library provided by the Google Maps JavaScript API to cluster the markers. The markerObjects array holds the instances of google.maps.Marker objects. We then create a MarkerClusterer instance, passing the map, marker objects, and the imagePath option to specify the image path for the cluster icons.

Apply Custom Styles to the Map

To apply custom styles to your map, add the following code snippet after initializing the map in the “custom.js” file:

(function($) {
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map-container'), {
            center: { lat: 40.712776, lng: -74.005974 },
            zoom: 10
        });

        // Add markers and info windows code here...

        // Apply custom styles to the map
        var mapStyles = [
            {
                featureType: 'landscape',
                elementType: 'all',
                stylers: [
                    { saturation: -100 },
                    { lightness: 65 },
                    { visibility: 'on' }
                ]
            },
            // Add more style rules as needed
        ];

        map.setOptions({ styles: mapStyles });
    }
    
    initMap();
})(jQuery);
Code language: PHP (php)

Customize the mapStyles array to define your desired map styles using the available options. To customize the map styles, you can refer to the Google Maps Styling Wizard for an interactive way to create and customize map styles. Additionally, you can explore platforms like Snazzy Maps that offer a collection of pre-designed map styles or allow you to create your own. These platforms provide a convenient way to generate custom styles and obtain the corresponding code to apply to your map.

That’s it! You’ve successfully integrated Google Maps into your WordPress site without relying on plugins. By following this comprehensive tutorial, you’ve learned how to set up a child theme, enable billing in the Google Cloud Platform, obtain a Google Maps API key, enqueue the API, create a map container, add a single marker, and display multiple markers. Now, go ahead and create engaging and personalized maps to enhance your website!