Using current Google Maps JS API (v3), and I’m trying to add polygon shapes to a map.
Problem: When adding a shape, it exists but is not visible. I know the shape exists because I see the mouse cursor change when hovering where the shape should be. The shape does become instantly visible as soon as I drag it. It becomes invisible again if I change the map zoom level.
Another interesting thing, when adding multiple shapes (by clicking a “Load” button multiple times in my demo), after the first instance (which is invisible), adding subsequent shapes makes them all visible. However, when changing map zoom, they all return to an invisible state (but still exist, and are draggeable).
Goal: To have visible shapes on the map at all times, unless I explicitly hide/delete them on my own accord.
Demo:
https://codepen.io/MarsAndBack/pen/rNgjKwm
Ignore the Google Map warning “This page can’t load Google Maps correctly.”; everything works enough for this demo.
Button "Load basic polygon" pans to the Bermuda triangle and adds a basic GM polygon
.
Button "Load geojson polygon" pans to New Mexico, and adds an arbitrary GeoJSON polygon just above Blue Creek OHV Area.
var map = new google.maps.Map(document.getElementById("map1"), {
mapId: 'DEMO_MAP_ID',
center: { lat: 24.3366734, lng: -75.2085759 },
zoom: 5.25,
gestureHandling: 'greedy'
})
const btn1 = document.getElementById("btn1")
const btn2 = document.getElementById("btn2")
btn1.addEventListener("click", () => loadPolygon_Basic())
btn2.addEventListener("click", () => loadPolygon_GeoJSON())
function loadPolygon_Basic() {
const shape_basic = new google.maps.Polygon({
paths: [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
{ lat: 25.774, lng: -80.19 }
],
strokeColor: "red",
strokeOpacity: 1,
strokeWeight: 2,
fillColor: "lime",
fillOpacity: 1,
visible: true,
clickable: true,
draggable: true,
})
map.setCenter({ lat: 24.3366734, lng: -75.2085759 })
map.setZoom(5.25)
shape_basic.setMap(map)
}
function loadPolygon_GeoJSON() {
const shape_geojson = {
"type":"Feature",
"geometry":{
"type":"Polygon",
"coordinates":[[[-101.69092517560932,35.760800520027736],[-101.69195514387104,35.73391165725278],[-101.6404567307851,35.73377231306736],[-101.64406161970112,35.764004286494796],[-101.69092517560932,35.760800520027736]]]
},
"properties":{}
}
map.setCenter({ lat: 35.7697449, lng: -101.6806657 })
map.setZoom(12)
map.data.addGeoJson(shape_geojson)
map.data.setStyle({
fillColor: "green",
strokeWeight: 1,
clickable: true,
draggable: true,
})
}html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
header {
display: flex;
align-items: center;
gap: 4em;
padding: 1em;
}
header div {
}
button {
font-size: 1rem;
padding: 0.5rem;
}
#map1 {
flex: 1;
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAR8ubrq24oKLzNQathKEL02qJ_4gXqnI"></script>
<header>
<h1>Google Maps<br />polygon test</h1>
<div>
<div>Bermuda triangle</div>
<button id="btn1">Load basic polygon</button>
</div>
<div>
<div>New Mexico; arbitrary</div>
<button id="btn2">Load geojson polygon</button>
</div>
</header>
<div id="map1"></div>