Making the most of the Google Maps API – Adding a map
The Google Maps API allows us to embed maps of arbitrary continents, countries, regions, cities and spots. It not only allows us to do this but it enables us to customize the returned maps and personalize them with our own functionality. Let us build a web app which uses the Google Maps API to not only show a map of a city but adds quite a few markers to it, lines and popups which show additional content when a marker is clicked.
The app is essentially going to center around the user (who should be in the city) and markers are going to be added for each bus stop in that city vente viagra au maroc. When a user clicks on the marker/bus stop – he/she is going to be shown a list of the buses that stop there and the times when the next buses are going to arrive at the stop. Furthermore, if a user clicks on a bus number – he/she is going to be shown a green line with the path that the bus takes from its initial departure to its final destination. If you are not from/in the given city (Ruse, Bulgaria) and want to take a look at the app you should uncomment the following lines of code because they will center the map around your current location and will show a marker pinpointing where you are located:
1 2 3 4 5 6 7 | if (Transporter.globals.firstIteration) { map.setCenter(new google.maps.LatLng(userGeo.coords.latitude, userGeo.coords.longitude)); Transporter.globals.firstIteration = false; } |
Adding a Google Map
To add a Google map, we create an HTML container where the map is going to be shown:
1 | <div id=‘map’></div> |
Before closing our body tag, we add Google Maps’ JavaScript file that makes it possible to add a map and transform it within our app:
1 | <script src=“https://maps.googleapis.com/maps/api/js?key=MYAPPKEY&callback=launchMap” ></script> |
You should note that when loading the script, we define our app’s key and we define a callback (a function) which will be called when the map loads.
When the script loads our function launchMap will be called. In it, we use the Google Maps API to initialize a new map by calling google.maps.Map with two arguments – the first is the HTML element where the map will load and the second is a list of options (the zoom and the center are required). For the map center, we give the latitude and longitude coordinates of the chosen city. We set zoom to 15 but you can play with it to find an optimal zoom for your purpose.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | function launchMap() { map = new google.maps.Map(document.getElementById(‘map’), { center: { lat: 43.8356, lng: 25.9657 }, scrollwheel: false, zoom: 15 }); Transporter.init(); } |
Finally, we initialize our custom logic which will customize the created map by calling the init method on the object that we will create next.
It is important to know that your HTML element which contains the map (#map, in our case) should have some size dimensions otherwise nothing may get shown. We have given it the following CSS rules making it take the entire screen real estate:
1 2 3 4 5 6 7 | #map { width:100%; height:100vh; } |
In the next part, we are going to customize the Google Map that we have just added and add our functionality to it.
Tutorial Categories:
Tutorial Categories:
