Hi Everyone! I creating a website, and want to add a google map component from scratch. I dont want to use a package manager… I am using google map style wizard, and it gave me a style.json file. In vue.js/nuxt, I am not sure how to implement the json file or api key… Should i put the api key in the nuxtconfig file or in the component page it self?
Here is code from google wizard plus some modications someone else made to add markers:
function initMap() {
const styledMapType = new google.maps.StyledMapType(
[
{
'elementType': 'geometry',
'stylers': [
{
'color': '#f5f5f5'
}
]
},
{
'elementType': 'labels.icon',
'stylers': [
{
'visibility': 'off'
}
]
},
{
'elementType': 'labels.text.fill',
'stylers': [
{
'color': '#616161'
}
]
},
{
'elementType': 'labels.text.stroke',
'stylers': [
{
'color': '#f5f5f5'
}
]
},
{
'featureType': 'administrative.land_parcel',
'elementType': 'labels.text.fill',
'stylers': [
{
'color': '#bdbdbd'
}
]
},
{
'featureType': 'poi',
'elementType': 'geometry',
'stylers': [
{
'color': '#eeeeee'
}
]
},
{
'featureType': 'poi',
'elementType': 'labels.text.fill',
'stylers': [
{
'color': '#757575'
}
]
},
{
'featureType': 'poi.park',
'elementType': 'geometry',
'stylers': [
{
'color': '#e5e5e5'
}
]
},
{
'featureType': 'poi.park',
'elementType': 'labels.text.fill',
'stylers': [
{
'color': '#9e9e9e'
}
]
},
{
'featureType': 'road',
'elementType': 'geometry',
'stylers': [
{
'color': '#ffffff'
}
]
},
{
'featureType': 'road.arterial',
'elementType': 'labels.text.fill',
'stylers': [
{
'color': '#757575'
}
]
},
{
'featureType': 'road.highway',
'elementType': 'geometry',
'stylers': [
{
'color': '#dadada'
}
]
},
{
'featureType': 'road.highway',
'elementType': 'labels.text.fill',
'stylers': [
{
'color': '#616161'
}
]
},
{
'featureType': 'road.local',
'elementType': 'labels.text.fill',
'stylers': [
{
'color': '#9e9e9e'
}
]
},
{
'featureType': 'transit.line',
'elementType': 'geometry',
'stylers': [
{
'color': '#e5e5e5'
}
]
},
{
'featureType': 'transit.station',
'elementType': 'geometry',
'stylers': [
{
'color': '#eeeeee'
}
]
},
{
'featureType': 'water',
'elementType': 'geometry',
'stylers': [
{
'color': '#c9c9c9'
}
]
},
{
'featureType': 'water',
'elementType': 'labels.text.fill',
'stylers': [
{
'color': '#9e9e9e'
}
]
}
],
{ name: 'Styled Map' });
const location = { lat: 34.164900, lng: -118.374825 };
// Create a map object, and include the MapTypeId to add
// to the map type control.
const map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 17,
icon: true,
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map']
}
});
const marker = new google.maps.Marker({
position: location,
map: map
});
// Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
I guess my main questions is where does this code go??? I am guessing it would go into scripts section of the map component I am trying to make… which I did add, but I get a run of error messages… as well…