[Google Maps Mobile] Google Maps Mobile multiple markers

[Google Maps Mobile] Google Maps Mobile multiple markers

  
Forge Component
(5)
Published on 21 Jul (4 weeks ago) by OutSystems Labs
5 votes
Published on 21 Jul (4 weeks ago) by OutSystems Labs

Im trying to add more than one marker on the map, and its not working;

On the single map i put one marker and works, but on the Map not even one marker works, he is not adding any marker, can someone help me or show me an example of how do this? Or some tips of why its not working?

Waiting;

Hi Vinicius,


Can you tell me if you have any error on the browser console related to Google Maps Mobile? If so, can you send any info on it?

 And what is your current platform version?


Please make sure you have the latest version ( 2.0.0 ) of the component installed. 


Thanks,

Hugo

Hugo wrote:

Hi Vinicius,


Can you tell me if you have any error on the browser console related to Google Maps Mobile? If so, can you send any info on it?

 And what is your current platform version?


Please make sure you have the latest version ( 2.0.0 ) of the component installed. 


Thanks,

Hugo

My platform version its the last one, 10.4 something like that, im not shure about the version of the google maps mobile but i think its the last one...

No, simply the markers doesnt appear... I trying to use the map from the Google Maps Mobile, i add the markers by latitude and longetitude and doesnt appear!


Ok Vinicius,


So my first advice is to install the latest version of the component, with the latest patch's, version 2.0.0 and give a go.

Your issue might already be fixed in the latest version.

If the markers still doesn't appear after the version upgrade, please verify if you have the record list with records in it and if the records themselves have the correct values.


Thanks,

Hugo

Hugo wrote:

Ok Vinicius,


So my first advice is to install the latest version of the component, with the latest patch's, version 2.0.0 and give a go.

Your issue might already be fixed in the latest version.

If the markers still doesn't appear after the version upgrade, please verify if you have the record list with records in it and if the records themselves have the correct values.


Thanks,

Hugo

Ok, will give a look at night here in Brazil, will do this update and anything i answer you!

Thks for now!


Create local variable with type: List of MapMarker (or just name it MapMarkers to do it automatically)


Set Markers property in Google Maps Mobile component:


Populate MapMarkers with ListAppend in your OnReady event handler action:

How do I add a InfoWindow to a Marker? I Have a added a Click MarkerEvent to the map; but in this action i only have a MarkerId I don't have a link to the data i retrieved in the query (above the GetHospital); or is there a way to get these?

Matthias Preuter wrote:

How do I add a InfoWindow to a Marker? I Have a added a Click MarkerEvent to the map; but in this action i only have a MarkerId I don't have a link to the data i retrieved in the query (above the GetHospital); or is there a way to get these?

I have the same question, i putted a pop up to when the person on the marker but i dont know info of what i will show because i dont i dont get any info when click the marker or something...


Hi Matthias/Vinicius,


If you want an infowindow, take a look on this post.

If you just want to fetch information for that particular marker, you can use the index parameter that comes on the event and access your data like:

GetMyMarkers.List[Index].Marker.example.


Let me know if it worked.

Thanks Henrique

Created a new structure, a copy of MapMarker with a extra attribute LocalCustomeriD; now i can get the localcustomerid with MapMarkerList[MarkerListIndex].LocalCustomerId.

I'll have a look at the infowindow post now..

I'm glad it worked.

The infowindow is a bit more tricky, not sure if very mobile friendly.

If you want alternatives, usually I go for popups with that customer information inside and some relevant data (I.e Images,buttons etc..)


Henrique Batista wrote:

I'm glad it worked.

The infowindow is a bit more tricky, not sure if very mobile friendly.

If you want alternatives, usually I go for popups with that customer information inside and some relevant data (I.e Images,buttons etc..)


I have A look at popup tomorrow, infowindow worked but isn't really touch friendly


Matthias Preuter wrote:

Henrique Batista wrote:

I'm glad it worked.

The infowindow is a bit more tricky, not sure if very mobile friendly.

If you want alternatives, usually I go for popups with that customer information inside and some relevant data (I.e Images,buttons etc..)


I have A look at popup tomorrow, infowindow worked but isn't really touch friendly


Yes, and it's tricky if you want to call client function from within.

Sure, let me know if you need help on it! 


Henrique, 

I searched for a sample for popups in Google Maps, but couldn't find it. Could you share a sample? Is it possible to use a webblock for the content of the popup?

Thanks in advance,

Matthias

Hi Matthias,


The idea is exactly the same, so you add the onclick event to the marker, then on the action that handles it, you fetch the desired data GetMarkers.List[Index].Customer and assign it to a local record (Customer). After it just set a boolean IsPopupOpen=True;

Then you add a popup to the page, show the local record there that is binded to IsPopupOpen variable. Alternatively you can also use a container (Instead of the popup) that is controlled by that variable.

About the webblock yes, it's possible, what do you want to achieve?

Let me know if you got it, otherwise I can build a small example.

Cheers

I've tested the popup-way, and that is working; but the pro of the infowindow is that there is a link with the marker; in the Popup-way you can't see a the relation between the marker and the popup.

Popup-way with a webblock with Customer info


I would like to use the infowindow-way with a link to the marker with a webblock as content.

You can use a div instead of a popup to display different overlay contents on the map, see below example:


The thing is that on an infowindow, you need to define it's content in pure HTML. 

It's up to you, but infowindow it's a bit 'desktop' feature and more tricky to stylish it (my opinion).

If you go with the infowindow option, here's a nice post where you can see how to call client functions from within the infowindow.

Let me know what you picked :)

Henrique Batista wrote:

You can use a div instead of a popup to display different overlay contents on the map, see below example:


The thing is that on an infowindow, you need to define it's content in pure HTML. 

It's up to you, but infowindow it's a bit 'desktop' feature and more tricky to stylish it (my opinion).

If you go with the infowindow option, here's a nice post where you can see how to call client functions from within the infowindow.

Let me know what you picked :)

How you put this blocks above the map?


I try follow that steps and didn't worked i dont know...

All i want its:

I have stores that have locations and with their location i created markers on my map, i just want when i click on the marker to show the information about the store that is on the position of the marker clicked...

Hi Vinicius,

"I have stores that have locations and with their location i created markers on my map, i just want when i click on the marker to show the information about the store that is on the position of the marker clicked..."

Take a look on this post, Carlos posted there an example if the explanation isn't enough. I think you'll be able to get the marker click working.

About the content over the google maps map, you can achieve it 2 ways:

  • CSS - You put the containers with the desired classes that implement the position:absolute/fixed desired.
  • You have a block on the Silk UI mobile that is called floating content that does the trick, you just need to choose where you want the information and for transparent background, just add the following code:
    /* Floating Content */
    .floating-content {
        background-color: transparent;
    }

Hope it helps :)

Thanks a lot Henrique, another challenge for you, i want inside the Info Window add a button to link to another page and that page has a id as a input parameter, i know that a just have to put on the html a button and etc but where in the html i add the parameter or something like that... Did you get? I already know how to get the id i just need a button inside the info window to link to the other page passing the id...

Henrique Batista wrote:

Hi Vinicius,

"I have stores that have locations and with their location i created markers on my map, i just want when i click on the marker to show the information about the store that is on the position of the marker clicked..."

Take a look on this post, Carlos posted there an example if the explanation isn't enough. I think you'll be able to get the marker click working.

About the content over the google maps map, you can achieve it 2 ways:

  • CSS - You put the containers with the desired classes that implement the position:absolute/fixed desired.
  • You have a block on the Silk UI mobile that is called floating content that does the trick, you just need to choose where you want the information and for transparent background, just add the following code:
    /* Floating Content */
    .floating-content {
        background-color: transparent;
    }

Hope it helps :)

Works now! but i added a extra "z-index: 100;" to the class; (100 because the left app-menu z-index is 170).


Hey,

@Matthias, I never had the need to use the z-index to overlay the google maps, but you figured it out. I'm glad it worked.

@Vinicius, did you take a look on this post? I think you'll find the answer there. LEt me know if you need further help.


Cheers

Henrique Batista wrote:

Hey,

@Matthias, I never had the need to use the z-index to overlay the google maps, but you figured it out. I'm glad it worked.

@Vinicius, did you take a look on this post? I think you'll find the answer there. LEt me know if you need further help.


Cheers

I saw the post but didn't get the answer, i dont wanna open a outside page, i have a screen that show stores, all i want is when i click on a marker will open the infowindow like you teach me in the last posts and inside this infowindow i want to put a button that will link to this screen that show the store selected... This screen just need a input parameter that is a ID of the store;


Another question is if its possible to at like you have in the google maps in your actual place appear a ball with a radar or something similar, maybe just a ball to see where in the map the person is....

Hi Vinicius,

Ok, perhaps this one has a more clear explanation. Basically you need to create a button inside infowindow by html and pointing it  to a screen action passing the correspondent Id parameter. That action will redirect the user to the correct store. Something like below:

onclick=$actions.NavigateToStore($parameters.StoreId) -> Where NavigateToStore is your screen action that receives Id as an input parameter and StoreDetails as it's destiny.

Yes, you need to fetch the Location Plugin from forge, and just add a google map marker to the coordinates that are returned when using the plugin. On the map marker you have the "IconURL" which you can set to the image that you like.

Hope it helps :)

Henrique Batista wrote:

Hi Vinicius,

Ok, perhaps this one has a more clear explanation. Basically you need to create a button inside infowindow by html and pointing it  to a screen action passing the correspondent Id parameter. That action will redirect the user to the correct store. Something like below:

onclick=$actions.NavigateToStore($parameters.StoreId) -> Where NavigateToStore is your screen action that receives Id as an input parameter and StoreDetails as it's destiny.

Yes, you need to fetch the Location Plugin from forge, and just add a google map marker to the coordinates that are returned when using the plugin. On the map marker you have the "IconURL" which you can set to the image that you like.

Hope it helps :)

Ok will try later and tell you if worked... Thanks a lot!

Another question i need to put a image or a .icon to use as a icon on the map, because i once tried to put a image, i let the image very small and was like very big on the map...??


Henrique Batista wrote:

Hi Vinicius,

Ok, perhaps this one has a more clear explanation. Basically you need to create a button inside infowindow by html and pointing it  to a screen action passing the correspondent Id parameter. That action will redirect the user to the correct store. Something like below:

onclick=$actions.NavigateToStore($parameters.StoreId) -> Where NavigateToStore is your screen action that receives Id as an input parameter and StoreDetails as it's destiny.

Yes, you need to fetch the Location Plugin from forge, and just add a google map marker to the coordinates that are returned when using the plugin. On the map marker you have the "IconURL" which you can set to the image that you like.

Hope it helps :)

Hello, i tried this:

'<input type="button" name="Ver mais" value="Ver mais" onclick=' +$actions.NavigateToStore+'('+$parameters.StoreId+')>'

The button appeared but doesnt do anything, i created a action that go to the  store and pass the parameter, that is this two above...

But nothing happens...

Another thing, there is a way to add css on a Input? I dont like that fat input haha, i want a thiner e with a better look, i tried to add css on a input but nothing happens...

Hi Vinicius,


For the navigate onclick of something inside the google maps infowindow, please see my attached example.

This logic is used on the screen "InfowindowClickToNavigate".

PS: Don't mind the code that's on the homepage.For the input styling you should add a class to the input class="myspecialinput" and on the stylesheet editor you can add something like the following:

input.myspecialinput {

     background-color: red;

}


Hope it helps :)

Henrique Batista wrote:

Hi Vinicius,


For the navigate onclick of something inside the google maps infowindow, please see my attached example.

This logic is used on the screen "InfowindowClickToNavigate".

PS: Don't mind the code that's on the homepage.For the input styling you should add a class to the input class="myspecialinput" and on the stylesheet editor you can add something like the following:

input.myspecialinput {

     background-color: red;

}


Hope it helps :)

Hey, how are you?

If you could give me a example of how to modify the Input i would aprecciate because im trying this and its not working!



Hey,

Why won't you send me what you have and i'll take a look into it?

Cheers,

Henrique Batista wrote:

Hey,

Why won't you send me what you have and i'll take a look into it?

Cheers,

I putted this on the css:

input.myspecialinput {

     background-color: red;

}

And on the style of the Input i just should put this:

"myspecialinput"  ?

Weren't you implementing it inside an infowindow? (through html)

If it is html, you should add class = "myspecialinput" as one of the input attributes, if it is an input widget from the platform you should add it on the Style Classes property.



Henrique Batista wrote:

Weren't you implementing it inside an infowindow? (through html)

If it is html, you should add class = "myspecialinput" as one of the input attributes, if it is an input widget from the platform you should add it on the Style Classes property.

Nope, its outside the infowindows, its a input search, i do the same way?





Henrique Batista wrote:

Hi Vinicius,


For the navigate onclick of something inside the google maps infowindow, please see my attached example.

This logic is used on the screen "InfowindowClickToNavigate".

PS: Don't mind the code that's on the homepage.For the input styling you should add a class to the input class="myspecialinput" and on the stylesheet editor you can add something like the following:

input.myspecialinput {

     background-color: red;

}


Hope it helps :)

Your example oml is very helpful...

Thanks.

Ok, will give a look at night here in Brazil, will do this update and anything i answer you!

Thks for now!

Hello everyone, im doing a kind off chat, very simple similar do whatsapp, but im facing a problem that is per example: when someone send a message it doesnt appear for other user at the same time, the user need to update the page to the message appear, what i want is that the message appear in real time for all users...

Its kind off a job with short time, that the only problem im facing...

Vinicius Schonardie wrote:

Hello everyone, im doing a kind off chat, very simple similar do whatsapp, but im facing a problem that is per example: when someone send a message it doesnt appear for other user at the same time, the user need to update the page to the message appear, what i want is that the message appear in real time for all users...

Its kind off a job with short time, that the only problem im facing...

Hi Vinicius, 

Actually this is not in the proper topic.

To achieve realtime chat, you should use push notification plugin like Pushwoosh or OneSignal.

They have event on-receive-notification, to update chat immediately after receiving notification.

Please create new topic, so more people aware of your question and properly answer it. 

Harlin Setiadarma wrote:

Vinicius Schonardie wrote:

Hello everyone, im doing a kind off chat, very simple similar do whatsapp, but im facing a problem that is per example: when someone send a message it doesnt appear for other user at the same time, the user need to update the page to the message appear, what i want is that the message appear in real time for all users...

Its kind off a job with short time, that the only problem im facing...

Hi Vinicius, 

Actually this is not in the proper topic.

To achieve realtime chat, you should use push notification plugin like Pushwoosh or OneSignal.

They have event on-receive-notification, to update chat immediately after receiving notification.

Please create new topic, so more people aware of your question and properly answer it. 

Hello i created a topic with the name of my question, i tried to use both but first to register a ios i need a mac... and second i registered the android but didnt worked i tried to register a phone without user and he doesnt register...