Google map💡

See: https://github.com/thinnakrit/editorjs-googlemap
and usage ```yarn add editorjs-googlemap```

1. Create file ```google-map.js```
2. Place code
```javascript
class GoogleMap {
constructor({ data, config }) {
this.data = data
this.wrapper = undefined
this.place = ''
this.config = config || {}
}

static get toolbox() {
return {
title: 'Google Map',
icon: `

`,
}
}

render() {
this.wrapper = document.createElement('div')

if (this.data && this.data.place) {
const iframe = document.createElement('iframe')
this.place = this.data.place
iframe.height = '500'
iframe.src = `https://maps.google.com/maps?q=${this.data.place}&t=&z=13&ie=UTF8&iwloc=&output=embed`
iframe.style =
'width: 100%;border-radius: 10px;border: 1px solid #cccccc;'
this.wrapper.appendChild(iframe)
} else {
const input = document.createElement('input')
const button = document.createElement('button')

this.wrapper.classList.add('google-map-input')
this.wrapper.appendChild(input)
this.wrapper.appendChild(button)
button.innerHTML = this.config.searchValue || ''
input.placeholder = this.config.placeholder || ''
input.value =
this.data && this.data.place ? this.data.place : ''
button.addEventListener('click', (event) => {
this._applyIFrame(input.value)
this.wrapper.removeChild(input)
this.wrapper.removeChild(button)
})
}
return this.wrapper
}

_applyIFrame = (value) => {
const iframe = document.createElement('iframe')
iframe.width = '600'
iframe.height = '500'
iframe.src = `https://maps.google.com/maps?q=${value}&t=&z=13&ie=UTF8&iwloc=&output=embed`
iframe.style =
'width: 100%;border-radius: 10px;border: 1px solid #cccccc;'
this.place = value
this.wrapper.appendChild(iframe)
}

save() {
return {
place: this.place,
}
}
}

export default GoogleMap

```
3. Apply in tools list.
```javascript

googleMap: {
class: GoogleMap,
inlineToolbar: true,
config: {
placeholder:
'Place or lat and long eg: 15.9383,100.293833 ...',
searchValue: 'Search',
},
},
```