xkjyeah / vue-google-maps

Google maps component for vue with 2-way data binding
https://xkjyeah.github.io/vue-google-maps/
1.88k stars 474 forks source link

Bicycle Layer not appearing?! (VERSION issue?? Help!) #788

Closed escully27 closed 2 years ago

escully27 commented 2 years ago

This may be an issue solved by using vue3-google-maps but the syntax and components are different in that library and I really don't want to go through my entire app to make the changes.

I need the Bicycle Layer of google maps to display!

It's very strange because the Traffic Layer works totally fine with this library currently and according to the Google maps documentation the two are very similar. Transit Layer does not seem to work either.

I'm not getting any errors or breaks when I try to do Bicycle layer along with the Traffic. Just doesn't display anything. I've tested with the Google maps JSFiddle to see if there are any bike paths recognized in my area - Colorado - and there are indeed paths on that demo. So it's not an issue with simply no data.

Here's how I'm able to display the Traffic layer...

`mounted () { this.geolocate();

  this.$refs.mapRef.$mapPromise.then((map) => {

      let bike = new google.maps.BicyclingLayer;
      bike.setMap(map);

      let traffic = new google.maps.TrafficLayer;
      traffic.setMap(map);

      console.log( " map promise -> ", bike, traffic);

  });

} `

And this is what results:

Screen Shot 2022-02-07 at 9 52 31 AM

escully27 commented 2 years ago

In case anyone stumbles upon this.. I've still been unable to apply the BicycleLayer. Instead, i was able to use JSON google maps styling to set a different color for any 'Trails' on the map. Funny enough, this option is not documented on the popular default Google Maps Styling wizard.

Like this:

{"featureType": "road.local.trail", "elementType": "geometry", "stylers": [ { "color": "#12a3ad"} ]},