I won’t go in detail how we will fetch data from database, and pass it on to our view, just the plain view, and how things are working on it. First we need to add reference of maps API. Then add a div element in your body, which will host the map. To show our initial map, we need to configure some options of this map, get the reference of div element where we want to show this map, and create instance of the map. That’s the simplest part of showing a map.
Let me elaborate it further.
First we picked a location where we want to center our map, we need latitude and longitude of that location. Next we need to configure our map, we can specify following options:
- center: that would be latitude and longitude of a location on a map
- zoom: initial zoom level of the map
- mapTypeId: which type of map to display (we are using a road map). However following map types are supported
Then we create a map object using the selected element and map options. All these efforts gives us the following.