Why Use Interactive Maps?

Interactive maps are beneficial for various types of websites:

1. Business Directories: Show locations of stores or offices.
2. Real Estate Listings: Display properties for sale or rent.
3. Event Planning: Highlight event venues and related locations.
4. Travel Blogs: Share travel itineraries and points of interest.

1. Setting Up Your Wix Studio Environment

Before you start creating interactive maps, ensure your Wix Studio environment is properly set up.

Enabling Velo by Wix:

1. Access Your Site:
   • Log in to your Wix account and open the site you want to develop.
2. Enable Dev Mode:
   • Toggle the Dev Mode switch at the top of the Wix Editor to open Velo’s development tools.

2. Adding a Map to Your Wix Site

Wix Studio allows you to add Google Maps directly to your site using its built-in elements.

Adding Google Maps:

1. Drag and Drop Map Element:
   • Go to the Add menu, select Interactive, and drag the Google Maps element onto your page.
2. Configure the Map:
   • Set the initial location, zoom level, and map type (e.g., Roadmap, Satellite) through the map settings.

3. Customizing Map Markers

Custom markers can make your map more visually appealing and provide additional information to users.

Using Google Maps API: To add custom markers, you’ll need to use the Google Maps JavaScript API.

Get an API Key:

1. Google Cloud Console:
   • Go to the Google Cloud Console, create a new project, and enable the Maps JavaScript API.
   • Generate an API key.

Add the API Key to Your Wix Site:

1. Site Code:
   • Add the following code to your site’s code in the Code Panel:
     javascript

     Copy code

     $w.onReady(function () { const apiKey = 'YOUR_API_KEY'; const script = document.createElement('script'); script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=initMap`; script.defer = true; script.async = true; document.head.appendChild(script); }); function initMap() { const map = new google.maps.Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8 }); const marker = new google.maps.Marker({ position: { lat: -34.397, lng: 150.644 }, map: map, title: 'Hello World!' }); }

Styling Custom Markers:

1. Create Custom Icons:
   • Design custom marker icons (e.g., PNG images).
2. Add Custom Markers to the Map:
   javascript

   Copy code

   const customIcon = 'URL_TO_YOUR_CUSTOM_ICON'; const marker = new google.maps.Marker({ position: { lat: -34.397, lng: 150.644 }, map: map, icon: customIcon, title: 'Custom Marker!' });

4. Adding Custom Data to Markers

Integrating custom data with your map markers can provide additional context and interactivity.

Example: Displaying Information Windows:

1. Set Up Data Collection:
   • Create a data collection in Wix (e.g., Locations) with fields like latitude, longitude, title, and description.
2. Fetch Data and Add Markers:
   javascript

   Copy code

   import wixData from 'wix-data'; $w.onReady(function () { wixData.query('Locations') .find() .then(results => { results.items.forEach(item => { const marker = new google.maps.Marker({ position: { lat: item.latitude, lng: item.longitude }, map: map, title: item.title }); const infoWindow = new google.maps.InfoWindow({ content: `<h3>${item.title}</h3><p>${item.description}</p>` }); marker.addListener('click', () => { infoWindow.open(map, marker); }); }); }); });

5. Enhancing User Interaction with Additional Features

Interactive maps can be further enhanced with features like filters, clustering, and user input.

Adding Filters:

1. Create Filter Options:
   • Add dropdowns or checkboxes for filtering criteria (e.g., categories, distance).
2. Update Markers Based on Filters:
   javascript

   Copy code

   $w('#filterDropdown').onChange(() => { const selectedCategory = $w('#filterDropdown').value; wixData.query('Locations') .eq('category', selectedCategory) .find() .then(results => { // Clear existing markers and add new ones based on the filter }); });

Implementing Marker Clustering:

1. Add MarkerClusterer Library:
   html

   Copy code

   <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
2. Cluster Markers:
   javascript

   Copy code

   const markers = results.items.map(item => new google.maps.Marker({ position: { lat: item.latitude, lng: item.longitude }, map: map, title: item.title })); new MarkerClusterer(map, markers, { imagePath: 'URL_TO_CLUSTER_IMAGES' });

Allowing User Input:

1. Add Form Elements:
   • Add input fields and a button for users to add new markers.
2. Save User Data:
   javascript

   Copy code

   $w('#addMarkerButton').onClick(() => { const lat = parseFloat($w('#latitudeInput').value); const lng = parseFloat($w('#longitudeInput').value); const title = $w('#titleInput').value; const description = $w('#descriptionInput').value; wixData.insert('Locations', { latitude: lat, longitude: lng, title, description }) .then(() => { // Add the new marker to the map }); });