JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>
CSS
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
JavaScript
var infowindow = new google.maps.InfoWindow();
function gotoFeature(featureNum) {
var feature = map.data.getFeatureById(features[featureNum].getId());
if ( !! feature) google.maps.event.trigger(feature, 'click');
else alert('feature not found!');
}
function initialize() {
// Create a simple map.
features = [];
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
center: {
lat: 29.5,
lng: -95.8
}
});
google.maps.event.addListener(map, 'click', function () {
infowindow.close();
});
map.data.setStyle({
fillOpacity: 0.8
});
// Load a GeoJSON from the same server as our demo.
var featureId = 0;
google.maps.event.addListener(map.data, 'addfeature', function (e) {
if (e.feature.getGeometry().getType() === 'Point') {
map.setCenter(e.feature.getGeometry().get());
}
});
// When the user clicks, set change the feature.
map.data.addListener('click', function (event) {
if (event.feature.getGeometry().getType() === 'Point') {
infowindow.setContent(event.feature.getProperty('name') + "<br>" + event.feature.getGeometry().get().toUrlValue(6));
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -34)
});
infowindow.setPosition(event.feature.getGeometry().get());
infowindow.open(map);
}
});
map.data.addGeoJson(data);
var featureStyle = {
strokeColor: '#ff3333',
strokeWeight: 4
}
map.data.setStyle(featureStyle);
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-95.499287099037943, 29.633775903201652],
[-95.510219429084501,...