Skip to content

Instantly share code, notes, and snippets.

@memon07
Created May 24, 2019 05:14
Show Gist options
  • Save memon07/47b757c49d9e62abaa63b284c93eeab2 to your computer and use it in GitHub Desktop.
Save memon07/47b757c49d9e62abaa63b284c93eeab2 to your computer and use it in GitHub Desktop.
Google Map in React without any external library
import React , { Component } from 'react'
class Map extends Component {
componentDidMount () {
this.renderMap()
}
renderMap = () => {
loadScript('https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap')
window.initMap = this.initMap
}
initMap = () => {
var map = new window.google.maps.Map(document.getElementById('map'), {
center: {lat: 19.115492, lng: 72.872696},
zoom: 15
});
var marker = new window.google.maps.Marker({
position: {lat: 19.115492 , lng: 72.872696},
map: map,
title: 'loc'
})
}
render() {
return(
<>
<div id="map" style={{height:500,width:500}}>
</div>
</>
)
}
}
function loadScript(url){
var index = window.document.getElementsByTagName('script')[0]
var script = window.document.createElement('script')
script.src = url
script.async = true
script.defer = true
index.parentNode.insertBefore(script, index)
}
export default Map
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment