How to use Google Maps Library for Reactive Web App?
Question

Hi everyone!

I'm a building a reactive web app and I want to use Google Map Library in my app. 

Can I use address instead of latitude and longitude? Because I only have address field in my database.

If yes, how can I use it?  I have a "Street Address" attribute in the "Site" table

Also do I have to use API Key? when I copy my API key to the field it's throwing following error.

It's my first time using google map and I'm really confused...

Thank you!

Check the example in this file and let me know if you can make sense of this.

GoogleMaps.oml

Pedro Marques wrote:

Check the example in this file and let me know if you can make sense of this.

 Thanks Pedro!

I followed your example and it made sense, but my map is not loading in my app.  


I added the MapMarker List and MapMarker. Created "Oninitialize" action. I set MapMarker.Address to "StreetAddress" + "City" + "ZIP"

 Also it showing following warning for the "Oninitialize" action 

 Do you think this is the issue?


Regards,

Elsie 

Hi Elsie,

Regarding the API key, you should use quotation marks ("") before and after your API Key, like this: "API_Value".

About the address, you can indeed use it instead of the coordinates. You have to create a variable that is a list of  "MapMarker" (see below) and you should add a record to that list with the address you want to display and then use that variable in the "Markers" property you have highlighted.

Let me know if this helps,

Pedro

Pedro Marques wrote:

Hi Elsie,

Regarding the API key, you should use quotation marks ("") before and after your API Key, like this: "API_Value".

About the address, you can indeed use it instead of the coordinates. You have to create a variable that is a list of  "MapMarker" (see below) and you should add a record to that list with the address you want to display and then use that variable in the "Markers" property you have highlighted.

Let me know if this helps,

Pedro

 Hi Pedro!

Thank you for such a quick response!

Sorry I'm really new to Outsystems. How do I create variable that is a list of "MapMarker" and add record to it?

I already have this Markers input variable under the "Map". Should I copy it to the screen where I have the map widget? I'm little bit confused... 

Thank you!

Check the example in this file and let me know if you can make sense of this.

GoogleMaps.oml

Pedro Marques wrote:

Check the example in this file and let me know if you can make sense of this.

 Thanks Pedro!

I followed your example and it made sense, but my map is not loading in my app.  


I added the MapMarker List and MapMarker. Created "Oninitialize" action. I set MapMarker.Address to "StreetAddress" + "City" + "ZIP"

 Also it showing following warning for the "Oninitialize" action 

 Do you think this is the issue?


Regards,

Elsie 

mvp_badge
MVP

Hi Elsie,

If you only need to show one location you can use the SingleLocationMap from the Google Maps Library that can directly receive an Address as input as well...

Also, for future reference, you may get better/faster replies if you post your issue in the right forum, in this case, since you are facing difficulties with the Google Maps Library, nothing better than creating the discussion topic directly in that component's Support Forum. This has an added benefit to the community, as others may face the same issue and typically would check there first.

Hope this helps!

Jorge Martins wrote:

Hi Elsie,

If you only need to show one location you can use the SingleLocationMap from the Google Maps Library that can directly receive an Address as input as well...

Also, for future reference, you may get better/faster replies if you post your issue in the right forum, in this case, since you are facing difficulties with the Google Maps Library, nothing better than creating the discussion topic directly in that component's Support Forum. This has an added benefit to the community, as others may face the same issue and typically would check there first.

Hope this helps!

 Hi Jorge,

Thank you for your reply! Next time I'll directly post in the support forum. I went there and looked into some solutions, still couldn't figure out...

I'm adding Google map into two different screens, one with multiple marker and one with single location.

When I use SingleLocationMap, the map looks just blank

I also tried to set Address to just Street Address, but still same result. I don't know what I'm doing wrong. At this point, I'm a bit frustrated...

Hi Elsie,

You are trying to access data that has not been fetched yet. 

If you want to use that data, you need to do it in the "On After Fetch" event of your data source.

Check this link for more info: https://success.outsystems.com/Documentation/11/Developing_an_Application/Implement_Application_Logic/Screen_and_Block_Lifecycle_Events 


Hope this helps, 

Pedro

Hi Pedro, 

Thanks for the oml I also came across like requirement , I downloaded oml when i;m trying to use that an error is coming like Googlemap/map block is not available , do i need to use any dependencies .


Thanks in advance,

Sandeep.  

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.