Overview

Maps are essential for directory, real estate, classifieds, and location-based websites. They help users:

• Visualize where listings are located
• Search for items near their location
• Get directions to businesses or properties
• Browse listings by geographic area
• Filter results based on distance

Map Features in PremiumPress

• Interactive pins: Click markers to see listing details
• Auto-geocoding: Convert addresses to coordinates automatically
• Radius search: Find listings within X miles/kilometers
• Clustering: Group nearby markers for better performance
• Custom markers: Use custom icons for different categories
• User location: Detect visitor's current location
• Street view: Integrate Google Street View (Google Maps only)

Choosing a Map Provider

Your PremiumPress theme supports two map providers. Here's how to choose:

Google Maps

Best for: Most websites, especially if you need Street View

Pros:

• Most accurate and up-to-date map data worldwide
• Familiar interface that users recognize
• Includes Street View and satellite imagery
• Excellent geocoding accuracy
• Works well in all countries
• Better business/POI data

Cons:

• Requires API key setup
• Free tier includes 28,000 map loads/month
• Costs money after free quota (though most sites stay free)
• Requires credit card on file

Cost: Free for most small to medium websites ($200/month free credit)

Mapbox

Best for: High-traffic sites or those wanting custom map styles

Pros:

• More generous free tier (50,000 loads/month)
• Highly customizable map styles
• Modern, beautiful default design
• No credit card required for free tier
• Better pricing for high-volume sites
• Excellent performance

Cons:

• Less familiar to users than Google Maps
• No Street View integration
• Geocoding may be less accurate in some regions
• Fewer POI/business data

Cost: Free for up to 50,000 loads/month

Our Recommendation

Use Google Maps if:

• You're starting a new site (free tier is generous)
• You need Street View
• You want the most accurate location data
• Your users expect Google Maps

Use Mapbox if:

• You expect high traffic (50,000+ monthly loads)
• You want custom map styling
• You don't want to provide credit card info
• You prefer a modern, minimalist map design

Setting Up Google Maps

Follow these steps to enable Google Maps on your website.

Step 1: Create a Google Cloud Account

1. Go to https://console.cloud.google.com/
2. Sign in with your Google account (or create one)
3. Accept the terms of service
4. You'll need to add a credit card (required but won't be charged within free tier)

Step 2: Create a New Project

1. Click the project dropdown at the top of the page
2. Click "New Project"
3. Enter a project name (e.g., "My Website Maps")
4. Click "Create"
5. Wait for the project to be created (takes a few seconds)
6. Select your new project from the dropdown

Step 3: Enable Required APIs

1. Go to "APIs & Services" > "Library"
2. Search for and enable these APIs:
   • Maps JavaScript API (required)
   • Geocoding API (required)
   • Places API (recommended)
   • Geolocation API (optional, for user location detection)
3. Click each API and press the "Enable" button

Step 4: Create API Key

1. Go to "APIs & Services" > "Credentials"
2. Click "Create Credentials" > "API Key"
3. Your API key will be generated
4. Click "Copy" to copy the key
5. Important: Don't close this window yet

Step 5: Restrict Your API Key (Important for Security)

1. Click "Restrict Key" in the popup
2. Under "Application restrictions":
   • Select "HTTP referrers (websites)"
3. Under "Website restrictions", click "Add an item"
4. Add your domain:

   yourdomain.com/*
   *.yourdomain.com/*
               

5. Under "API restrictions":
   • Select "Restrict key"
   • Check: Maps JavaScript API, Geocoding API, Places API
6. Click "Save"

Step 6: Add API Key to PremiumPress

1. Log into your WordPress admin
2. Go to PremiumPress > Settings > Maps
3. Select "Google Maps" as your map provider
4. Paste your API key in the "Google Maps API Key" field
5. Click "Save Settings"
6. Test the map on your site to confirm it's working

Monitoring Your Usage

1. Go to Google Cloud Console
2. Click "APIs & Services" > "Dashboard"
3. View your daily/monthly API requests
4. You get $200 free credit per month (roughly 28,000 map loads)
5. Set up billing alerts to avoid unexpected charges

Video Tutorial: Watch how to setup Google Maps

Setting Up Mapbox

Mapbox is a great alternative to Google Maps with a more generous free tier.

Step 1: Create a Mapbox Account

1. Go to https://www.mapbox.com/
2. Click "Sign Up"
3. Enter your email and create a password
4. Verify your email address
5. No credit card required for free tier

Step 2: Get Your Access Token

1. After logging in, you'll see your account dashboard
2. Your default access token is displayed on the main page
3. Copy the "Default public token"
4. Keep this page open

Step 3: Create a Custom Token (Recommended)

For better security, create a token specifically for your website:

1. Go to Account > Access Tokens
2. Click "Create a token"
3. Give it a name (e.g., "My Website")
4. Under "Token restrictions", add your website URL
5. Select these scopes:
   • styles:tiles (required)
   • styles:read (required)
   • fonts:read (recommended)
   • datasets:read (optional)
6. Click "Create token"
7. Copy your new token

Step 4: Add Token to PremiumPress

1. Log into your WordPress admin
2. Go to PremiumPress > Settings > Maps
3. Select "Mapbox" as your map provider
4. Paste your access token in the "Mapbox Access Token" field
5. Click "Save Settings"
6. Test the map on your site

Step 5: Choose a Map Style (Optional)

Mapbox offers several pre-built styles:

• Streets: Default street map (recommended)
• Outdoors: Emphasizes topography and outdoor features
• Light: Minimal, clean design
• Dark: Dark theme, great for modern websites
• Satellite: Satellite imagery
• Satellite Streets: Satellite with street labels

1. In PremiumPress settings, find "Map Style"
2. Select your preferred style
3. Or enter a custom style URL from Mapbox Studio
4. Save settings

Monitoring Your Usage

1. Go to Mapbox Account
2. Click "Statistics"
3. View your monthly map loads
4. Free tier: 50,000 loads/month
5. After that: $5 per 1,000 additional loads

Configuring Map Settings

Once you've set up your map provider, customize how maps appear on your site.

Basic Map Settings

Go to PremiumPress > Settings > Maps

Default Map Center

• Latitude: Default center point latitude
• Longitude: Default center point longitude
• Zoom Level: Default zoom (1-20, where 20 is closest)
• Example: New York City: 40.7128, -74.0060, Zoom: 12

Map Type

• Roadmap: Standard street map (default)
• Satellite: Satellite imagery only
• Hybrid: Satellite with street labels
• Terrain: Shows elevation and terrain features

Map Controls

Enable/disable these controls:

• Zoom controls: +/- buttons to zoom in/out
• Street View: Pegman icon for Street View (Google Maps only)
• Map type selector: Switch between map/satellite/terrain
• Fullscreen: Button to view map in fullscreen
• Scale: Distance scale at bottom of map

Marker Settings

Marker Clustering

When enabled, nearby markers are grouped together for better performance:

• Enable clustering: Yes/No
• Cluster radius: Distance before markers merge (50-200 pixels)
• Max zoom: Maximum zoom level where clustering occurs

Recommendation: Enable clustering if you have 50+ listings