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>
Related
I´m creating a map out of polygons to show the different districts of a city. Each polygon (district) should be clickable to another website (a sub-page with information about this area). I already added an add.listener and I can see that there is a link behind a polygon when I hover over the polygon but it is not clickable.
This is what I have so far for one polygon:
<body>
<h1>Headline</h1>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center:{lat:52.516754,lng:13.415202},
mapTypeId: 'terrain'
});
//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [
{lat:52.528198300, lng:13.424935300},
{lat:52.527989500, lng:13.423905300},
{lat:52.525065200, lng:13.420386300},
{lat:52.522819700, lng:13.426480300},
{lat:52.521148500, lng:13.429141000},
{lat:52.519111700, lng:13.427596100},
{lat:52.528198300, lng:13.424935300}
];
// Construct the polygon.
var DistrictOne = new google.maps.Polygon({
paths: DistrictOneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
DistrictOne.setMap(map);
}
// link
google.maps.event.addListener(DistrictOne, "click", function(event) { window.location.href = "https://www.berlin.de" });
</script>
As I already mentioned I'm not able to click the link.
With the posted code, I get a javascript error:
Uncaught ReferenceError: google is not defined
Your "click" listener is outside of the initMap function, so it is executing before the Google Maps Javascript API v3 has loaded.
Move if inside the initMap function:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center:{lat:52.516754,lng:13.415202},
mapTypeId: 'terrain'
});
//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [
{lat:52.528198300, lng:13.424935300},
{lat:52.527989500, lng:13.423905300},
{lat:52.525065200, lng:13.420386300},
{lat:52.522819700, lng:13.426480300},
{lat:52.521148500, lng:13.429141000},
{lat:52.519111700, lng:13.427596100},
{lat:52.528198300, lng:13.424935300}
];
// Construct the polygon.
var DistrictOne = new google.maps.Polygon({
paths: DistrictOneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
DistrictOne.setMap(map);
// link
google.maps.event.addListener(DistrictOne, "click", function(event) {
window.location.href = "https://www.berlin.de"
});
}
proof of concept fiddle
code snippet:
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 52.516754,
lng: 13.415202
},
mapTypeId: 'terrain'
});
//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [{
lat: 52.528198300,
lng: 13.424935300
},
{
lat: 52.527989500,
lng: 13.423905300
},
{
lat: 52.525065200,
lng: 13.420386300
},
{
lat: 52.522819700,
lng: 13.426480300
},
{
lat: 52.519111700,
lng: 13.427596100
},
{
lat: 52.521148500,
lng: 13.429141000
},
{
lat: 52.528198300,
lng: 13.424935300
}
];
// Construct the polygon.
var DistrictOne = new google.maps.Polygon({
paths: DistrictOneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
DistrictOne.setMap(map);
// link
google.maps.event.addListener(DistrictOne, "click", function(event) {
console.log('click, set window.location.href = "https://www.berlin.de"');
// uncomment the line below to make it redirect
// window.location.href = "https://www.berlin.de"
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
As per your given code. I am implemented polygon in my local.
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center:{lat:52.516754,lng:13.415202},
mapTypeId: 'terrain'
});
//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [
{lat:52.528198300, lng:13.424935300},
{lat:52.527989500, lng:13.423905300},
{lat:52.525065200, lng:13.420386300},
{lat:52.522819700, lng:13.426480300},
{lat:52.521148500, lng:13.429141000},
{lat:52.519111700, lng:13.427596100},
{lat:52.528198300, lng:13.424935300}
];
// Construct the polygon.
var DistrictOne = new google.maps.Polygon({
paths: DistrictOneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
DistrictOne.setMap(map);
addEventFunction(DistrictOne);
}
// link
function addEventFunction(DistrictOne) {
google.maps.event.addListener(DistrictOne, "click", function(event) { window.location.href = "https://www.berlin.de" });
}
initMap();
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 have a Google Map. When a user clicks, it places a "start" marker. The second click yields a polyline between the first click and the second click, and adds an "end" marker. The third click adds another data point to the polyline, and moves the "end" marker to the most recent click. Nothing special:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 13
});
map.addListener('click', insertDataPoint);
polyline = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 0.7,
strokeWeight: 3
});
polyline.setMap(map);
plots = [];
... // Bunch of other code that isn't important
function insertDataPoint(e) {
var path = polyline.getPath();
path.push(e.latLng);
// Logic to set up marker or circle
if (plots.length == 0) {
// Case: first click
startMarker.setPosition(e.latLng);
startMarker.setMap(map);
plots.push(startMarker);
} else {
if (plots.length != 1) {
// Case: we have intermediate points between start and end
var plot = plots.pop();
var marker = new google.maps.Marker({
position: plot.getPosition(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#ffffff',
fillOpacity: 0.6,
strokeColor: '#ffffff',
strokeOpacity: 0.8,
strokeWeight: 2,
scale: 3
}
});
marker.setMap(map);
plots.push(marker);
}
// Case: add an end marker
endMarker.setPosition(e.latLng);
if (plots.length == 1) {
endMarker.setMap(map);
}
plots.push(endMarker);
}
}
I'd like to get the plotted points in GeoJSON format. I know Google recently released the Data layer API with the .toGeoJson() call, but, naturally, the data is empty because it was not added to the Data layer:
map.data.toGeoJson( function(data) {
alert(JSON.stringify(data)); // {"type":"FeatureCollections", "features":[]}
So the question is how do I add my data -- the markers and polyline -- to the Data layer so I can get that sweet GeoJSON?
Note -- I understand that the Data layer has functionality that allows users to draw on the map, but I need to do it my way.
This will create geoJSON representing the polyline and add it to the data layer:
function exportGeoJson() {
var geoJson = {
"type": "FeatureCollection",
"features": []
};
var polylineFeature = {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": []
},
"properties": {}
};
for (var i = 0; i < polyline.getPath().getLength(); i++) {
var pt = polyline.getPath().getAt(i);
polylineFeature.geometry.coordinates.push([
pt.lng(), pt.lat()]);
}
geoJson.features.push(polylineFeature);
document.getElementById('geojson').value = JSON.stringify(geoJson);
polyline.setPath([]);
map.data.addGeoJson(geoJson);
// Set the stroke width, and fill color for each polygon
map.data.setStyle({
strokeColor: 'green',
strokeWeight: 2
});
map.data.toGeoJson( function(data) {
document.getElementById('exported').value=JSON.stringify(data)
});
}
proof of concept fiddle
code snippet:
var polyline, map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 13
});
map.addListener('click', insertDataPoint);
polyline = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 0.7,
strokeWeight: 3
});
polyline.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
plots = [];
// Bunch of other code that isn't important
function insertDataPoint(e) {
var path = polyline.getPath();
path.push(e.latLng);
// Logic to set up marker or circle
if (plots.length == 0) {
// Case: first click
startMarker.setPosition(e.latLng);
startMarker.setMap(map);
plots.push(startMarker);
} else {
if (plots.length != 1) {
// Case: we have intermediate points between start and end
var plot = plots.pop();
var marker = new google.maps.Marker({
position: plot.getPosition(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#ffffff',
fillOpacity: 0.6,
strokeColor: '#ffffff',
strokeOpacity: 0.8,
strokeWeight: 2,
scale: 3
}
});
marker.setMap(map);
plots.push(marker);
}
// Case: add an end marker
endMarker.setPosition(e.latLng);
if (plots.length == 1) {
endMarker.setMap(map);
}
plots.push(endMarker);
}
}
function exportGeoJson() {
var geoJson = {
"type": "FeatureCollection",
"features": []
};
var polylineFeature = {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": []
},
"properties": {}
};
for (var i = 0; i < polyline.getPath().getLength(); i++) {
var pt = polyline.getPath().getAt(i);
polylineFeature.geometry.coordinates.push([
pt.lng(), pt.lat()
]);
}
geoJson.features.push(polylineFeature);
document.getElementById('geojson').value = JSON.stringify(geoJson);
polyline.setPath([]);
map.data.addGeoJson(geoJson);
// Set the stroke width, and fill color for each polygon
map.data.setStyle({
strokeColor: 'green',
strokeWeight: 2
});
map.data.toGeoJson(function(data) {
document.getElementById('exported').value = JSON.stringify(data)
});
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<input type="button" onclick="exportGeoJson()" value="export GeoJson" />
<div id="map" style="border: 2px solid #3872ac;"></div>
<textarea id="geojson" rows="10" cols="70"></textarea>
<br><b>Exported</b>
<br>
<textarea id="exported" rows="10" cols="70"></textarea>
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>