Map section in the "Holiday Booker" example?

Ask the community
, , , ,
1

Greetings,

i am trying to build a networking website for small and medium enterprises and i saw an example of a hotel booking site at www.wix.com/code/home. It is actually the first one on the page. I totally love the design and the small map in the corner showing the location of the different hotels. I am pretty sure i need such a tool for my site! I know that WIX currently doesnt have any Apps that support geolocation through database info (except “Store Locator” but i am looking for a free solution. Is it possible to code a map which reacts on database entries? Or any other ideas? I am looking forward to your replies!

2

Hey dawd,

Welcome to WixCode - sounds like you’re hitting the ground running.

If your database entried contain the location data (coordinates), you can set a marker on the map. Take a look at $w.GoogleMap for more information.

If you want to get fancy (or complicated), you might be able to use a $w.HtmlComponent to code a query to a geoLocation service. You’ll have to pass messages back and forth between the page and the HtmlElement. That of course greatly increases the complexity of your project.

It seems to me that you can get your site working by starting with the coordinates in the database. This gives you a chance to test and validate the way your site works, wthout getting bogged down with unnecessary complexity. You can always add the chrome and white sidewall tires at a later point once your basic site is up and running

I hope this was helpful.

Good luck and have fun,

Yisrael

3

Hello Yisrael,
thank you for your fast reply!
I have been trying a lot the last 2 days but i must admit that i have my problems with the synatx here.
The $w.GoogleMap-part seems logical for me but i am confused with the error meannings within the code sometimes.
I´ve been looking for some kind of “inspiration” within the net because i know that there are several ways to approach a database-google maps-connection in WIX.
What kind of components do i need in my code to let it work the way the one in the hotel example does? Are there any fetch or query functions to include in a simple way?

Greetings, Dawd

4

Hey,

As mentioned above, If you wish to display only one marker, you can add the Google Map app and set its location as explained here .

If you wish to display multiple markers on the same Google Map, you will need some coding. I played with it a while ago, so here’s what I did to display multiple markers on the same Google Map:

  1. Create a DB collection and include all the relevant properties information including the Longitude and Latitude of the properties.

  2. Add an HTML component and copy the code added here .

  3. You should get your own API key and add it to line 35 (instead of the caps lock letters). I recommend checking out Google’s documentation to learn how to get the key.

  4. Add this code to the page section of the page to which the HTML component was added. Here, I’ve created an array of all the properties and sent it to the HTML component using post message .

  5. Add a jsw file to the backend and add this function to it to get all the records from the collection:

import wixData from 'wix-data';
export function getMarkersData() { 
    return wixData.query("CollectionName") 
                    .find() 
                    .then((results) => { return results; }) 
                    .catch((err) => { let errorMsg = err; });}

I hope it’s clear.

Best,
Tal.

5

Hey Tal,

thanks for your reply! You saved me a lot of time with your code sets.

While i´m trying to include it into my page, i ran into a few errors.

Your code in step 4 tells me “obj unread” on line 4.
And i am not sure how to deal with step 5. I must admit that i´ve never heard of jsw files or got really deep into this. How do i handle them?

Thanks for your input so far!

Dawd

6

Hi,
Have you declared the variable on line 4?
As for line 5, you should create a backend file:

Tal.

7

Hey Tal,

i created a jsw file in the Backend section. Thanks for the hint. I wasnt paying enough attention to the site structure.

I think i dont get the “let”-command right.
Right now i am also getting a “errorMsg unread”-error within the code of the jsw file in the last row.

Sometimes it is quite confusing because my native languase isnt English and i am not really a coder.
What does WIX code expect from me after the let-command?

8

You can read about the " let " variable type here . When you copy the code added above, you should make sure that the IDs and the collection name are the same as you set on your site.

9

Hey Tal,

i gave it a try a few days ago again. The IDs and the collection name are already set.
But i must admit that i have absolutely no clue how to define the information on line 4.
I tried tons of things with the information about the let-command you gave to me but it seems that the syntax in that spot is out of my league…somehow.

What kind of variable (or information at all) is expected in line 4? The example left me back a little bit confused. But i´m still on fire to get this thing working!

10

Hey,
You can try declaring the variable and setting the function to it as demonstrated below:

$w.onReady(function () {
	let obj = getMarkersData().then((obj) => {
		let long;
		let lat;
		let markersArr = [];
		long = obj["items"].map((item) => {
			return item["longitude"]
		});
		lat = obj["items"].map((item) => {
			return item["latitude"]
		});

		//num of current assets
		let iterator = long.length;

		for (let i = 0; i < iterator; i++) {
			let cordItem = new Object({lat: '', lng: ''});
			cordItem['lat'] = lat[i];
			cordItem['lng'] = long[i];
			markersArr.push({position: cordItem});
		}
		$w('#html1').postMessage({markersArr});
	});
});

Should the issue persists, please send me the site URL and the page to which the code was added so that I can have a look.

Best,
Tal.

11

Hello!

Did anyone manage to make it work?
This interests me very much, but I have, as well, a very small knowledge of coding.

What I actually want to do, is a collaborative map.
Users give the name and type of places, as well as their location.
All the DB entries are then displayed together on a single map.

1.Create a DB collection and include all the relevant properties information including the Longitude and Latitude of the properties.

=> This step is ok I guess.
Under Database, I created a collection named Maps.
It has 4 columns:

  • Name
  • Latitude
  • Longitude
  • Type
    The Data is coming directly from a user form I created on the page. All the connections are made, and this works.
  1. Add an HTML component and copy the code added here .
  2. You should get your own API key and add it to line 35 (instead of the caps lock letters). I recommend checking out Google’s documentation to learn how to get the key.

=> On a page that I called Map, I added an HTML component where I copied your code and replaced “YOUR_API_KEY” with my API Key.
So far everything fine I guess (apart from the fact that no map is displayed yet, only the title “My Google Maps”, is that normal?)

  1. Add this code to the page section of the page to which the HTML component was added. Here, I’ve created an array of all the properties and sent it to the HTML component using post message .

=>
-Here I don’t get where to put this code? It is a .js.
Should I put it in a new HTML component, or in the first one. If in the first one, where exactly in the previous code?
-Do I have to give it a specific name or replace some names in the code?

  1. Add a jsw file to the backend and add this function to it to get all the records from the collection:

=>
-Should I give the file a specific name?
-Which names should I replace in there. I guess “CollectionName” in my case would be “Maps”
-Should I also replace ‘wix-data’ by something?
-On the last line: errorMsg is undearlined in yellow, and on the side it says ‘errorMsg’ is unread.

Thanks a lot for your precious help!

Clara

12

Hi Clara,
Here’s the answers to your questions:
Step 3- Note that you should be able to view the map only when you preview the editor. It displays for me just the headline as well (as you can see from the screenshot below).
Step 4- You should add the code to the page section:

1299×794 63.8 KB

Step 5- The file name doesn’t matter as long as you import the correct function. In the example above, I’ve created a jsw file named “markers” and imported it on the page section using the same name. In your case, the collection name is “Maps”. You should not replace “wix-data” with anything- this is the API that you import . As for your last question- yellow message is a warning message and not an error message.

Good luck,
Tal.

13

Hello Tal,

Thanks a lot for your help, it was really useful.
The connection between my map and the database seems to work now! Great! :slight_smile:

1-Though, I was still struggling with the type of the fields longitude and latitude in the database as well as in the form field the user is submitting the information from.
=>
I solved it like this:
In the user form, I set the type of the latitude and the longitude to Text. While adding a pattern validation.

  • Latitude: ^-?[0-9]{1,2}(?:.[0-9]{1,10})?$
  • Longitude: ^-?[0-9]{1,3}(?:.[0-9]{1,10})?$
    In my database, I however set the type to number (with decimal representated by a “.” not a “,”).

I don’t know if this is the best way to solve this, but it seems to work (in the preview/sandbox version)!

2-I however now have the problem that the map is still not displayed on the live website.
By right-clicking on the page, and selecting “inspect”, I get the following messages:

Any idea if I can do something about it?
The problematic page is here: https://www.sustainabilitytransition.com/map

Thanks again!

Clara

14

Hi Clara,
You should sync the sandbox database to the live site as explained here .

I’m glad it worked :slight_smile:
Tal.

15

Hi Tal,

Thanks!
I did that, so the live database is not empty.
Then I even added new data through my online user form in the live database.

So there is data in it, not exactly the same one though, but it shouldn’t be a problem as long as there is some data in it, right?

16

Another option is changing the database permissions. Should the issue persists, please send the site URL. I’ll have a look.

Tal.

17

I also did that. Everything should be open to everyone already.

The URL is https://www.sustainabilitytransition.com/map

Thanks a lot!!
Clara

18

Hey Clara,

your site looks interesting! Since you were asking how the the things are progressing: I actually couldnt continue working on my site because of some exams but it seems you already managed to build something up.

Which points did you actually edit that Tal posted for step 4?

Greetings,

Dawd

19

Hello Dawd,

Thanks a lot.
I actually only copied the code she gave from the screenshot, but in the right place this time :-).
Look the picture below, you have to put the code down, where “map page code” is written.
backend/markers (markers should be the name of your file in backend.
latitude and longitude the value/name of your fields in your database.

Best
Clara

1365×646 155 KB

20

Hey Clara and Tal,

thank you for this input! I implemented the code into the proper places and didnt get any errors. That is good so far! But for some reason there arent any markers on my map.

The data type within the database has to be “number” or am i wrong?