JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="googleMap"></div>
CSS
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JavaScript
var geoJson_features = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"id": 70,
"name": "roman coin"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.7318782806396484375,
51.8924376272136740340
]
}
}]
};
function initialize() {
// map properties
var mapProp = {
zoom: 17,
zoomControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
'night_hawk_style'
],
style: google.maps.MapTypeControlStyle.HORIZONTAL,
position: google.maps.ControlPosition.BOTTOM_RIGHT,
backgroundColor: 'none'
}
};
// google map object
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
// load GeoJSON.
google.maps.event.addListenerOnce(map, 'idle', function() {
// load GeoJSON.
map.data.addGeoJson(geoJson_features);
// create empty bounds object
var bounds = new google.maps.LatLngBounds();
// loop through features
map.data.forEach(function(feature) {
// get the features geometry
var geo = feature.getGeometry();
// loop through each coordinate
geo.forEachLatLng(function(LatLng) {
bounds.extend(LatLng);
});
});
// fit data to bounds
map.fitBounds(bounds);
});
const icon = {
// set svg icon svg
url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/480px-Instagram_icon.png',
// this marker is 14 pixels wide by 12 pixels high.
size: new google.maps.Size(14, 12),
// the origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base (0, 12).
anchor: new google.maps.Point(0, 12)
}
var marker = new google.maps.Marker({
position:...