Linking Dynamic Pages to addresses displayed on a dynamic map.

Hi there, I have a google map box that shows all the locations form my dataset but i would like to connect the pins on the maps to the articles so that the user can find something by location and then click on it and read the article.

It looks like this but in the fields i can’t seem to link the map pin in any way to the page it took the address and title from.

@russian-dima Can you help me?

First you will have to describe your setup.

Which elements were used?
Your MAP – > is embedded inside an HMTL-Component, or did you use a CUSTOM-ELEMENT? Another element?

And perhaps an exerpt of your DATABASE and related DB-FIELDS?

Describe your setup and all used elements in your project.

@russian-dima The map is just the standard google map frame built into wix. here is what my data base looks like…


Here it is a little close up…


Section two:


Section Three:


Hope this helps you understand a little better…
Here is a link to the site so you understand the concept a little better too.
https://joshwelchwebsites.wixsite.com/my-site-3/hikes/

Ok, i think your wanted feauture will not work as i expected it.

Tried to use the standard Wix-out-of-the-box map, i assume you won’t be able to achieve your aim - → using the standard wix-map.

There are no given API-possibilities for that.
You even can’t set multiple pins on the map using code.

Your only way out - - > generating all the map in an HTML-Component.
You can find a very good example (made by Yisrael), when you search for it…
https://www.wix.com/velo/forum/tips-tutorials-examples/example-multiple-markers-google-maps

Using the HTML-Component-version should give you the ability to do more with your map.

@russian-dima I managed to display the sites on a map and have multiple displayed (connected to data set) but just not add the link to take them to that dynamic page of the pin on the map.

1 Like

@welchjoshua818 Attention - - → i edited my reply!

@russian-dima I think i know how to solve it but i need your help… is there any way to make another URL data collection field that automaticly copyies this one shown below. (the auto generating link to the dynamic page)

@welchjoshua818

Ok, i think now i understand your problem.

  1. Create a new FIELD inside your DATABASE and set it as TYPE → URL
  2. You have a dynamic setup, that means every of your pages is a value inside your DATABASE. And also for every of your values a dynamic - LINK will be created automaticaly.

But to generate the right LINK-FORMAT, i think you will need the FULL-LINK, which you than copy to the new generated URL-FIELD ( your idea could work )!

Open one of your dynamic pages…and you will get something like…
https://joshwelchwebsites.wixsite.com/my-site-3/hikes/arthurs-seat-eagle-summit-walk

This link concists of 3-parts:

  1. https://joshwelchwebsites.wixsite.com/my-site-3
  2. /hikes/
  3. arthurs-seat-eagle-summit-walk

So your idea is good and all you have to do is to generate a normal LINK-URL out of your dynamic setup.

The following one is - - > STATIC - - > It will be the BASE-URL…

let baseURL = "https://joshwelchwebsites.wixsite.com/my-site-3"; console.log(baseURL);

Then you have a field called → Recipes(All), there you can get the middle-part…
let let us call it - → PREFIX…

let prefix = getCurrentItem()["ID_OF_RECIPES_ALL_FIELD_HERE"]; console.log(prefix);

And the last part you can get from —> Recipes(Name)

let itemURL = getCurrentItem()["ID_OF_RECIPES_NAME_FIELD_HERE"]; console.log(itemURL);

Put everything together and make it work…

$w.onReady(()=>{
   $w('#myDataset').onReady(()=>{
      let currentItem = $w('#myDataset').getCurrentItem(); console.log(currentItem);
      // and so on ......
      // add the given code above here & put everything together....
   });
});

Good luck!

@russian-dima Hey there, what page would i add this code to or would i add it to the master Code of the site.

Also would this be all the code i would need to add… could you write it out in full as i am very inexperienced with this kind of code.

Sorry for taking up so much of your time but you have been so helpful to me in trying to learn velo.

@welchjoshua818
What do you have so far? Please show your current working (not working) code.

@russian-dima This is what my code looks like…


$w.onReady(()=>{
   $w('#dynamicDataset').onReady(()=>{
      let currentItem = $w('#dynamicDataset').getCurrentItem(); console.log(currentItem);
      let baseURL = "https://joshwelchwebsites.wixsite.com/my-site-3"; console.log(baseURL);
      let prefix = getCurrentItem()["recipes"]; console.log(prefix);
      let itemURL = getCurrentItem()["maplink"]; console.log(itemURL);
   });
});

@welchjoshua818
I just asked myself, why you do not link it maualy first?

Here you see the " green " dataset-wire, which you can connect with dataset and map .

Once you click on it, you get the following window…

Your wished function/field should be the last one, where you can connect a → PIN ← with a → URL <–.

So why not doing it manualy?
Once you have connected your URL to the right PIN on the map, normaly then your desired function should work for you, i am right?

All you have to do, is first to generte a new DB-FIELD inside your DATABASE - → call it url or URL or something similar.

Generate like already described in my previous post all the links for every of your dynamic-items (values inside DB) → MANUALY (FULL-URL) and paste all of them into the new created DB-FIELD, related to the right location.

Now you can connect manualy all your PINs on your map with each of the new generated URLs and your wished function should work, because now, when you click onto the PIN-LINK - → you will be redirected to the related dynamic-page.

There won’t be any other way to manage it - → using the normal wix out of the box-map. For example a dynamic event-triggered-version is not possible, because no real event-trigger are given, to make some action, when a pin was clicked or used.

So if you want to make your MAP even more DYNAMIC and INTERACTIVE - → you will need to use the HTML-Version of it, or even generate your own MAP, using a custom-element.

BTW: You can also use the ----> WISHLIST !