Website Building » Wix » How Do I Use Google Maps Services in WIX Code?

How Do I Use Google Maps Services in WIX Code?

Last updated on January 6, 2023 @ 7:18 pm

Google Maps is a web mapping service developed by Google. It offers satellite imagery, aerial photography, street maps, 360° panoramic views of streets (Street View), real-time traffic conditions (Google Traffic), and route planning for traveling by foot, car, bicycle (in beta), or public transportation. Google Maps began as a C++ desktop program at Where 2 Technologies. In October 2004, the company was acquired by Google, which converted it into a web application. After additional acquisitions of a geospatial data visualization company and a realtime traffic analyzer, Google Maps was launched in February 2005. The service’s front end utilizes JavaScript, XML, and Ajax. Google Maps offers an API that allows maps to be embedded on third-party websites, and offers a locator for urban businesses and other organizations in numerous countries around the world.

So how can you use Google Maps Services in Wix Code?

GREAT NEWS:

Exciting update! We've collaborated with Wix to offer WBI users with a free plan for all website creation needs - Explore the details here.

The first thing you need to do is get a Google Maps API key from the Google Cloud Platform Console.

Once you have your key, you can add it to your Wix site:

  1. Go to Settings in your Wix Editor.
  2. Select the Tracking & Analytics tab.
  3. Click +New Tool and select Custom.
  4. Enter your Google Maps API key in the API Key field.
  5. Click Apply.

Now that you have your key set up, you’re ready to start using Google Maps Services in Wix Code! Here are a few examples of what you can do:

PRO TIP: When using Google Maps Services in Wix Code, be aware that there are certain usage limits in place. If you exceed these limits, your access to the Google Maps Services may be temporarily suspended. Be sure to check the usage limits before using the services in your app.

Add a Map to Your Site:

  1. In the Wix Editor, click Add.
  2. Select More.
  3. Under “Wix Code”, click “Maps”.
  4. Click the map you want to add to your site.

Get Directions

To get directions using Google Maps Services in Wix, you can use the Wix Maps API. Here’s how:

  1. In the Wix Editor, go to the page where you want to add the directions feature.
  2. Click the “Add” button in the top menu and select “Maps” from the dropdown list. This will add a map element to your page.
  3. Click on the map element and then click the “Edit” button in the top menu. This will open the Wix Maps API in the Wix Code editor.
  4. From the Wix Maps API, you can use the getDirections function to get directions from one location to another. For example:
import wixLocation from 'wix-location';
import wixData from 'wix-data';
import wixWindow from 'wix-window';

$w.onReady(function () {
$w('#map').getDirections(
{
'origin': 'Brooklyn Bridge, New York, NY',
'destination': 'Statue of Liberty, New York, NY',
'travelMode': 'driving'
}
);
});

This example gets driving directions from the Brooklyn Bridge to the Statue of Liberty in New York City. You can customize the origin and destination fields to specify the locations you want directions for, and you can change the travelMode field to specify a different mode of transportation (e.g. walking, biking, etc.).

With these steps, you should be able to use the Wix Maps API and Google Maps Services to get directions on your Wix site.

Madison Geldart

Madison Geldart

Cloud infrastructure engineer and tech mess solver.