Skip to content

Commit 8016c49

Browse files
jtommyjtommy
committed
Fix gmap component
1 parent 5a669db commit 8016c49

File tree

3 files changed

+81
-68
lines changed

3 files changed

+81
-68
lines changed

‎index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@
44
<meta charset="utf-8">
55
<title>PrimeVue</title>
66
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onLoad=initRecaptcha" async defer></script>
7-
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyC6PJpwFDc-annYsqjIXy5VSSeRR9wa4qo"></script>
7+
<!--
8+
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyC6PJpwFDc-annYsqjIXy5VSSeRR9wa4qo" async defer></script>
9+
-->
10+
<script type="text/javascript" src="https://maps.google.com/maps/api/js" async defer></script>
811
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
912
</head>
1013
<body>

‎showcase/src/components/gmap/gmapdemo.vue‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,26 @@
1616

1717
<p-growl :value="msgs"></p-growl>
1818

19-
<p-gmap ref="gmap" :style="{'width':'100%','height':'320px'}" :options="options" :overlays="overlays"
20-
@onMapClick="handleMapClick($event)" @onOverlayClick="handleOverlayClick($event)" @onOverlayDragEnd="handleDragEnd($event)"></p-gmap>
21-
<p-button type="button" label="Clear" icon="fa-close" @click="clear()" style="margin-top:10px"></p-button>
22-
<p-button type="button" label="Zoom In" icon="fa-search-plus" @click="zoomIn(gmap.getMap())" style="margin-top:10px"></p-button>
23-
<p-button type="button" label="Zoom Out" icon="fa-search-minus" @click="zoomOut(gmap.getMap())" style="margin-top:10px"></p-button>
19+
<p-gmap ref="gmap"
20+
:style="{'width':'100%','min-height':'320px'}"
21+
:options="options"
22+
:overlays="overlays"
23+
@click="handleMapClick"
24+
@overlayclick="handleOverlayClick"
25+
@overlaydragend="handleDragEnd">
26+
</p-gmap>
27+
<p-button type="button" label="Clear" icon="fa-close"
28+
@click="clear()" style="margin-top:10px"></p-button>
29+
<p-button type="button" label="Zoom In" icon="fa-search-plus"
30+
@click="zoomIn($refs.gmap.getMap())" style="margin-top:10px"></p-button>
31+
<p-button type="button" label="Zoom Out" icon="fa-search-minus"
32+
@click="zoomOut($refs.gmap.getMap())" style="margin-top:10px"></p-button>
2433

