We have launched a new site for People and Pollinators, a non-profit organization to redesign and move their website from Wordpress to Wix. One of the major components of their site is an interactive Google Map that shows pins for every person who has pledged to have a pollinator safe property. On the new Wix website we’ve built (now launched: https://www.peopleandpollinators.org/map), we have a custom Wix pledge form that, when filled out, it adds pins to the database that feeds the map instantly.
We also uploaded their existing database of 2400 map pin points to the Wix database, but we are running into two problems:
1. 1000 QUERY / ITEMS / PIN LIMIT:
The map database does seem to be limited to showing only 1000 data points as the Dataset Settings “Numbers of items to display” defaults back to 1000 even if we type in 2400.
2. SUPER SLOW LOADING Despite it potentially showing only 1000 pins, the map is now loading verrrry slowly (a bit of slowness was anticipated, but it’s so extremely slow that I don’t think it’s usable, it takes 10-30+ seconds to “load” the markers on my super-fast fiber internet connection, so it’s not good, it loads the map slowly at first, but it’s empty for a long time before loading the pins, if at all), check it out - does it load as slowly for you?
Here is the Google Map page embedded page from my client’s original Wordpress page (in an iframe) to show the Google Maps API – it is loading instantly:
https://www.peopleandpollinators.org/embedded-map
This above Wix page with an iframe is embedding the Map Page from their old WP site. The WP Map uses a different custom coded process combining a somewhat-complicated method to feed any new submissions to the list by using a combination of sending the updated form database to use the Amazon Web Services Lambda Function, and Cloudwatch and a WP plugin to generate the latitude longitude coordinates to populate the Google Map with all the ~2400 pins). It updates every 24 hours. Despite this, the map loads instantly and has all the pins.
Unless we find a solution to the Wix database 1000 query limit and the slow loading map, for now, we may just use the iframe embedded version of the WP Google Map page so we can launch the new Wix website. Not ideal, so hoping we can find a work-around or good solution.
Any suggestions on what could be done to improve the load time on the Wix map? How would we set this up to allow for multiple round of querys so it can load pins maybe 500 at a time until it is fully loaded?
Here is our custom Wix Velo code for the Google Map:
(thanks Nayeli!):
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
[#map](https://www.wix.com/velo/forum/search/~num~map) {
height: 100%;
}
</style>
<script>
/*
{
isLocation : true,
locations: [
{
lat: 1234123,
long: 1324112,
info: "state name display in map",
id: "repeater ID"
}
]
}
*/
var markersArray = [];
var lastLocation = [];
let ready = false;
window.onmessage = event => {
console.log("Message received!", event.data);
if (event.data) {
if (event.data === "clear") {
setMapOnAll(null);
} else {
let data = event.data;
if (data.isLocation) {
ready = true;
let location = JSON.parse(data.locations);
window.parent.postMessage("Test", "*");
initMap(location);
}
}
}
};
function initMap(receivedData) {
if (!ready) {
window.parent.postMessage("Ready", "*");
}
console.log("Map initiated", receivedData);
var locations = receivedData;
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: new google.maps.LatLng(39.146965, -105.530272),
mapTypeId: google.maps.MapTypeId.ROADMAP,
maxZoom:15
});
setCenter(map, locations);
var infowindow = new google.maps.InfoWindow({});
// var marker, i;
// Upper Bound
var markerIcon = {
url: "https://static.wixstatic.com/media/139de8_5f9d94c49b76412cb1f4d52e5806c3a0~mv2.png",
scaledSize: new google.maps.Size(40, 40),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(32, 28)
};
var markerLabel = " ";
// Lower Bound
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
icon: markerIcon,
position: new google.maps.LatLng(
String(locations[i].lat),
String(locations[i].long)
),
label: {
text: markerLabel,
fontSize: "16px",
fontWeight: "bold"
},
labelAnchor: new google.maps.Point(18, 12),
labelClass: "my-custom-class-for-label"
});
markersArray.push(marker);
google.maps.event.addListener(
marker,
"click",
(function(marker, i) {
return function() {
infowindow.setContent(locations[i].info);
infowindow.open(map, marker);
window.parent.postMessage({
“click”:true,
id: locations[i].id
}, “*”);
};
})(marker, i)
);
}
}
function setMapOnAll(map) {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(map);
}
}
function setCenter(map, locations) {
//Example values of min & max latlng values
let lats = locations.map(_ => _.lat);
let longs = locations.map(_ => _.long);
let lat_min = Math.max(...lats);
let lat_max = Math.min(...lats);
let lng_min = Math.max(...longs);
let lng_max = Math.min(...longs);
map.setCenter(
new google.maps.LatLng(
(lat_min),
(lng_min)
)
);
map.fitBounds(
new google.maps.LatLngBounds(
//bottom left
new google.maps.LatLng(37.332358, -108.804395),
//top right
new google.maps.LatLng(40.586131, -102.831245)
)
);
}
</script>
<!-- <script src="script.js"></script> -->
<script
async
defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaXLjETVbs_fwIU2Xu6l5XQPLHbHPfkno&callback=initMap"
></script>
Thanks for any ideas on how to improve this!
