Auto Updating and Resizing Map — Multiple Markers on Google Maps with Wix Velo
Adventure with Wix Velo
Auto Updating and Resizing Map — Multiple Markers on Google Maps with Wix Velo
Welcome back to the final episode in my series on displaying multiple locations on Google Maps With Wix Velo!
We’ve worked through the series, building a website from scratch and we’re finally ready to bring it home!
Lets Do This!!!
Our Goal For the Series
Our goal in this series is to build a website which fully integrates the display of multiple, dynamic map data points into a Google Maps display. We want to be able to update a location and have it almost immediately display on our website. If you’d like to read more about why this is important, here’s my introduction.
Working Example: The example we’ll be using is shown here.
Github / Code Repo: For those who find it useful, the public github repo is here.
Along the way, I’ll share couple of tips on some security considerations, along with helpful observations which will hopefully save you many hours of troubleshooting. The full list of episodes can be found at the bottom of each episode.
As always, I hope this content is helpful. It means the absolute world to me when you take time to clap for an episode, subscribe to my stories or use my referral link to sign up for Medium. It lets me know that my stories are helping you ❤️.
Enjoy, and feel free to drop me a DM on twitter, connect on LinkedIn / Github with thoughts and comments 😃
In This Episode
This episode is the final one. The Capstone. The one where it all comes together. Together, we’ve done a ton of work, and now we’ll be finishing it off.
Here’s what we’ll be covering:
- Triggering a map update upon form submission
- Resizing the map to make sure all locations are in frame
Sweet!
Triggering A Map Update
We need two things to dynamically update our HTML element.
- Trigger. We need an event to occur which can be used to trigger the next action to occur.
- Data. We need to know the data to be passed to the HTML frame. Fortunately, we’ve already done all of this work in our previous episodes.
When examining our trigger, we need to consider a few things.
- Ensuring that we capture the information only after it has been successfully entered
- Ensuring that the trigger only fires once per new location submission (otherwise, we would end up with a constantly refreshing map)
- Ensuring that a new location can always be entered
This means that we cannot use standard triggers like ‘on page load’ or ‘when the submit button is pushed. Both options will violate one of our considerations. ‘On page load’ will only load the map when the page is first browsed to or when we refresh the whole page (which is pretty clunky). ‘When the submit button is pushed’ runs the risk of loading our locations before the new entry is entered. While we could certainly design our code flow to navigate around some of these issues, it would be error prone, and likely introduce further bugs.
Luckily, the Wix CRM API has the following function: onWixFormSubmitted . Reading the documentation for this function, we find the following: “An event that is fired when a site visitor clicks a submit button on a WixForms element and the Wix Form is successfully submitted to the server.”
Win!
This excellent little API function meets our criteria:
- It only fires after a successful submission
- It fires once per successful submission
- It is built into the form so is always available
With that in mind, let’s update our $w.onReady function to include a method to handle a Wix Form submission.
Here’s the code:
If you’re following the tutorial series, you might notice that we’ve now connected our Wix Form firing to the function to retrieve our location data.
How good is that!
If you ‘Preview’ your site right now, you should notice that you can already see this working.
So cool!
Resizing Google Map
Our next challenge is making sure that our map always resizes to include all the markers.
Once again, we can read through our docs. The Google Maps Javascript API has a great little function called LatLngBounds() and it’s a total lifesaver for this purpose.
It allows us to pass an array of locations to the function, then ask it fit the bounds of the map to include all of them. Pretty much exactly what we need.
Add this into your HTML Element code, directly under the locations.forEach(location => section:
Press ‘Update’ on your Edit Code and it should be done.
A Very Exciting Moment
We’ve reached a very exciting and pivotal moment!
At this point, if you publish your site, you should have a fully functional and working Google Map which updates as new locations are entered. Even better, you’ve customised the icons you’re using on the map.
Congratulations to you 😃
For reference here is the full code files:
Taking It Further
From this point, we could definitely take further. We could do things like:
- Customise the look of the map itself using some of Googles excellent customisation options
- Customise the markers further, maybe differentiating between a midpoint and an exciting location
I’m sure you could think of more and I’d love to hear them!
Why not take some time to drop them into the comments below? I’d also love it if you gave me a shout out on twitter with a screenshot of your completed code — I’ll celebrate with you!
Wrapping Up Episode 5
Nice work on finishing the series! I hope it helped you solve whatever challenge you visited for!
List of Episodes:
The full list of episodes in this series are linked below to help you navigate quickly ❤