2534
</div>
2635
</div>
2736
</template>
2837
<script>
38+
const google = window.google;
2939
export default {
3040
name: 'gmapdemo',
3141
data () {
@@ -44,34 +54,44 @@
4454
handleMapClick (event) {
4555
this.dialogVisible = true;
4656
this.selectedPosition = event.latLng;
57+
alert(event.latLng);
4758
},
4859
handleOverlayClick (event) {
49-
this.msgs = [];
50-
let isMarker = event.overlay.getTitle != undefined;
60+
// this.msgs = [];
61+
let isMarker = typeof event.overlay.getTitle !== 'undefined';
5162
if(isMarker) {
5263
let title = event.overlay.getTitle();
5364
this.infoWindow.setContent('' + title + '');
5465
this.infoWindow.open(event.map, event.overlay);
5566
event.map.setCenter(event.overlay.getPosition());
56-
this.msgs.push({severity:'info', summary:'Marker Selected', detail: title});
67+
// this.msgs.push({severity:'info', summary:'Marker Selected', detail: title});
5768
} else {
58-
this.msgs.push({severity:'info', summary:'Shape Selected', detail: ''});
69+
// this.msgs.push({severity:'info', summary:'Shape Selected', detail: ''});
5970
}
6071
},
6172
addMarker () {
62-
this.overlays.push(new google.maps.Marker({position:{lat: this.selectedPosition.lat(), lng: this.selectedPosition.lng()}, title:this.markerTitle, draggable: this.draggable}));
73+
this.overlays.push(new google.maps.Marker({
74+
position: {
75+
lat: this.selectedPosition.lat(),
76+
lng: this.selectedPosition.lng()
77+
},
78+
title: this.markerTitle,
79+
draggable: this.draggable
80+
}));
6381
this.markerTitle = null;
6482
this.dialogVisible = false;
6583
},
6684
handleDragEnd (event) {
67-
this.msgs = [];
68-
this.msgs.push({severity:'info', summary:'Marker Dragged', detail: event.overlay.getTitle()});
85+
let title = event.overlay.getTitle();
86+
alert('Dragged: ' + title);
87+
// this.msgs = [];
88+
// this.msgs.push({severity:'info', summary:'Marker Dragged', detail: event.overlay.getTitle()});
6989
},
7090
initOverlays () {
7191
if (!this.overlays || !this.overlays.length) {
7292
this.overlays = [
73-
new google.maps.Marker({position: {lat: 14.6188043, lng: 79.9630253}, title: 'Talamanchi'}),
74-
new google.maps.Marker({position: {lat: 14.4290442, lng: 79.9456852}, title: 'Nellore'}),
93+
new google.maps.Marker({position: {lat: 14.6188043, lng: 79.9630253}, title: 'Talamanchi', draggable: true }),
94+
new google.maps.Marker({position: {lat: 14.4290442, lng: 79.9456852}, title: 'Nellore', draggable: true }),
7595
new google.maps.Polygon({paths: [
7696
{lat: 14.1413809, lng: 79.8254154}, {lat: 11.1513809, lng: 78.8354154},
7797
{lat: 15.1313809, lng: 78.8254154}, {lat: 15.1613809, lng: 79.8854154}
@@ -85,10 +105,10 @@
85105
}
86106
},
87107
zoomIn (map) {
88-
map.setZoom(map.getZoom()+1);
108+
map.setZoom(map.getZoom() + 1);
89109
},
90110
zoomOut (map) {
91-
map.setZoom(map.getZoom()-1);
111+
map.setZoom(map.getZoom() - 1);
92112
},
93113
clear () {
94114
this.overlays = [];

‎src/components/gmap/gmap.vue‎

Lines changed: 41 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div ref="gmap" :style="gmapStyle" :class="gmapStyleClass"></div>
2+
<div ref="gmap"></div>
33
</template>
44
<script>
5-
var google;
5+
const google = window.google;
66
export default {
77
name: 'p-gmap',
8-
data: function () {
8+
data () {
99
return {
1010
map: null
1111
};
@@ -18,20 +18,26 @@
1818
overlays: {
1919
type: Array,
2020
default: null
21-
},
22-
gmapStyle: {
23-
type: String,
24-
default: null
25-
},
26-
gmapStyleClass: {
27-
type: String,
28-
default: null
21+
}
22+
},
23+
watch: {
24+
overlays (newValue, oldValue) {
25+
if (this.map !== null) {
26+
for (let overlay of oldValue) {
27+
overlay.setMap(null);
28+
}
29+
for (let overlay of this.overlays) {
30+
overlay.setMap(this.map);
31+
this.bindOverlayEvents(overlay);
32+
}
33+
}
2934
}
3035
},
3136
methods: {
3237
initialize () {
3338
this.map = new google.maps.Map(this.$refs.gmap, this.options);
34-
this.$emit('onMapReady', {
39+
40+
this.$emit('ready', {
3541
map: this.map
3642
});
3743
@@ -43,31 +49,23 @@
4349
}
4450
4551
this.map.addListener('click', (event) => {
46-
this.zone.run(() => {
47-
this.$emit('onMapClick', event);
48-
});
52+
this.$emit('click', event);
4953
});
5054
5155
this.map.addListener('dragend', (event) => {
52-
this.zone.run(() => {
53-
this.$emit('onMapDragEnd', event);
54-
});
56+
this.$emit('dragend', event);
5557
});
5658
5759
this.map.addListener('zoom_changed', (event) => {
58-
this.zone.run(() => {
59-
this.$emit('onZoomChanged', event);
60-
});
60+
this.$emit('zoomchanged', event);
6161
});
6262
},
6363
bindOverlayEvents (overlay) {
6464
overlay.addListener('click', (event) => {
65-
this.zone.run(() => {
66-
this.$emit('onOverlayClick', {
67-
originalEvent: event,
68-
'overlay': overlay,
69-
map: this.map
70-
});
65+
this.$emit('overlayclick', {
66+
originalEvent: event,
67+
overlay: overlay,
68+
map: this.map
7169
});
7270
});
7371
@@ -77,47 +75,39 @@
7775
},
7876
bindDragEvents (overlay) {
7977
overlay.addListener('dragstart', (event) => {
80-
this.zone.run(() => {
81-
this.$emit('onOverlayDragStart', {
82-
originalEvent: event,
83-
overlay: overlay,
84-
map: this.map
85-
});
78+
this.$emit('overlaydragstart', {
79+
originalEvent: event,
80+
overlay: overlay,
81+
map: this.map
8682
});
8783
});
8884
8985
overlay.addListener('drag', (event) => {
90-
this.zone.run(() => {
91-
this.$emit('onOverlayDrag', {
92-
originalEvent: event,
93-
overlay: overlay,
94-
map: this.map
95-
});
86+
this.$emit('overlaydrag', {
87+
originalEvent: event,
88+
overlay: overlay,
89+
map: this.map
9690
});
9791
});
9892
9993
overlay.addListener('dragend', (event) => {
100-
this.zone.run(() => {
101-
this.$emit('onOverlayDragEnd', {
102-
originalEvent: event,
103-
overlay: overlay,
104-
map: this.map
105-
});
94+
this.$emit('overlaydragend', {
95+
originalEvent: event,
96+
overlay: overlay,
97+
map: this.map
10698
});
10799
});
108100
},
109101
getMap () {
110102
return this.map;
111103
}
112104
},
113-
watch: {
114-
115-
},
116-
updated () {
105+
mounted () {
117106
if (!this.map && this.$refs.gmap.offsetParent) {
118-
this.initialize();
107+
this.$nextTick(() => {
108+
this.initialize();
109+
});
119110
}
120111
}
121-
122112
};
123113
</script>

0 commit comments

Comments
 (0)