Google Maps - display multiple markers from Bubble database using html element

Need help APIs
1

Hi there,

I’m looking to improve Google Maps UX using a html element in my app. An example of functionality I am after:

  • change marker colour when hovered
  • change marker size when clicked
  • show info window when marker hovered

It looks as though this should all be possible using a html element and Google Maps Javascript API. First challenge I am facing is displaying a list of markers on a google map displayed in a html element. I have followed the example here to get me started.

https://developers.google.com/maps/documentation/javascript/importing_data#loading_data_from_the_same_domain

I can display the google map and modify functionality by passing in single item dynamic data (e.g. latlng to define zoom location) however I’m getting stuck when trying to insert dynamic data to plot multiple markers. The data I need to plot is saved in my bubble database. Is this possible?

Any assistance would be appreciated!

2

Something like this?

http://www.geocodezip.com/v3_MW_example_map1.html

There a lot of examples on this site, check them out

3

Yes similar to this. I’ll take a look at those other examples and post back if I find a solution or need some further help. Thanks!

4

So I have been through these examples and they will be helpful in applying styles to markers. However, the first hurdle I have is plotting multiple markers on the map. The list of items I want to plot are located in a repeating group on the same page. Any ideas how to get the data from the repeating group onto the map in the html element? Thanks in advance

5

I dont think it can be done dynamically.It is possible to fix a number of items as below:
var locations = [
{lat:RepeatingGroup Business’s List of Businesss:first item’s Adress’s latitude, lng: RepeatingGroup Business’s List of Businesss:first item’s Adress’s longitude},
{lat:RepeatingGroup Business’s List of Businesss:item #2’s Adress’s latitude, lng:RepeatingGroup Business’s List of Businesss:item #2’s Adress’s longitude},
{lat: RepeatingGroup Business’s List of Businesss:item #3’s Adress’s latitude,lng:RepeatingGroup Business’s List of Businesss:item #3’s Adress’s longitude}

Otherwise you would have to do a loop using the for (var i = 0; I etc. I am not sure if you can do that in an html element on the database.

The bubble map is basic and does allow for custom markers and dynamic windows but does not seem to accomodate cluster markers which is a must if you have multiple markers.

6

I’m trying something similar - wanting to be able to insert data dynamically into an html element to modify maps elements you can’t change otherwise. Would love to know how to do this if anyone has a creative solution!