I have a map that will contain a group of colored polygons. There are times I want to change the fill color of each poly from whatever it is to transparent. I have the following code:
polys[x].setOptions({
fillColor: "#FFFFFF",
fillOpacity: .01, //This changes throughout the program
strokeColor: '#000000',
});
How can I set the fillColor to transparent? Is there a specific hex value?
The google.maps.PolygonOptions.fillColor is just that, a color, there is no "transparent" color, that is an Opacity value (0.0 is fully transparent, 1.0 if fully opaque).
fillColor | string | The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacity | number | The fill opacity between 0.0 and 1.0
Update: 0.0 seems to work now for transparent Polygons (jsfiddle)
if (window.attachEvent) {
window.attachEvent('onload', initMap);
} else if (window.addEventListener) {
window.addEventListener('load', initMap, false);
} else {
document.addEventListener('load', initMap, false);
}
function initMap() {
var latlng = new google.maps.LatLng(51.5001524, -0.1262362);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Westminster, London, UK'
});
var boundCoords = [
new google.maps.LatLng(51.3493528, -0.378358),
new google.maps.LatLng(51.7040647, 0.1502295),
new google.maps.LatLng(51.5001524, -0.1262362)
];
var boundCoords2 = [
new google.maps.LatLng(51.3493528, -0.378358),
new google.maps.LatLng(51.7040647, 0.1502295),
new google.maps.LatLng(51.6001524, -0.1262362)
];
var poly = new google.maps.Polygon({
paths: boundCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
poly.setMap(map);
console.log(poly);
var poly2 = new google.maps.Polygon({
paths: boundCoords2,
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.0
});
poly2.setMap(map);
console.log(poly);
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
Related
I am new to Google Maps and I need to receive an alert when the marker moves outside the circles, I have already created the map and added some circles to represent the areas in which the marker can stay, outside of them I need to show a alert announcing that this is not a coverage area.
My code is the following:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places&v=weekly" defer></script>
<script type="text/javascript">
const citymap = {
escalon: {
center: { lat: 13.701984532461921, lng: -89.23395010808454 },
},
};
const citymap1 = {
matriz: {
center: { lat: 13.699526, lng: -89.196691 },
},
};
const citymap2 = {
plaza: {
center: { lat: 13.699581, lng: -89.189770 },
},
};
const citymap3 = {
ahuachapan: {
center: { lat: 13.920266, lng: -89.847658 },
},
};
const citymap4 = {
sanMiguel: {
center: { lat: 13.484937, lng: -88.177339 },
},
};
const citymap5 = {
santaAna: {
center: { lat: 13.993704, lng: -89.556913 },
},
};
const citymap6 = {
sonsonate: {
center: { lat: 13.720177, lng: -89.727801 },
},
};
function initialize() {
// Creating map object
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: new google.maps.LatLng(13.701277, -89.224468),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var vMarker = new google.maps.Marker({
position: new google.maps.LatLng(13.701277, -89.224468),
draggable: true
});
google.maps.event.addListener(vMarker, 'dragend', function (evt) {
$("#txtLat").val("https://www.google.es/maps/dir/" + evt.latLng.lat().toFixed(6) + ", " + evt.latLng.lng().toFixed(6));
map.panTo(evt.latLng);
});
for (const city in citymap) {
// Add the circle for this city to the map.
const vMarker = new google.maps.Marker({
position: new google.maps.LatLng(13.701277, -89.224468),
draggable: true
});
}
for (const city in citymap) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap[city].center,
radius: 8000,
});
}
for (const city in citymap1) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap1[city].center,
radius: 5000,
});
}
for (const city in citymap2) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap2[city].center,
radius: 5000,
});
}
for (const city in citymap3) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap3[city].center,
radius: 7000,
});
}
for (const city in citymap4) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap4[city].center,
radius: 7000,
});
}
for (const city in citymap5) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap5[city].center,
radius: 7000,
});
}
for (const city in citymap6) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap6[city].center,
radius: 7000,
});
}
// centers the map on markers coords
map.setCenter(vMarker.position);
// adds the marker on the map
vMarker.setMap(map);
}
</script>
</head>
<body onload="initialize();">
<div id='map_canvas' style='width: auto; height: 500px;'></div>
</body>
</html>
I have left you this example code in order to have a broader panorama of my problem, because precisely what I am trying to do is a type of home delivery and the areas in blue marked on the map are the areas in which If there is coverage of my home delivery, but if the marker is located outside of them, or if the client moves them outside of them, I need the alert to be displayed to warn that it cannot be, I appreciate all the support, greetings.
You can do this by getting the bounds getBounds() of the circle and check if the location of the marker is within those bounds like so:
function init() {
var
contentCenter = '<span class="infowin">Center Marker (draggable)</span>',
contentA = '<span class="infowin">Marker A (draggable)</span>',
contentB = '<span class="infowin">Marker B (draggable)</span>';
var
latLngCenter = new google.maps.LatLng(37.081476, -94.510574),
latLngCMarker = new google.maps.LatLng(37.0814, -94.5105),
latLngA = new google.maps.LatLng(37.2, -94.1),
latLngB = new google.maps.LatLng(38, -93),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: latLngCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}),
markerCenter = new google.maps.Marker({
position: latLngCMarker,
title: 'Location',
map: map,
draggable: true
}),
infoCenter = new google.maps.InfoWindow({
content: contentCenter
}),
markerA = new google.maps.Marker({
position: latLngA,
title: 'Location',
map: map,
draggable: true
}),
infoA = new google.maps.InfoWindow({
content: contentA
}),
markerB = new google.maps.Marker({
position: latLngB,
title: 'Location',
map: map,
draggable: true
}),
infoB = new google.maps.InfoWindow({
content: contentB
})
// exemplary setup:
// Assumes that your map is signed to the var "map"
// Also assumes that your marker is named "marker"
,
circle = new google.maps.Circle({
map: map,
clickable: false,
// metres
radius: 100000,
fillColor: '#fff',
fillOpacity: .6,
strokeColor: '#313131',
strokeOpacity: .4,
strokeWeight: .8
});
// attach circle to marker
circle.bindTo('center', markerCenter, 'position');
var
// get the Bounds of the circle
bounds = circle.getBounds()
// Note spans
,
noteA = jQuery('.bool#a'),
noteB = jQuery('.bool#b');
noteA.text(bounds.contains(latLngA));
noteB.text(bounds.contains(latLngB));
// get some latLng object and Question if it's contained in the circle:
google.maps.event.addListener(markerCenter, 'dragend', function() {
latLngCenter = new google.maps.LatLng(markerCenter.position.lat(), markerCenter.position.lng());
bounds = circle.getBounds();
noteA.text(bounds.contains(latLngA));
noteB.text(bounds.contains(latLngB));
});
google.maps.event.addListener(markerA, 'dragend', function() {
latLngA = new google.maps.LatLng(markerA.position.lat(), markerA.position.lng());
noteA.text(bounds.contains(latLngA));
});
google.maps.event.addListener(markerB, 'dragend', function() {
latLngB = new google.maps.LatLng(markerB.position.lat(), markerB.position.lng());
noteB.text(bounds.contains(latLngB));
});
google.maps.event.addListener(markerCenter, 'click', function() {
infoCenter.open(map, markerCenter);
});
google.maps.event.addListener(markerA, 'click', function() {
infoA.open(map, markerA);
});
google.maps.event.addListener(markerB, 'click', function() {
infoB.open(map, markerB);
});
google.maps.event.addListener(markerCenter, 'drag', function() {
infoCenter.close();
noteA.html("draggin…");
noteB.html("draggin…");
});
google.maps.event.addListener(markerA, 'drag', function() {
infoA.close();
noteA.html("draggin…");
});
google.maps.event.addListener(markerB, 'drag', function() {
infoB.close();
noteB.html("draggin…");
});
};
body {
margin: 0;
padding: 0
}
html,
body,
#map {
height: 100%;
font-family: Arial, sans-serif;
font-size: .9em;
color: #fff;
}
#note {
text-align: center;
padding: .3em; 10px;
background: #009ee0;
}
.bool {
font-style: italic;
color: #313131;
}
.info {
display: inline-block;
width: 40%;
text-align: center;
}
.infowin {
color: #313131;
}
#title,
.bool{
font-weight: bold;
}
<div id="note">
<span id="title">»Inside the circle?«</span>
<hr />
<span class="info">Marker <strong>A</strong>:
<span id="a" class="bool"></span>
</span> ←♦→
<span class="info">Marker <strong>B</strong>:
<span id="b" class="bool"></span>
</span>
</div>
<div id="map">test</div>
<script src="https://maps.googleapis.com/maps/api/js?callback=init&libraries=&v=weekly&key=YOUR_API_KEY" async></script>
I have this Encoded path encodedPath which equally oyky#e}|kGpv#kzE, then i tried to decode it using decodePath like this:
decodeString = google.maps.geometry.encoding.decodePath(encodeString);
here is when i console log it `console.log(decodeString);
but when I alert it, this is the exact data:
(9.5684, 44.062430000000006),(9.559510000000001, 44.097530000000006)
So, my question is, Is this data convertable to path again and draw polyline with it ?
because when I tried to draw a polyline like this:
var path = [
(9.5684, 44.062430000000006),
(9.559510000000001, 44.097530000000006)
]
var polyline = new google.maps.Polyline({
path: d,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
polyline.setMap(map);
It is showing this:
InvalidValueError: at index 0: not a LatLng or LatLngLiteral with finite coordinates: not an Object
google.maps.geometry.encoding.decodePath returns an array of google.maps.LatLng objects, you can pass the value returned directly into the path property of the polyline:
var poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1,
strokeWeight: 3,
map: map,
path: google.maps.geometry.encoding.decodePath("oyky#e}|kGpv#kzE")
});
(your path array is not a valid JavaScript array)
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {
lat: 34.366,
lng: -89.519
}
});
var poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1,
strokeWeight: 3,
map: map,
path: google.maps.geometry.encoding.decodePath("oyky#e}|kGpv#kzE")
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < poly.getPath().getLength(); i++) {
bounds.extend(poly.getPath().getAt(i));
console.log(poly.getPath().getAt(i).toUrlValue(6));
}
map.fitBounds(bounds);
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap" async defer></script>
I'm asking because I've searched everywhere online and this is all I have been able to find. So far I've been able to make dashed lines on google maps with the following code.
app.config.dashSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4,
},
new google.maps.Polyline({
map:map,
path:polygon.getPath ? polygon.getPath() : polygon,
strokeColor: vue.Projects[projectID].ContractorColor,
strokeOpacity:0,
icons:[{
icon:app.config.dashSymbol,
offset:'0',
repeat:'20px'
}],
})
That all works fine, but is there a way that I can make a Polygon object with a dashed outline? I tried this, by it doesn't work
new google.maps.Polygon({
map:map,
paths:polygon.getPath ? polygon.getPath() : polygon,
fillColor: vue.Projects[projectID].ContractorColor,
strokeColor:vue.Projects[projectID].ContractorColor,
strokeOpacity:0,
icons:[{
icon:app.config.dashSymbol,
offset:'0',
repeat:'20px'
}]
})
I don't think you can. But you could overlay a Polyline on top of the Polygon.
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40, 9),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var path = [
new google.maps.LatLng(39, 4),
new google.maps.LatLng(34, 20),
new google.maps.LatLng(44, 20),
new google.maps.LatLng(39, 4)
];
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
scale: 2
};
var polygon = new google.maps.Polygon({
strokeOpacity: 0,
strokeWeight: 0,
fillColor: '#00FF00',
fillOpacity: .6,
paths: path,
map: map
});
var polylineDotted = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'
}],
path: path,
map: map
});
}
initialize();
#map-canvas {
height: 180px;
}
<div id="map-canvas"></div>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
I am trying to fill an area that is bordered by polylines that are snapped to roads. Here is my code:
var pos = new google.maps.LatLng(29.744860,-95.361302);
var myOptions = {
zoom: 12,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
roadTrip1 = [
new google.maps.LatLng(29.692093, -95.377307),
new google.maps.LatLng(29.813047,-95.399361),
new google.maps.LatLng(29.692093, -95.377307)
];
var traceroadTrip1 = new google.maps.Polyline({
path: roadTrip1,
strokeColor: "red",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
});
var service1 = new google.maps.DirectionsService(),traceroadTrip1,snap_path=[];
traceroadTrip1.setMap(map);
for(j=0;j<roadTrip1.length-1;j++){
service1.route({origin: roadTrip1[j],destination: roadTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceroadTrip1.setPath(snap_path);
}
});
}
I'm not too familiar with javascript and I'm hoping it's easy to create a polygon from polylines that are snapped to roads. Once I have a polygon I'd like to color the area.
Thanks for any and all help.
Change the google.maps.Polyline to a google.maps.Polygon.
var traceroadTrip1 = new google.maps.Polygon({
path: roadTrip1,
strokeColor: "red",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
proof of concept fiddle
code snippet:
function initialize() {
var pos = new google.maps.LatLng(29.813047, -95.399361);
var myOptions = {
zoom: 11,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
roadTrip1 = [
new google.maps.LatLng(29.692093, -95.377307),
new google.maps.LatLng(29.813047, -95.399361),
new google.maps.LatLng(29.692093, -95.377307)
];
var traceroadTrip1 = new google.maps.Polygon({
path: roadTrip1,
strokeColor: "red",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
var service1 = new google.maps.DirectionsService(),
traceroadTrip1, snap_path = [];
var bounds = new google.maps.LatLngBounds();
traceroadTrip1.setMap(map);
for (j = 0; j < roadTrip1.length - 1; j++) {
service1.route({
origin: roadTrip1[j],
destination: roadTrip1[j + 1],
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceroadTrip1.setPath(snap_path);
for (var i = 0; i < traceroadTrip1.getPath().getLength(); i++) {
bounds.extend(traceroadTrip1.getPath().getAt(i));
}
map.fitBounds(bounds);
}
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I'm drawing multiple radius circles on my map with the following code:
function drawRadius(size){
var circle = new google.maps.Marker({
position: map.getCenter(),
zIndex: 1,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: size,
strokeOpacity: 0.65,
strokeWeight: 4,
fillColor: '#FEFCF3',
fillOpacity: 0.08,
strokeColor: '#efe8b2'
},
map: map
});
}
This method is called multiple times with different size parameters, it results in the the following image:
Unfortunately, I can't move the map anymore, because - as far as I can tell - the events are now fired on the circles and not on the map.
How can I fix this? I just want to be able to normally drag/move the map.
Thank you!
If you don't need to click on the circles (markers), set clickable: false on them, that prevents the markers from receiving mouse events.
From the documentation:
clickable boolean If true, the marker receives mouse and touch events. Default value is true.
function drawRadius(size){
var circle = new google.maps.Marker({
position: map.getCenter(),
zIndex: 1,
clickable: false,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: size,
strokeOpacity: 0.65,
strokeWeight: 4,
fillColor: '#FEFCF3',
fillOpacity: 0.08,
strokeColor: '#efe8b2'
},
map: map
});
}
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var size = 100; size < 600; size += 100) {
drawRadius(size);
}
}
google.maps.event.addDomListener(window, "load", initialize);
function drawRadius(size) {
var circle = new google.maps.Marker({
position: map.getCenter(),
zIndex: 1,
clickable: false,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: size,
strokeOpacity: 0.65,
strokeWeight: 4,
fillColor: '#FEFCF3',
fillOpacity: 0.08,
strokeColor: '#000000'
},
map: map
});
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>