I am integrating google maps functionality using vue2-google-maps. I am able to show default marker in my application but when I tried it for custom market it shows nothing on the map.
Following is my code.
<gmap-map
:center="center"
:zoom="17"
style="width:100%; height: 350px;"
>
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:icon="{url:'../assets/markerIcon.png'}"
#click="center=m.position"></gmap-marker>
</gmap-map>
Can anyone solve my problem why I am not able to see custom marker on map?
Try change :icon="{url:'../assets/markerIcon.png'}" to :icon="{url:require('../assets/markerIcon.png')}
Related
I'm having problems in my vuetify project. I tried on the vuetify website and it turns out this problem also occurs. Look at this :
Reference : https://vuetifyjs.com/en/components/autocompletes#autocompletes
My component like this :
<div id="app">
<v-app id="inspire">
<div>
<v-autocomplete
label="Components"
:items="components"
></v-autocomplete>
</div>
</v-app>
</div>
Demo and full code : https://codepen.io/positivethinking639/pen/GRRLXXP?&editable=true&editors=101
You can try it on your mobile version. This makes me unable to do searching
How can I solve this problem?
I checked the docs&examples page for this component. It goes up because there is no enough space on the screen. It works the same in examples on their docs page. It seems to be its native normal behaviour. The css top property for .v-menu__content is recalculated (68px -> 12px) based on the available space. You could override styles for all/mobile dimensions like
.v-menu__content.theme--light.menuable__content__active.v-autocomplete__content {
top: 68px!important;
}
Although I personally wouldn't do that.
I am not able to get the svg xlink:href work as a dynamic property in Nuxtjs(Vue). I am trying to use it like below
<svg class="icon phone-icon">
<use
v-bind="{ 'xlink:href': '../assets/sprite.svg#icon-download' }"
></use>
</svg>
How do I make it work?
Nuxt does not process any string value in any object to check if it is a link or not, Use require to find the public path of your SVG
<svg class="icon phone-icon">
<use
v-bind="{ 'xlink:href': require('../assets/sprite.svg') + '#icon-download' }"
></use>
</svg>
Also, take a look at SVG Sprite Module, this module creates a clean way to work with SVG icons
On NuxtJS 2 I had to do the following:
<svg class="icon">
<use v-bind="{ 'xlink:href': require('~/assets/sprite.svg') + '#icon-download' }"></use>
</svg>
without ~ it did not work.
Hi have the following statement.
<li
v-for="(area, i) in areas"
:key="i"
style="display: flex; justify-content: space-evenly; flex-wrap: wrap;"
>
<v-checkbox
#click="areaClick"
v-model="area.areaChosen"
:id="area.id.toString()"
:label="area.area_description"
color="beige lighten-1"
></v-checkbox>
</li>
It displays as follows:
My problem is that if you click on the checkbox itself (The square) then nothing happens however if you click on the label eg, Atlantic Seaboard then it works correctly.
I would like it to work when I click on the square as well.
Thats why you're using #click handler. According to docs, try #change
You can also use #click.capture this will still allow you to click on both the checkmark and label.
<v-checkbox
#click.capture="areaClick"
v-model="area.areaChosen"
></v-checkbox>
The problem could also be with your version of Vue/Vuetify. When I updated the libraries (Vue.js from 2.6.10 to 2.6.14 and Vuetify from 2.0.17 to 2.6.6), it started working.
On my Vuetify + Lealflet project the map hides all popup dialogs and I don't know why. I use Vue2Leaflet library. I am a beginner with web development. Here is a pic of the problem:
<l-map
:center="center"
:zoom="zoom"
#click.right="mapRclicked"
ref="map"
style="height: 50vh; width: 50vh"
>
The problem is a clash of z-index ranges. Vuetify uses z-index ranges 0-10 while leaflet uses the range 100-1100. Fortunately, the z-index of a child element is relative to the z-index of their parent.
I advice you to give l-map a z-index of 0 like this.
<l-map
:center="center"
:zoom="zoom"
#click.right="mapRclicked"
ref="map"
style="z-index: 0; height: 50vh; width: 50vh"
>
This will automatically bring your component in line with all of Vuetify z-indexes. In contrast, #bgsuello workaround requires that you modify the z-index of every Vuetify component that may conflict with the map, including other dialogs, menus, animations, tabs, toolbars, snackbars...
Edit: This is an outdated answer.
see #Javier answer below as pointed out by #ondrejsv on comment.
It does not work anymore at least in Vuetify 2.1.9 and Vue 2.6.x. The solution by Javier seems to work.
Increase the z-index style property of your dialog.
<v-dialog style="z-index:9999;"
... rest of your code ...
I find it quite practical to wrap the map in an image, like this
<v-img
height="100%"
width="100%">
<l-map>
...
</l-map>
</v-img>
This way there is no need to do anything with the z-index.
I am on Vue2.x + Vuetify + Vue2leaflet.
I tried many things and finally what worked for me was to cover the with a . My code reads as :
<v-lazy>
<v-img>
<l-map>
.... rest of the code
</l-map>
</v-img>
</v-lazy>
This takes inputs on v-lazy from https://medium.com/#elralimi.lamia/leaflet-vuejs-vuetify-map-not-showing-well-in-a-modal-with-grey-parts-9a5d551ea472. v-img was suggested by geomuc in the above response.
Other options that I tried but failed were: this.map.invalidateSize(); , this.map.remove();, this.$nextTick(() => {...}, z-index.
Unfortunately we have to support IE11.
The following is a snippet of Angular from our app:
<nav class="navbar-menu" fxFill>
<span class="fill-it"></span>
<span class="nav-user-wrap" fxFlexAlign="right">
<button class="nav-user" mat-button [matMenuTriggerFor]="usrmenu">{{ userManager.currentDealer?.name }} <mat-icon class="icon-avatar">person</mat-icon><mat-icon class="icon-arrwdwn">keyboard_arrow_down</mat-icon></button>
<mat-menu #usrmenu="matMenu" class="userdd mmdd" xPosition="after" yPosition="below" [overlapTrigger]="false">
<span mat-menu-item [disabled]="true" [disableRipple]="true">{{ userManager.firstName }} {{ userManager.lastName }}</span>
<mat-divider style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
<span mat-menu-item *ngIf="!userManager.isDealerGroupUser" (click)="openSelectDealerGroupDialog()">{{ userManager.dealerGroup?.name }}</span>
<mat-divider *ngIf="!userManager.isDealerGroupUser" style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
<button *ngFor="let dealer of userManager.dealers" (click)="userManager.setCurrentDealer(dealer.id)" mat-menu-item>{{ dealer.name }} <span *ngIf="dealer.id === userManager.defaultDealer?.id">(Default)</span></button>
<mat-divider style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
<!-- <button mat-menu-item>My Account</button>
<button mat-menu-item>Settings</button> -->
<button mat-menu-item (click)="logOut()">Logout</button>
</mat-menu>
</span>
</nav>
Pretty standard drop-down menu, but in IE11 clicking the button gives the following exception:
Unable to get property 'opacity' of undefined or null reference
I'm pulling my hair out trying to work out why.
Does IE11 do some kind of pseudo-script thing in the background to set the CSS or something? No idea.
All help appreciated!
This error is a result of IE11 lacking the Web Animation API, to fix this You have to import the right polyfill as documented in Angular Docs.
import 'web-animations-js'
Angular docs say that you only need the 'web-animations-js' polyfill for IE if you use the AnimationBuilder, but my project doesn't use AnimationBuilder and I get this error message. There's a possibility one of the libraries I'm using does. But I only started getting this error after I upgraded to Angular 8.