Compatibility:

WebSite X5 Evo and Pro

Adding a map to show where a place is, is always a good idea. Sometimes however you may need to report more than a single address on a map: you may need for instance to show the different  headquarters of your company, all the point of sale of a retail or restaurant chain or more generically some interest points of a route or a town.


In all these cases, the Multiple Location Map Optional Object is the answer to your needs. With this Object, in fact, you can rely on Google Maps to display your list of addresses and, if you want to, you can connect them  so to create an itinerary. Please find some examples on the Preview Page.



Do you want to find out how to use the Accordion Text & FAQ Object? Check out this short video or keep reading the article.




How to set up the map and the list of addresses

  • Double-click on the Multiple Location Map Object you added so to open the settings window, then stay on the Contents section.
  • Click on the Add button: you will find "Position 1" in the list.
  • Click on "Position 1" so to activate the available options.
  • Add the necessary information to identify the first position on the map. All these details will be used to create the tip to be displayed with a mouse click on the marker. You can report:
    • Title: type in the name of the place, such as "B&B Belvedere". 
    • Address: type on the full address.
    • Description: add a possible brief text.
    • Button Text: possibly add a CTA (Call To Action) for the button which will be displayed under the details.
    • Link: click on to open the Link window and choose the action to be performed to create the link associated to the button (for instance, you can set a link to another page of the same or another website).
  • Once you added the first position, click on Add to set up "Position 2". Add all the positions you need, define the order with the arrows, and remove those you don't need anymore. When the page is loaded, the map will be positioned for the first position to be in the foreground. When opening the page, the map will be centered with respect to the reported locations, so to display them all, if the zoom factor you set allows this. 
  • Before moving on to the graphic options, add the Google Maps API Key to use this service (see the paragraph "How to register on Google Maps Platform to get the API Key").
  • Possibly activate the Show directions option: in this case, the tip on the marker will report a link which redirects to Google Maps providing the necessary directions to reach the position.
  • You can also activate the Display the route between the locations option to display the itinerary connecting all the reported locations on the map.

 

How to stylize the map

  • Access the Style section now.
  • Define some Graphics options such as the map Size, the Font Type to use for the texts, the color of the Button Text and of the Button Background. You can also import an image to use as Marker: if you don't, the default Google Maps one will be used.
  • As far as the Map is concerned, you can define the kind of map (Roadmap, Satellite o Terrain) to be displayed in the beginning and how zoomed it should be (the users can then modify it later).
  • If you use the Display Street View option, a Pegman, a yellow little man, will be displayed on the map: it's Google Maps virtual assistant and the official Street View guide.
  • You can finally decide to activate the Display Search Field option: in this way, the users will be able to perform a search on the map using a search field. 


How to register on the Google Maps Platform to get the API Key

Google Maps Platform  is a Google tool which you can use to create immersive location experiences. To use certain services, you need to register and get an API Key. The procedure you need to follow is really easy:

  • Connect to the Google Cloud Platform Console and follow the guided procedure to register a new project and generate an API Key. 
  • Choose the product you want among:
    • Maps:  if you want to use the Street View function; 
    • Routes: if you want to use the Directions function; 
    • Places: if you want to use the Search function. 
  • Create or select a project. 
  • Add your invoicing details.


According to the current pricing,  if you activate the service, you will get $ 200 free credit a month, which is usually enough to suit the needs of most users: it will be necessary to pay only if this amount is exceeded.


#tip - If you need to add an easier map showing a sinple position, a possible alternative is the free Google Maps Object.


Are you curious to use this Object on your website pages? Install Multiple Location Map now


You don't have enough credit?  Check out all the Credit Packs