I want to know how to show gas stations in google maps flutter

Question

so here's a picture from google map that I want to show the gas stations on my app like this because I want to make app that show the gas stations locations will anyone help me?

I need a code or hint about how to do it.

Answer 1

UPDATE:

For showing the Gas Stations only you need to apply a combination of custom Map Styling and POI filtering. These can be enabled from Google Cloud Project.

How to set the POI filtering

POI Filtering

NOTE The above process requires implementation of dynamic styling and Dynamic Maps SKU, which has its own billing system. Please refer to the Google Map Billing for more details.

To start with, try implementing static map styling to get an idea.

Implementing static map styling in Flutter using google_maps_flutter

 onMapCreated: (GoogleMapController controller) async {
        _controller = controller;
       _controller.setMapStyle(mapStyle);

Custom Style

    String mapStyle = '''
                        [
                          {
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#242f3e"
                              }
                            ]
                          },
                          {
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#746855"
                              }
                            ]
                          },
                          {
                            "elementType": "labels.text.stroke",
                            "stylers": [
                              {
                                "color": "#242f3e"
                              }
                            ]
                          },
                          {
                            "featureType": "administrative.locality",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#d59563"
                              }
                            ]
                          },
                          {
                            "featureType": "poi",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#d59563"
                              }
                            ]
                          },
                          {
                            "featureType": "poi.park",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#263c3f"
                              }
                            ]
                          },
                          {
                            "featureType": "poi.park",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#6b9a76"
                              }
                            ]
                          },
                          {
                            "featureType": "road",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#38414e"
                              }
                            ]
                          },
                          {
                            "featureType": "road",
                            "elementType": "geometry.stroke",
                            "stylers": [
                              {
                                "color": "#212a37"
                              }
                            ]
                          },
                          {
                            "featureType": "road",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#9ca5b3"
                              }
                            ]
                          },
                          {
                            "featureType": "road.highway",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#746855"
                              }
                            ]
                          },
                          {
                            "featureType": "road.highway",
                            "elementType": "geometry.stroke",
                            "stylers": [
                              {
                                "color": "#1f2835"
                              }
                            ]
                          },
                          {
                            "featureType": "road.highway",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#f3d19c"
                              }
                            ]
                          },
                          {
                            "featureType": "transit",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#2f3948"
                              }
                            ]
                          },
                          {
                            "featureType": "transit.station",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#d59563"
                              }
                            ]
                          },
                          {
                            "featureType": "water",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#17263c"
                              }
                            ]
                          },
                          {
                            "featureType": "water",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#515c6d"
                              }
                            ]
                          },
                          {
                            "featureType": "water",
                            "elementType": "labels.text.stroke",
                            "stylers": [
                              {
                                "color": "#17263c"
                              }
                            ]
                          }
                        ]
                    ''';

** END OF UPDATE **

You could try using Places API by enabling it inside API library in your Google Cloud project.

Google Places API

The functions in the Places Library, Maps JavaScript API enable your application to search for places (defined in this API as establishments, geographic locations, or prominent points of interest) contained within a defined area, such as the bounds of a map, or around a fixed point.

The Places API offers an autocomplete feature which you can use to give your applications the type-ahead-search behaviour of the Google Maps search field. When a user starts typing an address, autocomplete will fill in the rest.

This will enable you to find the nearest places of interest e.g gas stations, restaurants, hotels etc and get the location in the response data.

Once you get the latitude/Longitude from the response, parse accordingly and draw a marker on those places over Google Map. You could also add custom tooltip to those added markers to enhance users experience.