Having an interactive map on your website can significantly enhance the user experience, especially if you're running a business that requires location-based searches. In this blog post, we’ll go through the steps to embed a Google Maps iFrame with a custom search feature, allowing users to enter an address and find locations directly from your Wix website.
Step 1: Get Google Maps API Key
To create a custom map with search functionality, you’ll need to use the Google Maps API. Start by obtaining an API key.
Go to the Google Cloud Platform Console.
Click the project drop-down and create a new project.
Once you're in your project, go to the navigation menu and select APIs & Services > Dashboard.
Click “ENABLE APIS AND SERVICES”.
Search for "Google Maps JavaScript API" and click on it.
Click "Enable".
In the credentials tab, click “Create credentials” and choose API key.
Note: Make sure to secure your API key by restricting it to your website's domain.
Step 2: Embed Google Maps iframe on Wix
Now that you have your API key, it’s time to embed the map into your Wix website.
Log in to your Wix account and select the website you want to edit.
Click on ‘Edit Site’ to enter the Wix website editor.
Navigate to the page where you want to add the Google Maps.
Click on the ‘Add’ (+) button on the left-hand side menu.
Select ‘Embed’ from the dropdown menu and then choose ‘HTML iFrame’.
An HTML widget will appear on your page. Click on it to access the settings.
Choose the ‘Enter Code’ option and paste the following code, replacing YOUR_API_KEY with the API key you obtained earlier:
<html>
<head>
<title>Google Maps</title><script src="https://maps.googleapis.com/maps/api/js?key[YOUR_API_KEY]">
</script>
<script>
let map;
function initMap() {
const lat = 48.001844; // Latitude of chosen center
const lng = -72.474201; // Longitude of chosen center
const mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN,
streetViewControl: false, // Disable street view
zoomControl: false, // Disable zoom control
fullscreenControl: false, // Disable zooming by scroll,
scrollwheel: false, // Disable zooming by scroll,
};
map = new google.maps.Map(document.getElementById("map"), mapOptions); // Listen for the drag event
google.maps.event.addListener(map, 'drag', function() { var center = map.getCenter();
window.parent.postMessage({
type: 'updateMapCenter',
lat: center.lat(),
lng: center.lng()
}, '*');
});
}
function updateMapCenter(lat, lng, zoom) {
const newCenter = new google.maps.LatLng(lat, lng); map.setCenter(newCenter);
map.setZoom(zoom);
}
window.addEventListener('message', function(event) {
if (event.data && event.data.type === 'updateMapCenter') { updateMapCenter(event.data.lat, event.data.lng, event.data.zoom); } }, false);
</script>
</head>
<body onload="initMap()"style="margin:0;"><divid="map"style="width:100%; height:100%;">
</div>
</body>
</html>
The code starts with the <head> tag, where the title of the page is set to "Google Maps."
Next, there is a <script> tag that includes the Google Maps API by specifying its source as "https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]". The [YOUR_API_KEY] should be replaced with an actual API key obtained from the Google Cloud Platform console.
initMap(): This function initializes the map by creating a new google.maps.Map object. It sets the center of the map to the coordinates specified by lat and lng (latitude and longitude) and sets the zoom level to 6. The map type is set to google.maps.MapTypeId.TERRAIN, which displays a physical map based on terrain information. Various controls like street view, zoom control, fullscreen control, and scrollwheel are disabled.
updateMapCenter(lat, lng, zoom): This function is called when a message with the type 'updateMapCenter' is received. It takes latitude, longitude, and zoom level as parameters and updates the map's center and zoom accordingly.
The code also includes an event listener that listens for messages sent via the window.postMessage() method. When a message is received and its type is 'updateMapCenter', the updateMapCenter() function is called with the latitude, longitude, and zoom level data from the message.
Step 3: Add Velo Code to Capture the User's Address Input and Send Coordinates to the iFrame
First, let's add the address input field
Add Element: In the Wix Editor, click the '+' button on the left-hand side toolbar to add an element to your page.
Choose Input Element: Under the “Input” category, you’ll find "Address Input". Click on it.
Customize the Input Element: Once the input field is on your page, you can click on it to customize its properties, such as placeholder text, font, color, and more.
Configure the Input Element: Click on the input field and then click on the 'Settings' button (looks like a gear) to set up properties such as whether the input is required, what type of text validation is used, etc.
export function addressInput1_change(event) {
let Address = $w("#addressInput1").value;
latitude = Address.location.latitude
longitude = Address.location.longitude
$w('#GoogleMap').postMessage({
type: 'updateMapCenter',
lat: latitude,
lng: longitude,
zoom: 6
})
}export function addressInput1_change(event) { ... }: This function is triggered when the user makes a change in the address input field.
let Address = await $w("#addressInput1").value; : This line of code is fetching the value of address input field with the id addressInput1. It fetches an object that contains the location data, including the coordinates.
latitude = Address.location.latitude: This is extracting the latitude from the location property of the Address object.
longitude = Address.location.longitude: Similarly, this is extracting the longitude from the location property of the Address object.
$w('#GoogleMap').postMessage({ ... }): This sends a message to the iFrame, with the id GoogleMap. This message contains an object with the type of the message (updateMapCenter), the latitude and longitude to set the map center to, and a zoom level.
Wrapping Up
In conclusion, integrating Google Maps into your Wix website with a custom address search functionality is a powerful feature. Not only does it enhance user experience, but it also adds an interactive element that can be invaluable for businesses looking to provide location-based information. Keep in mind the importance of writing clean and efficient code, as this forms the backbone of such features.
Now, what if you need advanced customization or encounter challenges you cannot surmount on your own? This is where CodeMasters Agency comes in.
Connect with CodeMasters Agency.
CodeMasters Agency specializes in web development, and their team of experts is adept at integrating various functionalities into websites. Whether it's Google Maps integration or any other advanced feature, CodeMasters Agency has the expertise to make your website stand out.
Don't leave your website in the hands of chance; let professionals handle it. Contact CodeMasters Agency today.
Sign up for free and unlock over $300 in exclusive deals on top SaaS tools like LinkedIn credits, QuickBooks, SEMrush, and more! Explore Deals