Populating Google Maps with Vue and Laravel

hi everyone Andrew here this video is a bit of a follow up to a previous tutorial where I showed how to get Google Maps and geolocation added into a view app I'll instead be using the same view component package to create a map that's populated with pinpoints from a laravel API what we're going to be creating should look similar to this found on a local restaurants locations page a variety of pins and if we click on one it shows an information box with ours location and other relevant data we're going to be using the larval PHP framework to store and request this data however if you already have an API system built or prefer using an alternative framework you can skip directly to the map making portion of this video by using the time link in the description to get started I have this blank larval project I'm only going to need one database table and model for this API restaurants we can use the artisan make model command with the migration flag to create our restaurant model and migration at the same time let's open up the migration file and scaffold out our database table we'll need a name for our restaurant an address a city a state and some hours we will also need to store the location data as a latitude and longitude from a variety of sources online the best structure for these values seems to be a decimal eight total numbers with six decimal places for the latitude and nine total numbers with six s imil places for the longitude let's run the migration with artisan to generate our database we can view our database and see that the structure has been added in we have a restaurants table with all of our columns ready to store data next I'd like to add just a few tests restaurants to our app we could just add them in right here in our GUI but I'd like to instead seed the database programmatically in the console we can use the artisan make cedar command along with a class name to bootstrap a database cedar let's open that up and under this run command is where we're going to perform our database actions I'll just add in the DB facade and then start working on saving a test item into our restaurants table using DB table insert here we'll add a name address city/state hours and some latitude and longitude points that I'm pulling from a map once we have that one item filled out we can just copy and paste these two more times changing out some of the values perfect now to ensure this runs we'll have to edit our database cedar class under its run method we'll need to use this call and pass in our restaurant cedar class then to actually run it and see our database all we need to do is call artisan DB seed oh this error popped up if you see this all that means is we need to run composer dump auto load first okay let's try running that artisan DB seed command again it went through just as planned and if we take a look at our database we can see that three test restaurants have been added into the appropriate table it does seem like these are missing the timestamp values though and I'll just add those in here now I'll also adjust the cedar clasp so that they aren't missing if we need to run this again in the future so we have our data saved in the database now we need to talk about how we're going to retrieve it let's open up the routes API file and get rid of everything that's in there we just need one route for this demo which will return all of the restaurants in the database I'm going to creatively call this restaurants and it will call the restaurant controllers index method we can make that controller with the artisan command once that's done let's open it up and add in our method public function index and we're just simply returning restaurant all opening up our browser again and navigating to API restaurants we can see our three restaurants and their details returned to us in JSON that's exactly what we're after now that we have our back-end API set up it's time to shift attention toward putting it to use in a front-end view for this demo I'm just going to copy the default welcome blade PHP template and call it app blade that PHP let's change out the title and clean up some of the CSS and markup that we're not going to use finishing up with a simple h2 title and then changing out the view that's rendered on the landing page we can see it show up in our browser if we refresh let's adjust the body margin a bit though so there's some spacing okay that looks better now we need to add the actual map in here to do that well first need to create a view app laravel used to have a bootstrap view file included but now that functionality is split out into a separate package to install that all we need to do is run composer require laravel UI in our terminal and after that completes run artisan UI view this will generate all of the file structure package requirements and bootstrap J's files that we need to get started with view running npm install will install those prerequisites and we're also going to need to install the view to google maps package just like we did in the geolocation video that i mentioned earlier once that's installed we can use npm run dev to compile our development assets and get started using them in our app before our closing body tag in the app blade that PHP file let's add in the script call to our main app KS file opening it up i'm going to get rid of the comments in here for simplicity sake this is where we're going to be handling our view app development our front end will be very simple so we can get away with using a single file instead of breaking it out into individual components adding in an ID of app to our map wrapper div completes the view inside if we open up our browser refresh the page and open up our dev console with view tools installed we can see that we definitely have a view app up and running on this page this needs a map though so let's get started with that back in our app da J's file we'll need to import everything as a view Google Maps from view to Google Maps and implement it with a view you statement passing in our imported object along with setting our load key option which I'm just keeping blank for right now back on our app top blade template adding in the map is pretty straightforward using the G map map element and views dynamic attributes we'll set the center as an object with a latitude of 10 and the longitude of 10 the zoom as 7 and the style as 100% wide with 320 pixels of height actually scratch that we'll need to swap the element name out for a lower kabab case G map - map let's head to our browser and refresh our map is displayed it's covered with a for development purposes only overlay because of that missing key from earlier but other than that it's a fully functioning JavaScript embed of a Google map I'm just going to tweak some Styles here to make it a little nicer to work with and look at that's better I've also gone ahead and created an API key for this demo so that the overlay is removed now if you're unsure of how to do that the video I have linked below will take you through all of the steps necessary to generate one from the google cloud console so now we have our map it's time to populate it with pins to represent our restaurants between the G map map tags we can use another view element from the package G map marker this takes a position attribute and like the center attribute in the map it's an object with the latitude and longitude there's also clickable which will set the true we want these map pins to open up an info window whenever they're clicked draggable will be false though we don't want these to be moved away from the positions that we initially set them in refreshing our browser will see this test pin added in the same location as our map Center clicking it doesn't do anything yet but we can click on it and we can't drag it so it looks like our attributes are all working as expected well this looks good for a test pen but we need to populate this map based on our database since we are in ER laravel view i could directly include the restaurants as an array and then loop through a for each creating the G map marker element for each one however because of this front-end is using view already and I want this tutorial to be a little bit more decoupled from the backend we're going to use a view to populate these pins and treat our data layer as a separate API in our app J's file let's create a data object to hold our apps data points for now the sole item will be an empty array of restaurants we'll also add in a created method fired when the view lifecycle starts that's going to in turn use Axios to perform a get request on the API restaurants endpoint and pass the return data along to our restaurant ARAG any errors will be caught and logged in the browser console so now back on our app top blade template we can use v4 on the G map marker element this will create a marker for each item in the restaurants array because we're using v4 we'll specify the index as the ID of the restaurant and then set the location of the point to the latitude and longitude that's stored in the database for that restaurant actually for this right here we need to specify that these are float values we could do that inline but for anything that lengthy I like splitting it off into its own method we'll call it get position and pass in our restaurant as the only argument let's create that method in our app that J's file it's just going to return an object with a latitude and longitude from the restaurant parsed out as floats now if we go back to our browser and refresh we can zoom out and see our three markers being displayed from the data in our database there's a slight problem though when we load up the map the center is very far away from where our points are let's fix that in our App J's file we're going to create a computed property called map centre unlike a data point a computed property is constantly evaluated for a return value that could change depending on the values of other data points in our case we want to have this Center to be 10 latitude and 10 longitude if there's no restaurants present but as soon as there are we want to change it to the latitude and longitude of the first restaurant in the array back on our apt uh blade template file all we need to do is update our G map map Center attribute to use the computed map Center property if we save recompile our dev assets and refresh the browser we can see that as soon as the restaurants are retrieved the map Center changes to match the latitude and longitude of the first one returned let's adjust the zoom here so it's a little easier to see ten should be good that's much better and you don't have to use the first element of the array for the map Center you can get the center point for all of them and calculate an average or median value or form a bounding box based on the largest or smallest ones for now though I'm just going to stick with this next I want these markers to open up a pop-up when they're clicked like this one here so let's head back to our application and in our apt uh blade file above the G map marker element we'll add in a G map info window component this handle is displaying an info window for our marker and we'll pass through some dynamic attributes options set to an info window options data objects position set to an info window position data objects and opened set to an info window opened boolean inside this element will be all of the information that we want to display in that pop-up window using plain HTML markup for now I'll just hard code in some test data a title some hours and an address with the city and state next we need to create these attributes in our view apps data object by default the info window is closed and we're going to have to move this info window position item to a computed property we could just update it each time a marker is clicked on but because we're also going to be dynamically writing text and data to the info box it makes sense to instead store something like an active restaurant object and generate the position of the info box from that just like the map center position this is returning an object with latitude and longitude generated from the position of the active restaurant now we'll just add in some options for our info window an offset of zero width and a negative 35 height which will make the box display a bit more closer to the pin next we need to set this active restaurant object each time that a marker is clicked going back to our app top blade template under the G map marker element we can add a click event listener that will then in turn change the active restaurant object to whatever restaurant is associated with the marker that was just clicked if I build our assets go to the browser and refresh clicking on each marker updates our apps active restaurant data it might not look like it because we're not doing anything with that information but if we open up our development console and go to the view dev tools we can see those changes happening in real time back in the source code we need to do two things whenever a marker is clicked besides updating the active restaurant we also need to display that info window I don't like using separate statements in line like this so let's break this out into a method called handle marker clicked passing through the restaurant as an argument now we can create that method in our app J's file and set the active restaurant to the our object pass-through and also set the info window opened boolean to true we also need to do the reverse of this handling what happens when an info window is closed luckily view to Google Maps includes an event listener for that and we can add closed click to our G map info window element it'll fire off a method called handle info window close let's go ahead and create that method under our handle marker click method from just earlier and it will set the active restaurant to an empty object and set the info window opened property to false refreshing the browser yet again we can click on the markers and see the info box appearing just as expected we can even close it and open up a different one seeing the box show up right above the marker it should it's still showing that hard-coded data though so let's change that we already have this active restaurant object which is a full item from the database so we can just use its attributes in place of these hard-coded values the name hours address city and state of the active restaurant will be displayed in this info window let's refresh again and test that out perfect each restaurant is updating its own info window with the appropriate data as a quick side mission what if we want it to display a new pin point whenever a user clicked the map on the point that they clicked on let's try and get that added in just like gmap marker the G map map component has a click event listener and will hook into that to call a handle map click method then let's create that method in our app JS file and it will have a single argument e which is the past and event from the map when the map is clicked we'll add a new place holder restaurant to the end of the restaurants data array and using that er gyu meant pull in the latitude and longitude of the point that was clicked on using the lat and LNG methods shown now if we save refresh the browser and click somewhere on the map a new pin is created we can click on this pin and see an info window with the hard-coded attributes that we attached to it we can also add as many pins as we want of course as soon as we refresh these will be gone but you can always use this method to do something like make a request to the API and pass through the location data from the Maps click event and that's all there is for this video you've learned how to create embed and populate a Google map with view using our larval powered API we've retrieved items from a database plotted their locations using map pins and display their details and pop up info windows as always if you have any questions or comments about this video or any other web development topics please feel free to reach out to me in the comments or on my Twitter linked below huge thanks to my github sponsors as well as everyone else who continues to support these videos thanks for watching

Channel: Andrew Schmelyun

Views: 14,556

Keywords: laravel, vue, vue.js, google maps, web development, laravel tutorials, vue tutorials, google maps tutorials, javascript, web dev tutorials, web dev, web development tutorial

Id: FkibP9Wnreo

Length: 25min 17sec (1517 seconds)

Published: Tue Jul 14 2020