xkjyeah / vue-google-maps

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

Custom Tiles? #389

Open plunkettscott opened 6 years ago

plunkettscott commented 6 years ago

Hello,

Is it possible to use custom map tiles with this? Not sure if it's something that is implemented or if I need to access the map object and use the setMapTile().

Scott

dnl13 commented 6 years ago

not shure if this is the prefered way of doing it, but for me it works

 mounted(){
    this.$nextTick(() => {
        this.$refs.map.$mapPromise.then((map) => {
            var TILE_URL = 'http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg';
            var layerID = 'my_custom_layer';
            var layer = new google.maps.ImageMapType({
                name: layerID,
                getTileUrl: function(coord, zoom) {
                    var url = TILE_URL
                        .replace('{x}', coord.x)
                        .replace('{y}', coord.y)
                        .replace('{z}', zoom);
                    return url;
                },
                tileSize: new google.maps.Size(256, 256),
                minZoom: 1,
                maxZoom: 20
            });
            map.mapTypes.set(layerID, layer);
            map.setMapTypeId(layerID);
      })
   })
},  

don't forget to add ref="map" to your gmap component

hubertokf commented 5 years ago

Thank you! But i'm trying to use that code and when the map load, it try to load tiles that i dont have. Could you help me on that question?