Found the problem! It was the fitBounds function, that initiated the zoom & the center.
Now starting to work on closing infowindow when going outside the map, and also when clicking on the controls, since the infowindow is getting huge when zooming. Will report:)
Last open issue is that when a marker that is close to the map edge is clicked, the width of the infowindow is getting biggerā¦
https://leitersbelz.wixsite.com/leiters-prototype/home
Hi Yisrael, this example has been very helpful but I am having some trouble implementing it. Every aspect of the map seems to be working for me with the exception of the markers. When I look at my map, the map and all of itās controls appear how I want them to, but for some reason the location markers just arenāt showing up. When I go into preview mode nothing at all shows up - only on the published site will things appear on the page.
Do you have any suggestions or any idea of where it could be going wrong?
Here is the backend of my code:
import wixData from 'wix-data';
export function getLocations() {
return wixData.query("Locations") // the database to query is 'Locations'
.find()
.then((results) => {
return results.items; // items is an array of locations from the collection
})
.catch((err) => {
let errorMsg = err;
});
}
page code:
import {getLocations} from 'backend/locations';
$w.onReady(function () {
sendLocations();
$w("#html1").onMessage( (event) => {
if(event.data === 'hello') {
sendLocations();
}
else {
$w('#text1').text = "Currently Veiwing: " + event.data;
}
} );
});
function sendLocations() {
getLocations().then((locations) => {
let markers = [];
for (let i = 0; i < locations.length; i++) {
let loc = locations[i];
markers.push({title: loc.title, position: {lat: loc.latitude, lng: loc.longitude}}); // wanted property price as title
}
$w('#html1').postMessage({markers});
});
}
html code: (i essentially just modified your version and swapped my API key)
<html>
<head>
<title>Wix Code / Google Maps :: Multiple Markers</title>
</head>
<body>
<div id="map" style="height: 100%; width: 100%;" />
<script type="text/javascript">
let Tokyo = {lat: 35.6730185, lng: 139.4302008};
/**
* The RestoreControl adds a control to the map that resets the zoom,
* and recenters the map on Tokyo.
* This constructor takes the control DIV as an argument.
* @constructor
*/
function RestoreControl(controlDiv, map) {
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to reset the map';
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Helvetic Light,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.lineHeight = '20px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Restore Map';
// Setup the click event listeners: simply set the map to Tokyo.
controlUI.addEventListener('click', function() {
map.setCenter(Tokyo);
map.setZoom(10);
});
}
let locations = null;
function init() {
if(locations === null) { // if no locations, let page know
window.parent.postMessage("hello", "*");
}
window.onmessage = (event) => {
if (event.data) {
locations = event.data.markers;
let infowindow = new google.maps.InfoWindow();
let map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
streetViewControl: false,
center: Tokyo //{lat: 35.6730185, lng: 139.4302008} // Tokyo is the centerpoint
});
// Add the markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function (location) {
let marker = new google.maps.Marker({
position: location.position,
map: map
})
google.maps.event.addListener(marker, 'mouseover', (function (marker) {
return function () {
infowindow.setContent(location.title);
infowindow.open(map, marker);
}
})(marker));
google.maps.event.addListener(marker, 'mouseout', (function (marker) {
return function () {
infowindow.close();
}
})(marker));
google.maps.event.addListener(marker, 'click', (function (marker) {
window.parent.postMessage(location.title, "*");
}));
return marker;
});
// Create the DIV to hold the control and call the CenterControl()
// constructor passing in this DIV.
var restoreControlDiv = document.createElement('div');
var restoreControl = new RestoreControl(restoreControlDiv, map);
restoreControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(restoreControlDiv);
}
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MyCodeHere&callback=init">
</script>
</body>
</html>
Lola, Did you start with the example? Use that as a starting point and then make the changes as you need.
Hi Yisrael,
Yes, when I first started out I just used your template directly by clicking on the wix editor link you posted and tried to change that to meet my needs but for some reason when I would change things such as the title or the coordinates, I had the same problem where it did not work for me (all of the locations and names remained the same as you originally had them even after āpublishingā the changes). So from there I decided to just copy everything by hand in a new website which still hasnāt worked out for me.
Perhaps thereās something obvious that Iām overlooking when I do thisā¦Iām not sure - is there anything you canāt think of that I may be missing?
Thank you for your help and responsiveness by the way, I appreciate it greatly!
Oh actually I figured out the issue (I was right about it being something small and dumb and which I completely overlooked) - I was implementing the changes in sandbox, not the live editor! I didnāt even see the other option. Thank you for you help and sorry to be a bother!! 
Anyone run into issues with the clustering? My code works, it properly maps all locations. However, it only adds one cluster, with a value of 2 that I ahve to zoom out super far to see. Does that clustering not apply to all markers??
I am sending a large number of locations ~ 600 if that makes a difference?
<html>
<head>
<title>Wix Code / Google Maps :: Multiple Markers</title>
</head>
<body>
<div id="map" style="height: 100%; width: 100%;" />
<script type="text/javascript">
let charlotte = {lat: 35.223603, lng: -80.836319};
/**
* The RestoreControl adds a control to the map that resets the zoom,
* and recenters the map on Charlotte.
* This constructor takes the control DIV as an argument.
* @constructor
*/
function RestoreControl(controlDiv, map) {
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to reset the map';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Helvetic Light,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.lineHeight = '20px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Restore Map';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to Chicago.
controlUI.addEventListener('click', function() {
map.setCenter(charlotte);
map.setZoom(8);
});
}
let locations = null;
function init() {
if(locations === null) { // if no locations, let page know
window.parent.postMessage("hello", "*");
}
window.onmessage = (event) => {
if (event.data) {
locations = event.data.markers;
let infowindow = new google.maps.InfoWindow();
let map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
streetViewControl: false,
center: charlotte
});
var markerIcon = {
url: 'https://static.wixstatic.com/media/94bef7_6a68b63290134616b68e3c0600bf79a0~mv2.png/v1/fill/w_134,h_134,al_c,usm_0.66_1.00_0.01/94bef7_6a68b63290134616b68e3c0600bf79a0~mv2.png',
scaledSize: new google.maps.Size(16, 16),
// origin: new google.maps.Point(0, 0),
// anchor: new google.maps.Point(15,30)
};
var markers = await locations.map(function (location) {
let marker = new google.maps.Marker({
position: location.position,
icon: markerIcon,
map: map
})
google.maps.event.addListener(marker, 'mouseover', (function (marker) {
return function () {
infowindow.setContent(location.title);
infowindow.open(map, marker);
}
})(marker));
google.maps.event.addListener(marker, 'mouseout', (function (marker) {
return function () {
infowindow.close();
}
})(marker));
google.maps.event.addListener(marker, 'click', (function (marker) {
window.parent.postMessage([location.foreclosure_id,location.property_id], "*");
}));
return marker;
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{ gridSize: 10, maxZoom: 8, imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
// Create the DIV to hold the control and call the CenterControl()
// constructor passing in this DIV.
var restoreControlDiv = document.createElement('div');
var restoreControl = new RestoreControl(restoreControlDiv, map);
restoreControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(restoreControlDiv);
}
}
}
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API KEY&callback=init">
</script>
</body>
</html>
Hey @david-seroy ,
600 locations? Maybe you just blew up the map?
Seriously, I seem to recall that clustering is based on the zoom level. You should check the Google Maps documentation. However, I suspect that youāll get better answers by doing a Google search. Maybe you can find the answer on StackOverflow.
Yisrael
Stopped working?
The example (from the template and with the userās API key) still works. However there appears to be an issue with the API key restrictions on the demo site. Looking into it.
I dunno, maybe itās the beer - but itās working for me now.
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
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!
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.
Hey Yisrael,
thanks for answering. Creating the fields as Number and synchronizing the live database from the sandbox database everything worked!!
:))))))))))Thanksss
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 Tiaan,
Howāre you doing?
I opened up your site and tried running it myself. I suspect that you might need to check your API-KEY setting based on my results:
Of course, the referrer error that I get might be because Iām running this and therefore the referrer is wrong.
I would suggest taking off all API-KEY restrictions and see if that works. Then you can start working on putting in the proper restrictions based on working code.
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, I seemed to have resolved it already. My lat and long are text fields, It appears they need to be numeric.
Thanks, B