Map Styles: Change colors, hide certain features (landmarks, roads, transit lines) to match your brand. Many plugins offer pre-defined styles or allow you to import styles from tools like Snazzy Maps.
Marker Icons: Use custom images for your location markers instead of the default red pin.
Info Windows: Customize the content that appears when a user clicks on a marker.
Controls: Show/hide zoom controls, street view controls, full-screen buttons.
Polygons & Polylines: Draw custom shapes or lines on the map.
With Custom Code (Maps JavaScript API):
You have even more granular control with custom code:
Styling the Map
You can define an array of JSON objects to style your map.
Find pre-made styles on Snazzy Maps or create your own using the Google Maps Platform Styling Wizard.
Add the styles property to your Map constructor:
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: mountVernon,
mapTypeId: 'roadmap',
styles: [
// Your JSON style array goes here
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffcccc" }
]
}
]
});
Custom Marker Icons
Replace the default marker with your own image.
new google.maps.Marker({
position: mountVernon,
map: map,
title: "Mount Vernon, Illinois",
icon: {
url: 'https://yourwebsite.com/wp-content/uploads/custom-marker.png', // URL to your custom icon
scaledSize: new google.maps.Size(32, 32) // Size of the icon
}
});
Info Windows
Display information when a marker is clicked.
const marker = new google.maps.Marker({
position: mountVernon,
map: map,
title: "Our Office"
});
const infoWindow = new google.maps.InfoWindow({
content: '<h3>Our Headquarters</h3><p>123 Main Street, Mount Vernon, IL</p><p><a href="https://example.com">Visit Us</a></p>'
});
marker.addListener('click', () => {
infoWindow.open(map, marker);
});
Adding Multiple Markers
Loop through an array of locations to add multiple markers.
const locations = [
{ lat: 38.318353, lng: -88.903737, title: "Location A", description: "First Office" },
{ lat: 38.325000, lng: -88.910000, title: "Location B", description: "Second Branch" }
];
locations.forEach(loc => {
const marker = new google.maps.Marker({
position: { lat: loc.lat, lng: loc.lng },
map: map,
title: loc.title
});
const infoWindow = new google.maps.InfoWindow({
content: `<h3>${loc.title}</h3><p>${loc.description}</p>`
});
marker.addListener('click', () => {
infoWindow.open(map, marker);
});
});
Troubleshooting Common Google Maps Issues
Things happen. If you used this tutorial and had some issues, here are some leads to troubleshooting Google Maps from showing up properly in WordPress:
Map Not Displaying
"This page didn't load Google Maps correctly. See the JavaScript console for technical details." Error
Map Loads, but Markers Don't Appear
Slow Loading Map
Map Not Displaying
Check your API Key: Is it correct? Is it restricted properly?
Billing Enabled: Have you enabled billing for your Google Cloud Project?
API Enabled: Is the Maps JavaScript API enabled for your project?
Console Errors: Open your browser's developer console (F12) and check for JavaScript errors related to Google Maps.
Container Dimensions: Does your map div have a defined width and height?
Correct Callback: If using custom code, is callback=initMap (or your function name) correctly specified in the API script URL?
Plugin Settings: If using a plugin, double-check all its settings and ensure the shortcode is correctly placed.
"This page didn't load Google Maps correctly. See the JavaScript console for technical details." Error
This almost always indicates an issue with your API key or billing. Revisit the Google Cloud Platform Console, ensure billing is active, the correct APIs are enabled, and your API key restrictions are correctly set to allow your website's domain.
Map Loads, but Markers Don't Appear
Correct Coordinates: Are the latitude and longitude coordinates for your markers accurate?
Marker map Property: Is map: map correctly set in your google.maps.Marker constructor, pointing to your initialized map object?
Slow Loading Map
Too Many Markers: If you have hundreds or thousands of markers, consider using marker clustering or optimizing your data loading.
Excessive API Calls: Monitor your API usage in the Google Cloud Console.
