Tutorial: Creating a Webapp with Google Maps and Laravel
Setting up a Google Maps API key
To use the Google Maps API you have to register your project, that’s so Google can monitor your usage of requests (25,000 request/day are for free) and provide you some statistics. The registration is simple, just visit this site and follow the steps. Once you’re finished with this you should have your individual API key.
Include required scripts
To use the Google Maps API you now have to include their script into your views. Just replace the placeholder with your individual API key. You can also add some additional parameters to your url, like requiring some libraries to extend your functionality or allow user to be signed in and see their private markers.
And finally you have to include the scripts from the Maperizer library as well. I saved them in a folder inside my public directory. To create links for including them I use the asset() helper function provided by Laravel. This function generated a url to your public directory and let’s you append additional path parts.
Once you finished your script tags inside your views, it should look like this:
Display a map
Now you should be ready to bring your map to life. First you have to make some basic configuration about the features you want to use. These options can be seen inside the map-options.js. There’s an object with the following attributes:
- geolocation – if this is set to true, the start position of the map will be the current geolocation of the user
- center – here you can pass an latitude and longitude value for the start position in case you don’t want to use geolocation or if the user doesn’t give you the permission to read his or her location
- zoom – that’s the starting zoom level
- searchbox – if set to true and you have an input field with the id of ‚pac-input‘ you enable the functionality of a search box to allow users to search for locations
- cluster – enables/disables markerclustering (if you zoom out nearby markers will collapse into another symbol)
- geocoder – enables/disables the functionality of adding markers by location name (e.g. the exact address) instead of using the coordinates
There is a bunch of other stuff you can write into the map options object provided by the Google Maps API. Just check out this link to learn more about it.
The remaining steps of bringing your map to your site are simple. The only thing left to do is creating a canvas where you want to place your map. An empty div container with the id ‚map-canvas‘ is enough. At this point it’s important to know that the map won’t need any space and just fill the container. Therefore you’ll need to give the div element an actual size!
The last step is to create a maperizer object and pass it your previous created options.
Adding a Searchbox
If you decide that you want to add a search box you need to create another element and set the searchbox-attribute inside your options to true.
For the project I was recently working on I needed a map where the user clicks to add a marker. It was part of a form to create a new entry for the online travel diary. Additionally if the user clicks a second time on the map, I didn’t want to add another marker but move the existing one to the new position.
After creating the map, the only thing I to do is adding a click event handler to the it. Inside the callback function of the event I first remove all existing markers and then create a new one at the position where the user clicked.
Using Map Input in Laravel Forms
Now the adding and moving from markers should look fine, but we still don’t access and save the coordinates of the user input. For this task I use hidden input field inside my form. For creating forms in Laravel I use the Formfacade which you’ll have to include first. There’s a video by Jeffrey Way explaining very well how to do this.
Here’s what the updated version of our previous function looks like, every time the user clicks on the map we will overwrite the values of the two hidden fields:
Validating the Map Input
To save a location we only need the longitude and latitude value, which we pass to the backend with regular form fields. That also allows us to validate them and make sure the user selects a location. For validating forms I use Form Requests, if you don’t know this kind of validation, I can deeply recommend watching this video (also by Jeffrey Way). I make sure the user selects something by declaring the ‘lat’ and ‘lng’ values as required and add a custom error message so the user knows what’s wrong.
Getting data from Laravel
The rest is easy, just make the AJAX Request and add a Marker to the map with the coordinates that come from the backend:
If you have different usage scenarios for maps inside you site, I would suggest using an individual script file for each. This way you can easily decide which one to load by passing a variable to the view to check it with a regular if statement.
I hope this tutorial was useful to you and you enjoyed working with Maperizer.js. I will definitely continue working on this little project. Please feel free to give me feedback or suggestions for improvement.