Content Pilot Google Maps

Google Maps utility for displaying interactive maps with authenticated API key.

Features

• 🗺️ Interactive Google Maps integration
• 📍 Address geocoding and marker placement
• 🎯 Direct coordinate mapping support
• ⚙️ Customizable map settings and options
• 🔧 ES6+ modern JavaScript implementation
• 🔄 Backward compatibility with jQuery

Installation

Install the package:

npm install @contentpilot/google-maps --save-dev

Import the module:

import CpGoogleMaps from '@contentpilot/google-maps';
// or
const CpGoogleMaps = require('@contentpilot/google-maps');

Usage

Using Address (Geocoding):

import CpGoogleMaps from '@contentpilot/google-maps';

const mapData = {
    street: '123 Main St',
    city: 'Dallas',
    state: 'TX',
    zip: '75201',
    country: 'USA',
    container: 'google-maps'
};

new CpGoogleMaps(mapData, {
    zoom: 15,
    draggable: true
});

Using Coordinates (Direct):

import CpGoogleMaps from '@contentpilot/google-maps';

const mapData = {
    latitude: 32.7767,
    longitude: -96.7970,
    title: 'Dallas Office',
    container: 'google-maps'
};

new CpGoogleMaps(mapData, {
    zoom: 15,
    draggable: true
});

jQuery Compatibility:

$('.google-maps').each(function() {
    new CpGoogleMaps(data, options);
});

Data Attributes

The plugin accepts the following data attributes:

For Address Geocoding:

• street - Street address
• city - City name
• state - State/province
• zip - Postal/ZIP code
• country - Country name
• title - Marker tooltip text (optional)
• container - DOM element ID (optional, defaults to 'google-maps')

For Coordinate Mapping:

• latitude - Latitude coordinate (decimal degrees)
• longitude - Longitude coordinate (decimal degrees)
• title - Marker tooltip text (optional)
• container - DOM element ID (optional, defaults to 'google-maps')

Configuration

Setup Google Maps API:

1. Sign up for API key at https://console.cloud.google.com

2. Add constants to functions.php

define( 'CLIENT_PREFIX_GOOGLE_MAPS', 'API_KEY' );
define( 'CLIENT_PREFIX_TEXTDOMAIN', 'theme-prefix' );
define( 'CLIENT_PREFIX_VERSION', '1.0.0' );

3. Enqueue URL with API key

add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_google_maps_api' );
/**
 * Enqueue Google Maps API with authentication key.
 *
 * @since  1.0.0
 */
function theme_prefix_enqueue_google_maps_api() {
	wp_enqueue_script(
		CLIENT_PREFIX_TEXTDOMAIN . '-google-maps',
		'//maps.google.com/maps/api/js?key=' . CLIENT_PREFIX_GOOGLE_MAPS . '&libraries=marker',
		array( 'global' ),
		CLIENT_PREFIX_VERSION,
		true
	);
}

License

MIT