[Google Maps Mobile] Question regarding markers

[Google Maps Mobile] Question regarding markers

  
Forge Component
(13)
Published on 11 Oct by Labs
13 votes
Published on 11 Oct by Labs

Let's say we have multiple markers, is it possible to make them clickable and that each one leads to a different screen?

Hey Cyberzap,

Yes, it's possible. Where are you so far and where exactly do you need help?

Cheers

Henrique Batista wrote:

Hey Cyberzap,

Yes, it's possible. Where are you so far and where exactly do you need help?

Cheers

Hey Henrique,

I would like to make every marker a clickable link, but I don't know how to or where to start. I don't really know what I need to make this work. Could you explain the process needed to make this? I'm a beginner and I don't really know how to create this. I don't even know where do I type in the code.

Thank you, cheers.


Hey,

So first adding multiple markers, you can find this post that explaind on how to ahieve it.

Then adding the marker click event, you have this post.

Let me know where you stand on the developments 

Cheers

Uh, I got lost. I'm using the Customer App template, have any idea on how to do it there?


Hey,

What do you mean by do it there?

You gonna need to add the GoogleMapsMobile.Map block to your page, and then follow the instructions on both links sent on the previous post.

Not sure if there's already any app on forge that uses google maps mobile with multiple markers and clicks :/


Sorry, just took a look on the Customer App template and I think I know what you mean.

You need to create a local variable similar to MapMarkers, but its type should be MarkerEventIdentifier List.

On the GenerateAllMapMarkers action, you should add a list clear to clear this new list that you created (similar to the one there cleaning the markers list).

Then, before the end, add a List Append action and append a click event to the new list. Just like the image below

(If you don't have the click available to add, you need to add a reference for GoogleMapsMobile -> MarkerEvent entity)

Then on the interface, select the map block and add the new variable as input parameter, like image below:


After this, you need to add a handler to the click event, so on the block map, do the following:

And select new client action.

Now you can access each marker info by the Index returned, something like the following:


And from now on, I guess it depends on your business logic.

Hope it helps

Henrique Batista wrote:

Sorry, just took a look on the Customer App template and I think I know what you mean.

You need to create a local variable similar to MapMarkers, but its type should be MarkerEventIdentifier List.

On the GenerateAllMapMarkers action, you should add a list clear to clear this new list that you created (similar to the one there cleaning the markers list).

Then, before the end, add a List Append action and append a click event to the new list. Just like the image below

(If you don't have the click available to add, you need to add a reference for GoogleMapsMobile -> MarkerEvent entity)

Then on the interface, select the map block and add the new variable as input parameter, like image below:


After this, you need to add a handler to the click event, so on the block map, do the following:

And select new client action.

Now you can access each marker info by the Index returned, something like the following:


And from now on, I guess it depends on your business logic.

Hope it helps


Thank you! It worked. Markers are now clickable. One last question, how would I make clickable marker lead to a different screen?

Hey,

Now, as I said it depends on the business logic.

What do you want to achieve? Your decision to forward the user to a different screen is based on what?

Technically it should be an if condition or a switch and on the end node, replace it by the destination page.


Henrique Batista wrote:

Hey,

Now, as I said it depends on the business logic.

What do you want to achieve? Your decision to forward the user to a different screen is based on what?

Technically it should be an if condition or a switch and on the end node, replace it by the destination page.



Firstly, I want to thank you for helping me get this far.

I would like every marker to be unique so that I could access it in the if condition.

Something like:

if(MarkerListIndex == 0) {

go to screen1;

} else {

if(MarkerListIndex == 1) {

go to screen 2;

} else {

go to screen3;

}

}

And so on...

But how would I access the specific marker? By his Id?

Hey, no worries!

If you want to access the marker information, it's explained on the last image of my previous post.

But i'll try to be more precise:

Acessing the clicked marker address:

GetLocations.Locations[MarkerListIndex].Address = "YOUR NEW ADDRESS"

Conditional destination based on the index:

You can apply the condition to whaetver you want, all you need is a boolean condition:

If you want to add more elses, just add consequent ifs statement after the false of the first one.

Combining the if's on a switch:

Not sure what you specifically want to achieve, so I can't be more specific.

Hope it helps

Henrique Batista wrote:

Hey, no worries!

If you want to access the marker information, it's explained on the last image of my previous post.

But i'll try to be more precise:

Acessing the clicked marker address:

GetLocations.Locations[MarkerListIndex].Address = "YOUR NEW ADDRESS"

Conditional destination based on the index:

You can apply the condition to whaetver you want, all you need is a boolean condition:

If you want to add more elses, just add consequent ifs statement after the false of the first one.

Combining the if's on a switch:

Not sure what you specifically want to achieve, so I can't be more specific.

Hope it helps

Thank you, it worked.

But it only works in the main map area. it doesn't work when I use the slider.

Like this: Video

Have you got a solution for that?

Hey,

You need to check what happens when the carousel changes. 

I would add a breakpoint on the action that is the handler of the marker click and debug it. If it hits that breakpoint, it's probably a bug on the business logic. 

If it doesn't reach the breakpoint, probably you'll need to clear the event list and add the click event again, but I'm not sure.

Okay, I got it.

In the CarouselOnItemChange action it cleared the Marker list and only created one marker, and so the map automatically zoomed on the marker. How could I zoom on a specific marker without deleting the rest? (Without clearing the list).

Hey,

Think that will be more difficult, how do you pretend to zoom on a particular marker?

Because by changing on the Carousel, already zooms, clicking on it redirects you to a different screen, how would you pick the one that's going to be zoomed at?

When I change on the Carousel, it zooms but then I can't click on it.