#Example #GoogleMaps #MultipleMarkers #MarkerClustering #CustomControls #HtmlComponent #APIKey #security
Demonstrates
Required for this example
In order to use this example in the editor, you will need to supply your own Google Maps API key.
Links for this example
About this example This example is based on the following:
Google Maps Marker Clustering
Google Maps Custom Controls
A database collection called Locations contains the locations that will be marked on the map. A query is performed on the collection, and an array of Locations is created and passed to the HtmlComponent with postMessage().
The code in the HtmlComponent is based on Google’s map example code and was modified for messaging with the web site page.
Replace the string GOOGLE_MAP_API_KEY in the HtmlComponent code with your own API key. See the forum post Secure a Google Maps API key in an HtmlComponent for details on how to protect your API key.
I'm having a difficult time implementing this. On my backend, I already have an array holding filtered date from a collection query.
This query is initiated by a button click that send a query string to the backend.
The result runs a GET request to Google Distance Matrix and creates an object. The results are compared to the collection, and finally, a filtered collection is saved in the finalist variable.
The code you have is basically over before I'm able to pass any information to the page. can you help me modify this code to work asynchronously?
finalist = ffdetails.filter(function(checkRanges){ return checkRanges.distance <= checkRanges.serviceArea; });
how can I send the global finalist variable, after
Hi, I am using the wix map from the side menu and placed it on to my page, it then allows us to connect the map to a dataset, it says to connect locations to when the dataset has been chosen and attached but it doesn't allow these location to be seen when in preview or live page.
it says in the console log that "markers cant be set to []" is this due to the connection between the dataset and the map not working or the map not being able to show multiple locations from a dataset?
Si
Thnx. I copied the example and add a link to each marker to show te details-page of a location.
It opens in the iframe of the HTML code, which is not nice concerning the design. Using the target=_blank is a solution but has not my preference, because the visitors loose contact with the original page.
How can I solve this?
Is this for individual markers or multiple markers?
Woooooow, this is soooooo beyond my abilities... I wish we could be able to connect the content manager to Google Maps. It seems to offer that possibility, but it never works. I have addresses, longitude, latitude, all that stuff in my content manager. I have tried to follow WIX coding on different tutorials, but I simply don't understand.
Thank you @Yisrael (Wix). I can show the map on every browser except chrome on iOS devices (iPhone X). Maybe the reason is the html1 I have hidden is not loading after I get the message (see related: https://www.wix.com/corvid/forum/main/comment/5a91a3429ebd210014c42541)
Do you know how can I show the map on chrome iOS?
@Yisrael (Wix) Hey!
I have a Map that I built in Google My Maps that features multiple markers with unique icons indicating different types of locations. I've successfully embedded this map in the desktop version of my site, but it refuses to scale for mobile. What am I missing here?
@Yisrael (Wix) I followed the example, and got my key from google. But I still keep ending up with a gray google maps, why does this keep happening, can you help me?
Hi @Yisrael (Wix) I followed this example, and thank-you very much!
The example centres the map on Barcelona, I can easy change this to centre the on another location, but how would I centre the map on the users location?
I seem to be coming up against a 50 marker limit. I found a link somewhere that mentions google api will only accept 50 marker assignments per secound. They talk about slowing down the assignment of markers to get 100 markers onto the map. Has anyone found this or am I in error somewhere
Hi,
Thanks @Yisrael (Wix), I have been able to follow your example and now have a map populated with multiple locations.
What I would like to be able to do is centre the map to the current location of the user, how can I achieve this? Would I establish the location using getCurrentGeolocation and then pass this to the map (and how would I do this?). Or should I establish the location within the HTML and center the map (and again how would I do this?)
Hello, I have a map with multiple markers working great based on this example. I'd like my map background to be the "silver" version shown on the google maps styler. I'm wondering exactly where I would copy the styler code in this example?
Thanks!
@Yisrael (Wix) how do we filter map pins based on Locations data? Example: "Title" includes "USA". Thanks!
Hi @Yisrael (Wix)
Great example! I've got it all working and customized to my liking. I'm also using your example of "Places" from Google Maps you created, here.
I'm wondering if there is a way of centering the map in the HTML code to the long and lat I receive when I select a place from my places dropdown?
At the moment I after I click a place from my drop down it sends the data to my page.
E.g:
$w('#text1').text = longitude;
$w('#text2').text = latitude;
I've tried 'adding' another postMessage for my HTML to receive but it doesn't seem to be working.
Thanks for any help!
TA
Hi Yisrael, thanks for the writeup! I seem to be having an odd issue where the API key is working and the map is opening however it's not pushing the markers. I checked console.log from your test query of the locations database and mine and there appears to be a small difference on the output although I'm not sure what would cause this. The first line below is a console.log of the markers using your example. Below that is the console.log of the database in my site. The I noticed the field names in your database had open and closing brackets [latitude], [longitude]. I tried to replicate the name but it had no effect. As you can see below the results are clearly formatted differently even though we're using the same code. Thoughts? 0: "{\"title\":\"Columbia Pike Farmers Market\",\"position\":{\"lat\":38.862393,\"lng\":-77.086638}}"
0: "{\"title\":\"Columbia Pike Farmers Market\",\"position\":{\"lat\":\"38.862393\",\"lng\":\"-77.086638\"}}"
Hi Yisrael!
It's good to see you're keeping busy with impressive examples!!
I've had a go at this myself using your example, but I must impress on your help, I seem to have an issue with what seems to be the API key, but it doesn't seem to be a similar issue as you've described in your other post regarding the fix.
What happens is it opens up, shows the locations for a split second and then shows the error screen. I'm guessing google is rejecting the API key, but for the life of me I don't understand why. I is a newly setup account as per your tutorial. I don't know if that might have anything to do with it, but I've waited numerous amounts of 10min's with still no luck..
To make sure I didn't mess up anything in your example, I made a copy of it and simply inserted my API key, you can view it here: https://tiaanrich.wixsite.com/googlemaps
This is the error that I'm getting. Any ideas..?
Thank you
Tiaan
Hey Yisrael,
thanks for answering. Creating the fields as Number and synchronizing the live database from the sandbox database everything worked!!
:))))))))))Thanksss
Blai, As you can see in the HtmlComponent code for the map, the latitude and longitude are being treated as numbers so you can define these fields in the database as Number.
Hi Yisrael!
Thanks for the example, it's very useful.
In my case I managed to make the map work but the markers are not working. I think that comes from a database error, but I dont know how to solve it.
In you example the [latitude] and [longitude] are two columns that I can't create. I only have the option to make it as a Text or Number column. Is that a problem?
(Yours arent a text or a column, you cant change anything of that)
Thanks!
Can anyone tell me about Mouse Tracking on Wix website and also connect html widget where i put blog and Read More button but how we connect both things with wix database