Real Estate - Google Maps Integration

[josh-flight-director]

Hello!

I am making some progress on a project for Vancouver First Realty (https://rocketweblabs.wixsite.com/vancouverfirstrealty) and am now ready to integrate Google Maps in order to display different properties.

When a user gets to my single property listing page, I would like the map to display the location of that specific property. When the user views a different property, the map would also change to the new property.

I have read a bit about the $w.GoogleMap API but am not the best when it comes to the Java language. I am not sure what exactly to put into the developer tools section for the code in order to make the properties display.

Filling in the longitude and latitude is easy but the rest is a bit confusing for me.

Any help is good help and thank you as always!

FC

[andreas-kviby]

what do you mean by the rest? description?

[josh-flight-director]

For example, if I want to display where I am in Vancouver on this Google Map I don’t know what to write for code in order to make it happen. Javascript is completely new to me but I am very eager to learn!

Thank you!

[andreas-kviby]

maybe try javascript using google map API like

How to highlight a user's current location in google maps?

or html5 version

HTML Geolocation API

[sam-wix]

Hi Josh,

From you screenshots, it looks like you copy/pasted the code from the API reference for getting the current location. If you want to set the current location, use the code snippet for setting the current location.

You’ll also need to put that code in the right place. From your description, I’m not sure when you want the map to change locations. I think you might have a dynamic page that shows individual listings. If that’s the case, you can put the code for setting the map’s current location in the onReady( ) event handler of the page. If you’re trying to change the set the location based on something else, please specify what that is so we can try and point you in the right direction.

[josh-flight-director]

Hey Sam,

I am basically trying to display the given location of a property that is in my dataset. Each property in my dataset has a address, longitude coordinates, and latitude coordinates (not sure if I need these). I have a dynamic page with a Google Map to display the property’s location. I am not looking to find my user’s current location - just display the location of the property that is being viewed on the dynamic page.

For example:

This is a property on a dynamic page:

This is the Google map that is on the same page just a bit further down. I want this property to display on this map:

I hope that makes sense and thank you!

Josh

[sam-wix]

Yes, that makes perfect sense.

What you need to do is add some code that:

1. Waits for the page to be ready

2. Waits for the dataset to be ready

3. Uses the location information from the dataset to set the location on the map
   So something like this, but with the IDs and field keys from you page and collection:

$w.onReady( function () {
    $w("#dynamicDataset").onReady( ()  => {
        let currentItem = $w("#dynamicDataset").getCurrentItem();
    
        $w("#googleMaps1").location = {
             "latitude": currentItem.latitudeFieldKey,
             "longitude": currentItem.longitudeFieldKey, 
             "description": currentItem.descriptionFieldKey
        };
    } );
} );

[josh-flight-director]

Thanks for that Sam!

I just tried it out a few different times, but still am having an error message. I thought it was because my spelling error with “lattitude” but even when I had the field keys and IDs to correlate with the dataset, it didn’t seem to like it either. Here is the code I used on the dynamic page with the Google map. I am not sure if I am supposed to delete anything or have to many commands in there.

This is the dataset:

And these are the fields:

I’m sure I am just missing something here. Thanks again!

FC

[sam-wix]

My fault. Missing a closing paren.

Line 10 of your code should be:

} );

Fixing in the code example above.

[josh-flight-director]

Hi Sam,

Thanks for your help so far. I am still having a bit of a challenge in getting the property’s physical location to display on my map on a dynamic page.

Here’s what I have so far:

Dynamic page called Properties

Dataset on my dynamic page with ID propertiesDataset

A Google map with ID googleMap

My propertiesDataset has the following:

Here is my dynamic page code. I have changed the ID’s to match the ones I have set up.

When I preview the page, the location is not being displayed. I am sure I am missing something here, but not exactly suer what it is. I found this online but I just need a bit of a steer in the right direction:

Any help would be greatly appreciated!

Thanks,

FC

[andreas-kviby]

is your fields named with Fieldkey in your datacollection? please view javascript console and screenshot it for me.

[josh-flight-director]

Hey Kirby!

Thanks for the help Love your work too.

Here’s a screen shot of the database where the longitude and latitude is:

Thanks!

FC

[andreas-kviby]

you have written your field reference in your code like longitudeFieldKey and so on, just write longitude if that is your field key. What does javascript console log say? if you cant make it work, subscribe to Wixshow Pro Channel and I will make you a video tutorial with working code.

[jorge-pablo-f]

Very important, set the map location on the dataset onReady event.

[jeff-haskins]

Be sure to set your field to number for longitude and latitude, not text in your database.

[jeff-haskins]

Question on setting up google maps API
Can the map be set to a map you have created in google maps, instead of just general google map? Example: I have a map created in google maps of Mills & Springs. Can I get my map that the latitude and longitude of this coding (above) can open into?

[chiemiheil]

Hi Sam,
I’m trying to create a similar real estate website, but it’s for internal use only and will need to be locked down.
We currently use Wordpress, but are exploring if Wix could be a better solution. It looks like you know a thing or two about this.

Would you be open to a 15-min meeting to chat about helping us?