CODEWITHSUNDEEP
google-mapsweb-componentgoogle-web-componentgoogle-routes-api
seenmycorpseanywhere
seenmycorpseanywhere

Reputation: 768

google maps extended library "gmpx-route-data-provider": route format

I'm using googlemaps extended-library-component.

I have a map already rendered and I want to add a route polyline with gmpx-route-data-provider and gmpx-route-polyline.

How to assemble them is explained here.

And this is what I got (ignore {{geo.latitude}} and {{geo.longitude}}, the content is dynamically generated with handlebars):

<gmp-map
    center="{{geo.latitude}},{{geo.longitude}}"
    zoom="12"
    map-id="DEMO_MAP_ID"
    tilt-interaction-disabled="true"
>
    <gmpx-route-data-provider>
        <gmpx-route-polyline
            stroke-color="#2565cd"
            stroke-weight="9"
            z-index="0"
            fit-in-viewport
        ></gmpx-route-polyline>
    </gmpx-route-data-provider>

    <gmp-advanced-marker
        position="{{geo.latitude}},{{geo.longitude}}"
    ></gmp-advanced-marker>
</gmp-map>

<gmpx-route-data-provider offers a way to set the intermediate points without the need to use an API call, namely through the use of the property route. However, I cannot find anywhere an example on the format that said property should follow. It's mentioned it's used as a web component slot, but I'm a bit hazy on what might mean.

Could you point me to, or provide, an example that would render a simple route between points A and B, specified through coordinates?

Upvotes: 0

Views: 84

Answers (0)

Related Questions