google.maps.SymbolPath.CIRCLE triggers a "google is not defined" for the gmap-marker from GmapVue (https://github.com/diegoazh/gmap-vue). GmapCluster however contains the same value "google.maps.SymbolPath.CIRCLE" but triggers no error.
What can I do to resolve this error or display a circle with an icon init at the GmapVue maps (as this link displays:https://i.stack.imgur.com/837q5.jpg)
My code:
<template>
<div id="map-container" class="fullwidth-home-map">
<gmap-map :center="centerLatLng" :zoom="2" map-type-id="roadmap" scrollwheel="false" style="height: 620px" >
<GmapCluster :zoomOnClick="true" :options="clusterOptions()" >
<gmap-marker v-for="(marker, index) in markers" :key="marker.title" :position="marker.position" :icon="marker.icon" :label="marker.label" :clickable="true" :draggable="false" @click="openInfoWindow(marker)">
<gmap-info-window :opened="marker.infoWindowStatus" @closeclick="marker.infoWindowStatus=false">
<div class="infoBox">
<div class="map-box">
<a class="listing-img-container">
<img :src="marker.image" alt="">
<div class="listing-item-content">
<h3>{{marker.title}}</h3>
<span><small>{{marker.address}}</small></span>
</div>
</a>
</div>
</div>
</gmap-info-window>
</gmap-marker>
</GmapCluster>
</gmap-map>
</div>
</template>
<script>
import GmapVue from '~/node_modules/gmap-vue'
import { components } from "gmap-vue";
export default {
components: {
"gmap-cluster": components.Cluster,
},
data(){
return{
clusterOptions() {
return {
renderer: {
render: ({ count, position }) => new google.maps.Marker({
label: { text: String(count), color: 'white', fontSize: '10px' },
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "black",
fillOpacity: 1,
strokeWeight: 2,
strokeColor: '#5e72e4',
scale: 20,
},
title: `Cluster of ${count} kitespots`,
position,
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
}),
},
};
},
centerLatLng: {
lat : 19.716775,
lng : -18.997580
},
markers :[
{
position: {
lat: -33.829639905483326,
lng: 18.480477471603713,
},
icon: {
path: google.maps.SymbolPath.CIRCLE, // This causes the ReferenceError: "google is not defined"
fillColor: "white",
fillOpacity: 1,
strokeWeight: 2,
strokeColor: '#5e72e4',
scale: 21,
},
label: {
text: '\ue50d', // codepoint from https://fonts.google.com/icons
fontFamily: 'Material Icons',
color: '#5e72e4',
fontSize: '20px',
},
title : 'Dolphin Beach',
address : 'Bishop Avenue, New York',
image : require('~/static/images/most-img-2.jpg'),
infoWindowStatus : false
},
{
position: {
lat: 52.37549882361904,
lng: 4.831091990818706,
},
icon:{
url:require('~/static/images/kitesurfmarker.svg'),},
title : 'Tom Restaurant',
address : '964 School Street, New York',
image : require('~/static/images/most-img-1.jpg'),
infoWindowStatus : false
},
]
}
},
methods: {
openInfoWindow(marker){
marker.infoWindowStatus = true;
}
}
};
</script>
