Google maps as background for SVG map
Google maps as background for SVG map
In the previous article, I showed a simple example of creating svg card and I want to continue this topic.
Why do we still need Google maps and why not use a picture instead of extra scripts?
Imagine that we want to show USA with a beautiful background of the oceans and neighboring continents.All we need are just find a picture, set as background and done. It seems that everything is beautiful and we do not need Google maps, but there is a big BUT, there is responsive layout, and here there is a problem with scaling the background, Google map will help to rid off this problem.
Let's start our work by creating a universal Google maps component that can be used not only for background purposes.
What is the Google Maps API and how to access the API?
The Google Maps API is a very cool and convenient thing that is easy to use and understand, it’s a geolocation service. Using this service, we can display the map and places on the map. You can get the API key on the here. After receiving the key, add the google maps API connection script to the main file of our project.
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR API KEY]»></script>
[YOUR API KEY]
- must be replaced by your Google Maps API key which will give you access to the global google object that we use to create the map.
BaseGoogleMap Component
props: {
locations: [Array, Object],
address: String,
zoom: {
default: 11,
type: Number,
},
markerPosition: Object,
label: String,
markerImg: String,
disableDefaultUI: {
default: false,
type: Boolean,
},
mapCenter: Object,
customStyled: Array,
customControl: Object,
},
There are the basic props necessary for us, everything you need is with a description on the site. Most of them are understandable without a description, but such as disableDefaultUI, customControl and customStyled - I will describe below.
- disableDefaultUI - allows you to completely disable the default user interface API settings. This property disables any automatic user interface behavior in the JavaScript Maps API.
- customControl - we need it to disable zoom and the ability to move the map.
- customStyled - is another important props that will allow you to add custom styles for the map, as an example, change the type of map, hide the names of cities and all other signs.
The next step is our basic methods for initializing the map
methods: {
createMap() {
this.map = new this.googleMapClass.maps.Map(this.$el, {
disableDefaultUI: this.disableDefaultUI,
center: this.mapCenter,
...this.customControl,
});
},
initGeocoder() {
const geocoder = new this.googleMapClass.maps.Geocoder();
geocoder.geocode({ address: this.address }, (results, status) => {
if (status !== 'OK' || !results[0]) {
throw new Error(status);
}
this.map.setZoom(this.zoom);
if (this.customStyled) this.map.set('styles', this.customStyled);
});
},
initLocations() {
if (this.locations) {
this.locations
.map((location) => {
const marker = new this.googleMapClass.maps.Marker({
...location, label: this.label, map: this.map, icon: this.markerImg,
});
marker.setPosition(this.markerPosition);
return marker;
});
}
},
initMap() {
this.createMap();
this.initGeocoder();
this.initLocations();
},
},
There is no sense in describing all of them : everything is already clear. Only the initMap()
method in which we put all the functions together is needed to initialize the map on the site that needs to be run on mounted.
Svg Map and BaseGoogleMap components together.
<template lang="pug">
.page
.header-map-bg
BaseGoogleMap(
:address="mapOptions.address",
:mapCenter="mapOptions.position",
:zoom="mapOptions.zoom",
disableDefaultUI,
:customStyled="mapOptions.mapStyle"
:customControl="mapOptions.control"
)
.map-wrap
SvgMap
</template>
<script>
import BaseGoogleMap from 'Components/V/VGoogleMap';
import SvgMap from 'Components/SvgMap/SvgMap';
export default {
name: 'Page',
components: {
SvgMap,
BaseGoogleMap,
},
computed: {
mapOptions() {
return {
address: 'USA',
position: {
lat: 43.0061518,
lng: -95.8483994,
},
zoom: 4.61,
mapStyle: [
{
featureType: 'all',
elementType: 'labels',
stylers: [
{ visibility: 'off' },
],
},
{
featureType: 'road',
stylers: [
{ visibility: 'off' },
],
},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [
{ visibility: 'off' },
],
},
],
control: {
zoomControl: false,
gestureHandling: 'none',
},
};
},
},
};
</script>
The main properties of mapOptions are mapStyle, position and control.
- position - for this example, I took Google maps to center the coordinates;
- mapStyle - is an important point to turn off the names of cities, roads, and the entire state markup;
- control - to disable the ability to zoom in or out the map.
And the last important point for the background map is the styles.
.header-map-bg
width: 100%
height: 100%
position: absolute
left: 0
top: 0
z-index: 2
opacity: 0.4
pointer-events: none
Result
Summary
The main goal of the example is to show a simple and effective way to combine a svg card and a scalable background. Perhaps this is not the easiest example, and a lot of people can simply use the picture as a background, but if you think about responsive layout then do not try to not beat the picture with large screens. Ultimately, the map will look perfect at any scale.
How to set up Ethereum private network
It seems like the internet has tons of articles on how to set up your own Ethereum private network, but to do this I walked through several problems and decided to write down the full article which includes problems I faced and solutions.
Cost Control is not about saving money
Let’s say you want to make a fintech project and you are looking for engineers. How many do you need to hire to deliver when the market needs it? Should they all be senior developers with fintech experience or just one is enough? How to work with the best
3 Things That Helped Me Get Into Web Design World
Today many people are looking for a job in IT, and many are curious about its design side in particular. For some reason, it is considered that Quality Assurance and Web design are the easiest ways to become a part of the IT-world for different professionals from other occupations.