Method 1: Using Wix Velo and the Google Maps API (The “Developer” Way)<\/strong><\/p>\n\n\n\n This approach gives you full control over the map’s look and functionality but involves several technical steps.<\/p>\n\n\n\n Step 1: Prepare Your Google Cloud Project<\/strong><\/p>\n\n\n\n Before touching Wix, you need to set up access to Google’s mapping services.<\/p>\n\n\n\n Enabling the necessary APIs in Google Cloud Console.*<\/strong><\/p>\n\n\n\n Step 2: Add the Map Container to Your Wix Page<\/strong><\/p>\n\n\n\n 1. In the Wix Editor, go to the page where you want the map.<\/p>\n\n\n\n 2. Click Add (+) > More > HTML Code<\/strong>.<\/p>\n\n\n\n 3. Drag the “HTML iframe<\/strong>” element onto your page and resize it to your preferred dimensions. You don’t need to paste any code into the element’s settings yet. This box will act as the container for your map.<\/p>\n\n\n\n Adding an HTML iframe element to a Wix page.<\/strong><\/p>\n\n\n\n Step 3: Use Wix Velo to Inject the Map Code<\/strong><\/p>\n\n\n\n This is the most technical part. You’ll use Wix’s development environment to write code that “injects” the Google Map into the HTML box.<\/p>\n\n\n\n 1. In the Wix Editor, click Dev Mode > Enable Dev Mode<\/strong>.<\/p>\n\n\n\n 2. Click Public & Backend<\/strong> in the site menu to open the code editor.<\/p>\n\n\n\n 3. In your page’s code (e.g., `home.js<\/strong>`), add the following JavaScript. Replace `YOUR_API_KEY<\/strong>` with the key you generated in Step 1.<\/p>\n\n\n This code does the following: it takes your list of addresses, converts them to coordinates using the Google Geocoding API, and then generates a full Google Map with markers, which it sends to the HTML iframe on your page. The Challenges with This Wix Velo Method<\/strong><\/p>\n\n\n\n As you can see, this process is not for the faint of heart<\/strong><\/p>\n\n\n\n * Technical Overhead: <\/strong>You need to manage a Google Cloud account and billing<\/strong>, which can be intimidating for non-developers.<\/p>\n\n\n\n * Complex Code:<\/strong> The solution requires a solid understanding of JavaScript, Promises, and the Google Maps API<\/strong>.<\/p>\n\n\n\n * Wix-Specific Quirks:<\/strong> Using `postMessage` to communicate with an HTML iframe is a specific workaround for Wix’s environment.<\/p>\n\n\n\n * Limited Design Control: <\/strong>Customizing the map’s design (colors, marker icons) requires even more complex code changes.<\/p>\n\n\n\n There’s a Much Simpler, Codeless Solution: MapsFun.com<\/a><\/strong><\/p>\n\n\n\n Why spend hours wrestling with API keys and complex code when you can achieve a better result in minutes?<\/p>\n\n\n\n
![\"\"](\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-11-1024x534.png\")
<\/figure>\n\n\n\n\n
\n
![\"\"](\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-12-1024x322.png\")
<\/figure>\n\n\n\n$w.onReady(function<\/span> ()<\/span> <\/span>{\n \/\/ The ID of your HTML iframe element. You can find this in the Properties panel.<\/span>\n const<\/span> htmlComponent = $w('#html1'<\/span>); \n\n \/\/ Your list of locations: [Name, Address]<\/span>\n const<\/span> locations = [\n ['New York Office'<\/span>, '350 5th Ave, New York, NY 10118'<\/span>],\n ['Brooklyn Warehouse'<\/span>, '55 Water St, Brooklyn, NY 11201'<\/span>],\n ['Central Park Kiosk'<\/span>, 'Central Park, New York, NY'<\/span>]\n ];\n\n \/\/ Function to geocode an address and return its Lat\/Lng<\/span>\n function<\/span> geocodeAddress<\/span>(address)<\/span> <\/span>{\n const<\/span> geocoder = new<\/span> google.maps.Geocoder();\n return<\/span> new<\/span> Promise((resolve, reject) => {\n geocoder.geocode({ 'address'<\/span>: address }, (results, status) => {\n if<\/span> (status === 'OK'<\/span>) {\n resolve(results[0<\/span>].geometry.location);\n } else<\/span> {\n reject('Geocode failed: '<\/span> + status);\n }\n });\n });\n }\n\n \/\/ Initialize the map once all addresses are geocoded<\/span>\n Promise.all(locations.map(location => geocodeAddress(location[1<\/span>])))\n .then(coordinates => {\n \/\/ Create the HTML and JavaScript for the map<\/span>\n const<\/span> mapHtml = `\n <!DOCTYPE html>\n <html>\n <head>\n <style>#map { height: 100%; width: 100%; }<\/style><\/span>\n <\/head>\n <body>\n <div id=\"map\"<\/span>><\/div>\n <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY\"<\/span>><\/script>\n <script>\n const<\/span> map = new<\/span> google.maps.Map(document.getElementById('map'<\/span>), {\n zoom: 10<\/span>,\n center: { lat: 40.7128<\/span>, lng: -74.0060<\/span> } \/\/ Default center (NYC)<\/span>\n });\n\n \/\/ Add markers for each location<\/span>\n const<\/span> locations = ${JSON.stringify(locations)};\n const<\/span> coordinates = ${JSON.stringify(coordinates)};\n\n coordinates.forEach<\/span>((coord, i) => {\n new<\/span> google.maps.Marker({\n position: coord,\n map: map,\n title: locations[i][0<\/span>]\n });\n });\n\n \/\/ Adjust map bounds to show all markers<\/span>\n const<\/span> bounds = new<\/span> google.maps.LatLngBounds();\n coordinates.forEach<\/span>(coord => bounds.extend(coord));\n map.fitBounds(bounds);\n <\/script>\n <\/body>\n <\/html>\n `;\n\n \/\/ Post the HTML to the iframe<\/span>\n htmlComponent.postMessage(mapHtml);\n })\n .catch<\/span>(error => console.error(error));\n});\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
<\/p>\n\n\n\n