I have this code for display circle sector. This code stop working few weeks ago. I am not too familiar with this api and something probably changed. I see only maps without any markers.
Can someone help me find mistake, please ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- Le styles -->
<style type="text/css">
#map_canvas {
height: 80%;
}
#map_canvas {
height: 400px;
}
#map {
width: 800px;
height: 500px;
}
</style>
<script>
// Create an object containing LatLng, population.
var koordid = {};
var ringid;
var arcs = {};
arcs[0] = {
center : new google.maps.LatLng(50.083666666667, 14.479111111111),
startAngle : 208,
endAngle : 272,
radius : 734,
innerRadius : 0
}
function drawArc(map,arc) {
var points = 36;
var extpoints = new Array();
var deltaAngle = (arc.endAngle - arc.startAngle) / points;
if (arc.innerRadius > 0) {
extpoints.push(new google.maps.geometry.spherical.computeOffset(arc.center, arc.innerRadius, arc.startAngle));
for (var i=0; (i < points + 1); i++) {
extpoints.push(new google.maps.geometry.spherical.computeOffset(arc.center, arc.radius, arc.startAngle + i * deltaAngle));
}
for (var i=points; (i > -1); i--) {
extpoints.push(new google.maps.geometry.spherical.computeOffset(arc.center, arc.innerRadius, arc.startAngle + i * deltaAngle));
}
} else {
extpoints.push(arc.center);
for (var i=0; (i < points + 1); i++) {
extpoints.push(new google.maps.geometry.spherical.computeOffset(arc.center, arc.radius, arc.startAngle + i * deltaAngle));
}
}
var arc = new google.maps.Polygon({
path: [extpoints],
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
});
arc.setMap(map);
}
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(50.083666666667, 14.479111111111),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
for (var koord in koordid) {
var raadiusOptions = {};
raadiusOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
center: koordid[koord].center,
radius: koordid[koord].raadius
};
if (koord == 'tsoon') {
raadiusOptions.strokeColor = "#000000";
raadiusOptions.fillColor = "#000000";
}
ringid = new google.maps.Circle(raadiusOptions);
}
drawArc(map,arcs[0]);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
You didn't include the geometry-library in your code(but I guess in your production-version it's included)
The issue is this(in drawArc):
path: [extpoints]
when you use the path-property, it must be an array with LatLng's, but you provide an array that contains an array with LatLng's(what will work when you provide it as paths-property)
You may either use
path: extpoints
or
paths: [extpoints]
working fiddle
Related
I'm trying to display polygons in google map. I have a .xlsx file with a column named "polygon" in which are polygon coordinates in a strange format.
For example: [[], [[-68.0913, -38.95585], [-68.09148, -38.95666], [-68.07378, -38.9591], [-68.0393, -38.96023], [-68.03909, -38.95884], [-68.03909, -38.95517], [-68.03273, -38.95452], [-68.03288, -38.95122], [-68.03322, -38.94787], [-68.04327, -38.94201], [-68.06786, -38.93913], [-68.07294, -38.94037], [-68.07719, -38.94237], [-68.07908, -38.94347], [-68.08127, -38.94434], [-68.08457, -38.94739], [-68.1084, -38.9478], [-68.10842, -38.95442], [-68.0914, -38.9549], [-68.09136, -38.95559], [-68.09123, -38.95594]], [[-68.11045, -38.95312]], [[-68.09643, -38.96523], [-68.0967, -38.95809], [-68.09688, -38.95342], [-68.07472, -38.95842], [-68.04073, -38.95897], [-68.03989, -38.95899], [-68.03897, -38.95901], [-68.0391, -38.96296], [-68.04457, -38.96303], [-68.04461, -38.96304], [-68.04488, -38.97065], [-68.04485, -38.97065], [-68.04489, -38.97132], [-68.05176, -38.97112], [-68.05704, -38.97265], [-68.05725, -38.97858], [-68.06837, -38.97866], [-68.06886, -38.97315], [-68.06901, -38.96554], [-68.07631, -38.96542]]].
Is it possible to build a polygon with this data structure or it's an incorrect format?
Your data is a GeoJSON like coordinates format.
To translate that into a Google Maps Polygon:
// go through the outer array (of polygons)
for (var i = 0; i < coords.length; i++) {
// array for the LatLng coordinates
var polygonCoords = [];
// go through each coordinate in the array.
// GeoJSON is [longitude,latitude]
for (var j = 0; j < coords[i].length; j++) {
var pt = new google.maps.LatLng(coords[i][j][1], coords[i][j][0])
polygonCoords.push(pt);
}
// Construct the polygon.
var polygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
}
}
proof of concept fiddle
code snippet:
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
var coords = [[], [[-68.0913, -38.95585], [-68.09148, -38.95666], [-68.07378, -38.9591], [-68.0393, -38.96023], [-68.03909, -38.95884], [-68.03909, -38.95517], [-68.03273, -38.95452], [-68.03288, -38.95122], [-68.03322, -38.94787], [-68.04327, -38.94201], [-68.06786, -38.93913], [-68.07294, -38.94037], [-68.07719, -38.94237], [-68.07908, -38.94347], [-68.08127, -38.94434], [-68.08457, -38.94739], [-68.1084, -38.9478], [-68.10842, -38.95442], [-68.0914, -38.9549], [-68.09136, -38.95559], [-68.09123, -38.95594]], [[-68.11045, -38.95312]], [[-68.09643, -38.96523], [-68.0967, -38.95809], [-68.09688, -38.95342], [-68.07472, -38.95842], [-68.04073, -38.95897], [-68.03989, -38.95899], [-68.03897, -38.95901], [-68.0391, -38.96296], [-68.04457, -38.96303], [-68.04461, -38.96304], [-68.04488, -38.97065], [-68.04485, -38.97065], [-68.04489, -38.97132], [-68.05176, -38.97112], [-68.05704, -38.97265], [-68.05725, -38.97858], [-68.06837, -38.97866], [-68.06886, -38.97315], [-68.06901, -38.96554], [-68.07631, -38.96542]]];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < coords.length; i++) {
var polygonCoords = [];
for (var j = 0; j < coords[i].length; j++) {
var pt = new google.maps.LatLng(coords[i][j][1], coords[i][j][0])
bounds.extend(pt);
polygonCoords.push(pt);
}
// Construct the polygon.
var polygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
}
map.fitBounds(bounds);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
I am working on google map polygon marker, I have predefined lat long array, and need to set polygon area, It is working fine for me, but when i drag the marker polygon line doesn't change, it should have to be change as i drag the marker, can anyone please help me how can i resolve this issue ? Here i have added my code, can anyone please help me ?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon Arrays</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<input type="text" name="estimated_area" id="estimated_area" value="">
<input type="text" name="field_fj0d6" id="field_fj0d6" value="">
<script>
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
var map;
var infoWindow;
var markers = []; // Store Marker in an Array
function initMap() {
var lM = 't';
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: 'terrain'
});
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];
// Add Markers to Coordinates
for (var i = 0; i < triangleCoords.length; i++) {
var pos = triangleCoords[i];
var marker = new google.maps.Marker({
map: map,
position: pos,
draggable: true,
});
marker.setMap(map);
markers.push(marker);
var measure = {
mvcLine: new google.maps.MVCArray(),
mvcPolygon: new google.maps.MVCArray(),
mvcMarkers: new google.maps.MVCArray(),
line: null,
polygon: null
};
var latLng = pos;
var dot = marker;
/************** New Code ****************/
measure.mvcLine.push(latLng);
measure.mvcPolygon.push(latLng);
measure.mvcMarkers.push(dot);
var latLngIndex = measure.mvcLine.getLength() - 1;
google.maps.event.addListener(dot, "drag", function (evt) {
measure.mvcLine.setAt(latLngIndex, evt.latLng);
measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
});
google.maps.event.addListener(dot, "dragend", function () {
console.log('<p>Marker dropped: Current Lat: ' + this.getPosition().lat() + ' Current Lng: ' + this.getPosition().lng() + '</p>');
drag = true;
setTimeout(function () {
drag = false;
}, 250);
if (measure.mvcLine.getLength() > 1) {
mC();
}
});
if (measure.mvcLine.getLength() > 1) {
if (!measure.line) {
measure.line = new google.maps.Polyline({
map: map,
clickable: false,
strokeColor: "#ff5b06",
strokeOpacity: 1,
strokeWeight: 3,
path: measure.mvcLine
});
}
if (measure.mvcPolygon.getLength() > 2) {
if (!measure.polygon) {
if (lM) {
measure.polygon = new google.maps.Polygon({
clickable: false,
map: map,
fillOpacity: 0.6,
fillColor: '#000000',
strokeOpacity: 0,
paths: measure.mvcPolygon
});
} else {
measure.polygon = new google.maps.Polygon({
clickable: false,
map: map,
fillOpacity: 0.6,
fillColor: '#000000',
strokeOpacity: 0,
paths: measure.mvcPolygon
});
}
}
}
}
if (measure.mvcLine.getLength() > 1) {
mC();
}
}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#ff5b06',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#000000',
fillOpacity: 0.6
});
bermudaTriangle.setMap(map);
}
function mR() {
if (measure.polygon) {
measure.polygon.setMap(null);
measure.polygon = null;
}
if (measure.line) {
measure.line.setMap(null);
measure.line = null
}
measure.mvcLine.clear();
measure.mvcPolygon.clear();
measure.mvcMarkers.forEach(function (elem, index) {
elem.setMap(null);
});
measure.mvcMarkers.clear();
document.getElementById('estimated_area').value = '';
document.getElementById('field_fj0d6').value = '';
}
function mC() {
var l = 0;
if (measure.mvcPolygon.getLength() > 1) {
l = google.maps.geometry.spherical.computeLength(measure.line.getPath());
}
var a = 0;
if (measure.mvcPolygon.getLength() > 2) {
a = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());
}
if (a) {
var km = a / (1000 * 1000);
var feet = a * 10.7639104;
var yards = a * 1.19599005;
var acres = a * 0.000247105381;
var unit = " meters²";
var unit1 = " acres";
var unit2 = " km²";
var unit3 = " sq. ft.";
var unit4 = " yards²";
var area = feet.toFixed(0) + unit3;
//This is for update details in review tab
document.getElementById('estimated_area').value = parseFloat(area);
document.getElementById('field_fj0d6').value = String(area);
}
}
function rL() {
var test = measure.mvcLine.pop();
if (test) {
measure.mvcPolygon.pop();
var dot = measure.mvcMarkers.pop();
dot.setMap(null);
mC();
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYeDBDl-8Wx98Az55EbVnpvRfSIBbwxyE&callback=initMap">
</script>
</body>
</html>
You need to bind the vertices of the polygon to the markers.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#ff5b06',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#000000',
fillOpacity: 0.6
});
bermudaTriangle.setMap(map);
bermudaTriangle.binder = new MVCArrayBinder(bermudaTriangle.getPath());
for (var j = 0; j < bermudaTriangle.getPath().getLength(); j++) {
var mark = new google.maps.Marker({
position: bermudaTriangle.getPath().getAt(),
map: map,
draggable: true
});
mark.bindTo('position', bermudaTriangle.binder, (j).toString());
}
online example
proof of concept fiddle
code snippet:
var map;
var markers = []; // Store Marker in an Array
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
// Define the LatLng coordinates for the polygon.
var triangleCoords = [{
lat: 25.774,
lng: -80.190
},
{
lat: 18.466,
lng: -66.118
},
{
lat: 32.321,
lng: -64.757
}
];
// Add Markers to Coordinates
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#ff5b06',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#000000',
fillOpacity: 0.6
});
bermudaTriangle.setMap(map);
bermudaTriangle.binder = new MVCArrayBinder(bermudaTriangle.getPath());
for (var j = 0; j < bermudaTriangle.getPath().getLength(); j++) {
var mark = new google.maps.Marker({
position: bermudaTriangle.getPath().getAt(),
map: map,
draggable: true
});
mark.bindTo('position', bermudaTriangle.binder, (j).toString());
}
}
google.maps.event.addDomListener(window, 'load', initMap);
/*
* Use bindTo to allow dynamic drag of markers to refresh poly.
*/
function MVCArrayBinder(mvcArray) {
this.array_ = mvcArray;
}
MVCArrayBinder.prototype = new google.maps.MVCObject();
MVCArrayBinder.prototype.get = function(key) {
if (!isNaN(parseInt(key))) {
return this.array_.getAt(parseInt(key));
} else {
this.array_.get(key);
}
}
MVCArrayBinder.prototype.set = function(key, val) {
if (!isNaN(parseInt(key))) {
this.array_.setAt(parseInt(key), val);
} else {
this.array_.set(key, val);
}
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I'm trying to create an encoded polyline of all Canadian provinces. I begun with this utility:
https://developers.google.com/maps/documentation/utilities/polylineutility
Using it I create many point to follow the province line of ontario as closely as possible. Here's a screenshot of the resulting polyline:
but when I take the polyline an plug it into the code to map it, It provides me with partially different line:
http://jsfiddle.net/2x6eLLca/1/
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<style type="text/css">
#map {width:670px;height:600px;}
</style>
<script type='text/javascript'>
function initialize() {
var myLatlng = new google.maps.LatLng(61.5780305,-107.1029399);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`Kgl#jDJuEyIwIgv_TYuymWyusd#wbOqcLrgd#yvn#fqsH_ulc#iuMgppAhoWixv#v|oC}vXf`uD_{K`idAp}gApjkCynyCtwmB_`rIlobYsia#tmlFex}CtiiDov{Ov`KivImrH_gSc]gsDwhE}gAcc#{rBer#szI{zH{q_#_EufFkpDsoSicFi}L_EydG`r#slC~AygLeiCqsQcmG{eM~S_[_Bi`]dqHwgWdlCg}Wfnr#rhPpdWi`]hlGn|SnnMf_Lt_D`gShpEzgLni#~qIjc#puE}pAtcAaEfsDkc#zyEbxD|aObNbwMhmG~xLnuBraMpxBnr#jaItw\bkA`dCto#ucAtrBhqEcHvv#x{BfuCvrBn~Gd`y#nolAtrGtcA`gPpf\gv#~lEdxHnuP~i#xbHhaBzpCdaGqGbpEzeM`j#zpN|bKjdEr{F`~Pr|xAtkcAzWrjtJzwb#pn~Ajfe#}oUvbT_mE`oCrjDnpAor#nnDtcAvvAgaK~cAytAhtE|pCdbDePfnEivIfq#ujDr|BabDdhEeP`qLx{Df{sAvl~Ethc#vh`FxvfBlf_F?ra{#web#f{fAouc#~hRm|O_mEcaTnr#ohLq|HidConModBgaK{cDcaV{f`#_e_#{hBa`EfiAy}Cch#adCivDaqD{qC_mEukJcjA_gIohD}nB?afDq_BiwGtrAc{NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB}~w#iusIfbjAwr}Ar{rEwab#sb^ibSnjZxVrpd#`yFrtWxVngJchXncW{wSrqGgpCzKs_#glA_|HhqEs~HlTk~NmdEqxCrnBuS|gAn\tjDunAduChh#jdEdqFjoF|AhoFykAn`GuSb~E~bAzrB}D|pC|bAv}Ct|EtjDet#~aOmn`#vjg#i{p#tdR{rsGbbkT~wJff}#zjt#jc~BgpFnq]lx#fyYyqBtb^tmE|aOwvDttWwnOhoFzUpuaBcg#fsD{kBucApr#~zKhx#pnBvzAfvTklGpuEka#flAix#qnB_fBwIvXrnBsxB|x#eFnpA{_#zKl#zZre#gChWdn#aS`]ikHlEayAtIgM`]sQzZvl#fdDik#`{#npApwDvjAfaKjqBrjDjiA`bDrGjfDzi#b{#hCbhBxl#xv#vb#zaCxl#nc#|_#hwCha#se#liDj|GwNfn#|iCr{Chn#njC`~#|gAte#pnBve#`aJdPtcAaSd_#`]r{C{Kvg#zmAl{Bnu#joFaI|x#owBf}#|Kn_BiC`sC`wCplNma#rt#irG}i#{v#ycBgn#`l#rfArwPa}BjdElJ`bDsvIia#dP|pCujDsnBozAtmTp[jkHcgEbbDfa#pcLehCwXlJ~eBz}#vX{eBnpA_ShjB_uJia#eiArqGayCxtAjr#nyCub#xzJ{z#pGdu#~lEfa#?xUbyAqQ~gAx_#tIvDxeAiWlT_c#tbGxhArbDfsB`e#fMnaAjh#rGj|#urAnkBzi#nsCoaAvl#{cBpy#qVhk#`xGvl#zrB_IrVvjA`bDeFd_#lJiCvNvIsiCvaBePqFpBfQuNbHuDqJ}ItADeMwLxGiAzClEvQoAhNeKQx#sK{DaDsVpYmH}Ds`F`oC}Vf\ob#t_#yFnTlCtP}Vp]uLxJgYzKuAbCcbFlpD{zBni#itDi_CooA?kY`vBicAfn#{Fzi#qlBjkBT||Dbk#jpFrXbuNaU`l#eWt|CqvBvuCel#yYuOjDshAor#g~#_MkO_pAlF}xCca#al#jJok#V{h#xAyRsHwg#iOmSa[~[q]ki#cFtIgXcHsxCxz#eUpoC~i#xuLo_Jjy_#qBtrAmbAhyBwFt~BshC?oGd_#rp#pxDoXjsSj[nfPq^za#swAlqCoAldHxeB~kQ`~Avg#kOhh#`q#`{#vKxvCgd#r{#z~#lxC~`#ho#rHr{CzX~\xdCu|#ddB|Sf^vg#ng#prFhu#pmE|G`eC~OrnBqSxeArd#dzApGps#_u#flAxApd#p}#`{#zRre#`Kt`HaPbhBlEd|#cFvqBdRr`ByFre#UvhE_uAt|C__#bAk`#en#k{#tHosAcl#q_BtHexDf{AopBj|AyRhhCk[tlI`Kb^qBjaFmx#pkIvKnvDkQhmAj#hmAbAlTmQlTnLxv#xAl}AqNtu#lLjnAeMtyDpBbyAe^jaFbAz|AlFhtAka#`zCqo#nr#ueB_\_w#fXmeAp{#iDj_Aoc#rs#s[~`Dxc#xyBtEz|AmRl_Ds`#n_BbGdwE~_BdwBfN|uAka#`gEwQzyEsIntBykAjgA}Nn{EczBntEoj#heDm]}DomCpfE{YlnAgyIjnAut#qnBooDvg#yYse#efk#fpK_uBtjDs|c#xqH}yAucAeXf|FkrG~wRjNpfEtgAv}CpR|fGifAfiHgh#v|CsTnUabA`dC');
var decodedLevels = decodeLevels("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB");
var setRegion = new google.maps.Polyline({
path: decodedPath,
levels: decodedLevels,
strokeColor: '#8A8000',
strokeOpacity: 1.0,
strokeWeight: 2,
fillColor: '#8A8A1D',
fillOpacity: 0,
map: map
});
}
function decodeLevels(encodedLevelsString) {
var decodedLevels = [];
for (var i = 0; i < encodedLevelsString.length; ++i) {
var level = encodedLevelsString.charCodeAt(i) - 63;
decodedLevels.push(level);
}
return decodedLevels;
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
</body>
</html>
Any Ideas why the line deviates? I tried it twice, each time the line veers of midway.
Thanks
You need to escape the "\" characters in the string (replace the single "\" with a double "\\").
Change:
var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`Kgl#jDJuEyIwIgv_TYuymWyusd#wbOqcLrgd#yvn#fqsH_ulc#iuMgppAhoWixv#v|oC}vXf`uD_{K`idAp}gApjkCynyCtwmB_`rIlobYsia#tmlFex}CtiiDov{Ov`KivImrH_gSc]gsDwhE}gAcc#{rBer#szI{zH{q_#_EufFkpDsoSicFi}L_EydG`r#slC~AygLeiCqsQcmG{eM~S_[_Bi`]dqHwgWdlCg}Wfnr#rhPpdWi`]hlGn|SnnMf_Lt_D`gShpEzgLni#~qIjc#puE}pAtcAaEfsDkc#zyEbxD|aObNbwMhmG~xLnuBraMpxBnr#jaItw\bkA`dCto#ucAtrBhqEcHvv#x{BfuCvrBn~Gd`y#nolAtrGtcA`gPpf\gv#~lEdxHnuP~i#xbHhaBzpCdaGqGbpEzeM`j#zpN|bKjdEr{F`~Pr|xAtkcAzWrjtJzwb#pn~Ajfe#}oUvbT_mE`oCrjDnpAor#nnDtcAvvAgaK~cAytAhtE|pCdbDePfnEivIfq#ujDr|BabDdhEeP`qLx{Df{sAvl~Ethc#vh`FxvfBlf_F?ra{#web#f{fAouc#~hRm|O_mEcaTnr#ohLq|HidConModBgaK{cDcaV{f`#_e_#{hBa`EfiAy}Cch#adCivDaqD{qC_mEukJcjA_gIohD}nB?afDq_BiwGtrAc{NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB}~w#iusIfbjAwr}Ar{rEwab#sb^ibSnjZxVrpd#`yFrtWxVngJchXncW{wSrqGgpCzKs_#glA_|HhqEs~HlTk~NmdEqxCrnBuS|gAn\tjDunAduChh#jdEdqFjoF|AhoFykAn`GuSb~E~bAzrB}D|pC|bAv}Ct|EtjDet#~aOmn`#vjg#i{p#tdR{rsGbbkT~wJff}#zjt#jc~BgpFnq]lx#fyYyqBtb^tmE|aOwvDttWwnOhoFzUpuaBcg#fsD{kBucApr#~zKhx#pnBvzAfvTklGpuEka#flAix#qnB_fBwIvXrnBsxB|x#eFnpA{_#zKl#zZre#gChWdn#aS`]ikHlEayAtIgM`]sQzZvl#fdDik#`{#npApwDvjAfaKjqBrjDjiA`bDrGjfDzi#b{#hCbhBxl#xv#vb#zaCxl#nc#|_#hwCha#se#liDj|GwNfn#|iCr{Chn#njC`~#|gAte#pnBve#`aJdPtcAaSd_#`]r{C{Kvg#zmAl{Bnu#joFaI|x#owBf}#|Kn_BiC`sC`wCplNma#rt#irG}i#{v#ycBgn#`l#rfArwPa}BjdElJ`bDsvIia#dP|pCujDsnBozAtmTp[jkHcgEbbDfa#pcLehCwXlJ~eBz}#vX{eBnpA_ShjB_uJia#eiArqGayCxtAjr#nyCub#xzJ{z#pGdu#~lEfa#?xUbyAqQ~gAx_#tIvDxeAiWlT_c#tbGxhArbDfsB`e#fMnaAjh#rGj|#urAnkBzi#nsCoaAvl#{cBpy#qVhk#`xGvl#zrB_IrVvjA`bDeFd_#lJiCvNvIsiCvaBePqFpBfQuNbHuDqJ}ItADeMwLxGiAzClEvQoAhNeKQx#sK{DaDsVpYmH}Ds`F`oC}Vf\ob#t_#yFnTlCtP}Vp]uLxJgYzKuAbCcbFlpD{zBni#itDi_CooA?kY`vBicAfn#{Fzi#qlBjkBT||Dbk#jpFrXbuNaU`l#eWt|CqvBvuCel#yYuOjDshAor#g~#_MkO_pAlF}xCca#al#jJok#V{h#xAyRsHwg#iOmSa[~[q]ki#cFtIgXcHsxCxz#eUpoC~i#xuLo_Jjy_#qBtrAmbAhyBwFt~BshC?oGd_#rp#pxDoXjsSj[nfPq^za#swAlqCoAldHxeB~kQ`~Avg#kOhh#`q#`{#vKxvCgd#r{#z~#lxC~`#ho#rHr{CzX~\xdCu|#ddB|Sf^vg#ng#prFhu#pmE|G`eC~OrnBqSxeArd#dzApGps#_u#flAxApd#p}#`{#zRre#`Kt`HaPbhBlEd|#cFvqBdRr`ByFre#UvhE_uAt|C__#bAk`#en#k{#tHosAcl#q_BtHexDf{AopBj|AyRhhCk[tlI`Kb^qBjaFmx#pkIvKnvDkQhmAj#hmAbAlTmQlTnLxv#xAl}AqNtu#lLjnAeMtyDpBbyAe^jaFbAz|AlFhtAka#`zCqo#nr#ueB_\_w#fXmeAp{#iDj_Aoc#rs#s[~`Dxc#xyBtEz|AmRl_Ds`#n_BbGdwE~_BdwBfN|uAka#`gEwQzyEsIntBykAjgA}Nn{EczBntEoj#heDm]}DomCpfE{YlnAgyIjnAut#qnBooDvg#yYse#efk#fpK_uBtjDs|c#xqH}yAucAeXf|FkrG~wRjNpfEtgAv}CpR|fGifAfiHgh#v|CsTnUabA`dC');
To:
var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`Kgl#jDJuEyIwIgv_TYuymWyusd#wbOqcLrgd#yvn#fqsH_ulc#iuMgppAhoWixv#v|oC}vXf`uD_{K`idAp}gApjkCynyCtwmB_`rIlobYsia#tmlFex}CtiiDov{Ov`KivImrH_gSc]gsDwhE}gAcc#{rBer#szI{zH{q_#_EufFkpDsoSicFi}L_EydG`r#slC~AygLeiCqsQcmG{eM~S_[_Bi`]dqHwgWdlCg}Wfnr#rhPpdWi`]hlGn|SnnMf_Lt_D`gShpEzgLni#~qIjc#puE}pAtcAaEfsDkc#zyEbxD|aObNbwMhmG~xLnuBraMpxBnr#jaItw\\bkA`dCto#ucAtrBhqEcHvv#x{BfuCvrBn~Gd`y#nolAtrGtcA`gPpf\\gv#~lEdxHnuP~i#xbHhaBzpCdaGqGbpEzeM`j#zpN|bKjdEr{F`~Pr|xAtkcAzWrjtJzwb#pn~Ajfe#}oUvbT_mE`oCrjDnpAor#nnDtcAvvAgaK~cAytAhtE|pCdbDePfnEivIfq#ujDr|BabDdhEeP`qLx{Df{sAvl~Ethc#vh`FxvfBlf_F?ra{#web#f{fAouc#~hRm|O_mEcaTnr#ohLq|HidConModBgaK{cDcaV{f`#_e_#{hBa`EfiAy}Cch#adCivDaqD{qC_mEukJcjA_gIohD}nB?afDq_BiwGtrAc{NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB}~w#iusIfbjAwr}Ar{rEwab#sb^ibSnjZxVrpd#`yFrtWxVngJchXncW{wSrqGgpCzKs_#glA_|HhqEs~HlTk~NmdEqxCrnBuS|gAn\\tjDunAduChh#jdEdqFjoF|AhoFykAn`GuSb~E~bAzrB}D|pC|bAv}Ct|EtjDet#~aOmn`#vjg#i{p#tdR{rsGbbkT~wJff}#zjt#jc~BgpFnq]lx#fyYyqBtb^tmE|aOwvDttWwnOhoFzUpuaBcg#fsD{kBucApr#~zKhx#pnBvzAfvTklGpuEka#flAix#qnB_fBwIvXrnBsxB|x#eFnpA{_#zKl#zZre#gChWdn#aS`]ikHlEayAtIgM`]sQzZvl#fdDik#`{#npApwDvjAfaKjqBrjDjiA`bDrGjfDzi#b{#hCbhBxl#xv#vb#zaCxl#nc#|_#hwCha#se#liDj|GwNfn#|iCr{Chn#njC`~#|gAte#pnBve#`aJdPtcAaSd_#`]r{C{Kvg#zmAl{Bnu#joFaI|x#owBf}#|Kn_BiC`sC`wCplNma#rt#irG}i#{v#ycBgn#`l#rfArwPa}BjdElJ`bDsvIia#dP|pCujDsnBozAtmTp[jkHcgEbbDfa#pcLehCwXlJ~eBz}#vX{eBnpA_ShjB_uJia#eiArqGayCxtAjr#nyCub#xzJ{z#pGdu#~lEfa#?xUbyAqQ~gAx_#tIvDxeAiWlT_c#tbGxhArbDfsB`e#fMnaAjh#rGj|#urAnkBzi#nsCoaAvl#{cBpy#qVhk#`xGvl#zrB_IrVvjA`bDeFd_#lJiCvNvIsiCvaBePqFpBfQuNbHuDqJ}ItADeMwLxGiAzClEvQoAhNeKQx#sK{DaDsVpYmH}Ds`F`oC}Vf\\ob#t_#yFnTlCtP}Vp]uLxJgYzKuAbCcbFlpD{zBni#itDi_CooA?kY`vBicAfn#{Fzi#qlBjkBT||Dbk#jpFrXbuNaU`l#eWt|CqvBvuCel#yYuOjDshAor#g~#_MkO_pAlF}xCca#al#jJok#V{h#xAyRsHwg#iOmSa[~[q]ki#cFtIgXcHsxCxz#eUpoC~i#xuLo_Jjy_#qBtrAmbAhyBwFt~BshC?oGd_#rp#pxDoXjsSj[nfPq^za#swAlqCoAldHxeB~kQ`~Avg#kOhh#`q#`{#vKxvCgd#r{#z~#lxC~`#ho#rHr{CzX~\\xdCu|#ddB|Sf^vg#ng#prFhu#pmE|G`eC~OrnBqSxeArd#dzApGps#_u#flAxApd#p}#`{#zRre#`Kt`HaPbhBlEd|#cFvqBdRr`ByFre#UvhE_uAt|C__#bAk`#en#k{#tHosAcl#q_BtHexDf{AopBj|AyRhhCk[tlI`Kb^qBjaFmx#pkIvKnvDkQhmAj#hmAbAlTmQlTnLxv#xAl}AqNtu#lLjnAeMtyDpBbyAe^jaFbAz|AlFhtAka#`zCqo#nr#ueB_\\_w#fXmeAp{#iDj_Aoc#rs#s[~`Dxc#xyBtEz|AmRl_Ds`#n_BbGdwE~_BdwBfN|uAka#`gEwQzyEsIntBykAjgA}Nn{EczBntEoj#heDm]}DomCpfE{YlnAgyIjnAut#qnBooDvg#yYse#efk#fpK_uBtjDs|c#xqH}yAucAeXf|FkrG~wRjNpfEtgAv}CpR|fGifAfiHgh#v|CsTnUabA`dC');
updated fiddle
code snippet:
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var myLatlng = new google.maps.LatLng(61.5780305, -107.1029399);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`Kgl#jDJuEyIwIgv_TYuymWyusd#wbOqcLrgd#yvn#fqsH_ulc#iuMgppAhoWixv#v|oC}vXf`uD_{K`idAp}gApjkCynyCtwmB_`rIlobYsia#tmlFex}CtiiDov{Ov`KivImrH_gSc]gsDwhE}gAcc#{rBer#szI{zH{q_#_EufFkpDsoSicFi}L_EydG`r#slC~AygLeiCqsQcmG{eM~S_[_Bi`]dqHwgWdlCg}Wfnr#rhPpdWi`]hlGn|SnnMf_Lt_D`gShpEzgLni#~qIjc#puE}pAtcAaEfsDkc#zyEbxD|aObNbwMhmG~xLnuBraMpxBnr#jaItw\\bkA`dCto#ucAtrBhqEcHvv#x{BfuCvrBn~Gd`y#nolAtrGtcA`gPpf\\gv#~lEdxHnuP~i#xbHhaBzpCdaGqGbpEzeM`j#zpN|bKjdEr{F`~Pr|xAtkcAzWrjtJzwb#pn~Ajfe#}oUvbT_mE`oCrjDnpAor#nnDtcAvvAgaK~cAytAhtE|pCdbDePfnEivIfq#ujDr|BabDdhEeP`qLx{Df{sAvl~Ethc#vh`FxvfBlf_F?ra{#web#f{fAouc#~hRm|O_mEcaTnr#ohLq|HidConModBgaK{cDcaV{f`#_e_#{hBa`EfiAy}Cch#adCivDaqD{qC_mEukJcjA_gIohD}nB?afDq_BiwGtrAc{NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB}~w#iusIfbjAwr}Ar{rEwab#sb^ibSnjZxVrpd#`yFrtWxVngJchXncW{wSrqGgpCzKs_#glA_|HhqEs~HlTk~NmdEqxCrnBuS|gAn\\tjDunAduChh#jdEdqFjoF|AhoFykAn`GuSb~E~bAzrB}D|pC|bAv}Ct|EtjDet#~aOmn`#vjg#i{p#tdR{rsGbbkT~wJff}#zjt#jc~BgpFnq]lx#fyYyqBtb^tmE|aOwvDttWwnOhoFzUpuaBcg#fsD{kBucApr#~zKhx#pnBvzAfvTklGpuEka#flAix#qnB_fBwIvXrnBsxB|x#eFnpA{_#zKl#zZre#gChWdn#aS`]ikHlEayAtIgM`]sQzZvl#fdDik#`{#npApwDvjAfaKjqBrjDjiA`bDrGjfDzi#b{#hCbhBxl#xv#vb#zaCxl#nc#|_#hwCha#se#liDj|GwNfn#|iCr{Chn#njC`~#|gAte#pnBve#`aJdPtcAaSd_#`]r{C{Kvg#zmAl{Bnu#joFaI|x#owBf}#|Kn_BiC`sC`wCplNma#rt#irG}i#{v#ycBgn#`l#rfArwPa}BjdElJ`bDsvIia#dP|pCujDsnBozAtmTp[jkHcgEbbDfa#pcLehCwXlJ~eBz}#vX{eBnpA_ShjB_uJia#eiArqGayCxtAjr#nyCub#xzJ{z#pGdu#~lEfa#?xUbyAqQ~gAx_#tIvDxeAiWlT_c#tbGxhArbDfsB`e#fMnaAjh#rGj|#urAnkBzi#nsCoaAvl#{cBpy#qVhk#`xGvl#zrB_IrVvjA`bDeFd_#lJiCvNvIsiCvaBePqFpBfQuNbHuDqJ}ItADeMwLxGiAzClEvQoAhNeKQx#sK{DaDsVpYmH}Ds`F`oC}Vf\\ob#t_#yFnTlCtP}Vp]uLxJgYzKuAbCcbFlpD{zBni#itDi_CooA?kY`vBicAfn#{Fzi#qlBjkBT||Dbk#jpFrXbuNaU`l#eWt|CqvBvuCel#yYuOjDshAor#g~#_MkO_pAlF}xCca#al#jJok#V{h#xAyRsHwg#iOmSa[~[q]ki#cFtIgXcHsxCxz#eUpoC~i#xuLo_Jjy_#qBtrAmbAhyBwFt~BshC?oGd_#rp#pxDoXjsSj[nfPq^za#swAlqCoAldHxeB~kQ`~Avg#kOhh#`q#`{#vKxvCgd#r{#z~#lxC~`#ho#rHr{CzX~\\xdCu|#ddB|Sf^vg#ng#prFhu#pmE|G`eC~OrnBqSxeArd#dzApGps#_u#flAxApd#p}#`{#zRre#`Kt`HaPbhBlEd|#cFvqBdRr`ByFre#UvhE_uAt|C__#bAk`#en#k{#tHosAcl#q_BtHexDf{AopBj|AyRhhCk[tlI`Kb^qBjaFmx#pkIvKnvDkQhmAj#hmAbAlTmQlTnLxv#xAl}AqNtu#lLjnAeMtyDpBbyAe^jaFbAz|AlFhtAka#`zCqo#nr#ueB_\\_w#fXmeAp{#iDj_Aoc#rs#s[~`Dxc#xyBtEz|AmRl_Ds`#n_BbGdwE~_BdwBfN|uAka#`gEwQzyEsIntBykAjgA}Nn{EczBntEoj#heDm]}DomCpfE{YlnAgyIjnAut#qnBooDvg#yYse#efk#fpK_uBtjDs|c#xqH}yAucAeXf|FkrG~wRjNpfEtgAv}CpR|fGifAfiHgh#v|CsTnUabA`dC');
var decodedLevels = decodeLevels("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB");
var setRegion = new google.maps.Polyline({
path: decodedPath,
levels: decodedLevels,
strokeColor: '#8A8000',
strokeOpacity: 1.0,
strokeWeight: 2,
fillColor: '#8A8A1D',
fillOpacity: 0,
map: map
});
}
function decodeLevels(encodedLevelsString) {
var decodedLevels = [];
for (var i = 0; i < encodedLevelsString.length; ++i) {
var level = encodedLevelsString.charCodeAt(i) - 63;
decodedLevels.push(level);
}
return decodedLevels;
}
html,
body,
#map {
width: 100%;
height: 100%;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>
I've been searching for a while now....
I have a Polyline, path comes from google.maps.geometry.encoding.decodePath.
Now I want to center my map around that path, even though I don't know where the path is located.
How do I do that?
My code:
decodedPath = google.maps.geometry.encoding.decodePath(mapid);
var myLatlng = new google.maps.LatLng(0, 0);
let map = new google.maps.Map(document.getElementById(id), {
zoom: 1,
center: myLatlng,
mouseWheel:true
});
let poly = new google.maps.Polyline({
strokeColor: '#000',
strokeOpacity: 1.0,
strokeWeight: 3,
paths: decodedPath,
});
poly.setMap(map);
Add the point in the decoded path to an empty google.maps.LatLngBounds object, then call map.fitBounds on that bounds object.
var bounds = new google.maps.LatLngBounds();
for (var i=0; i<decodedPath.length; i++) {
bounds.extend(decodedPath[i]);
}
map.fitBounds(bounds);
proof of concept fiddle
code snippet:'
var geocoder;
var map;
var mapid = "aq|rFttwdQiizCfl}AqcbFfxv#_jfBff}#silAdfdDl`UzrlCmpp#z~eBgq#rrz`#~_dK?rfBstgK~daE~eBbwDulch#";
var id = "map_canvas";
function initialize() {
decodedPath = google.maps.geometry.encoding.decodePath(mapid);
var myLatlng = new google.maps.LatLng(0, 0);
map = new google.maps.Map(document.getElementById(id), {
zoom: 1,
center: myLatlng,
mouseWheel: true
});
var poly = new google.maps.Polyline({
strokeColor: '#000',
strokeOpacity: 1.0,
strokeWeight: 3,
path: decodedPath
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < decodedPath.length; i++) {
bounds.extend(decodedPath[i]);
}
map.fitBounds(bounds);
poly.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>
i work with subgurim google maps v4 .i need to plot several circles with different colors based on (latitude,lnogitude,radius) .how can i perform it?
during search i found multiple codes to drow the circle but not using subgurim google maps.can one help to convert this code .
var Circle = new google.maps.Circle({ center: birrfeld, radius: 2000, strokeColor: color, strokeOpacity: 1, strokeWeight: 2, fillColor: color, fillOpacity: 0.4 });
Circle.setMap(map);
Here is my code, I use a data file that has just long and lat in it, as json.
var latlng;
var marker;
function initialize () {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(2.8,2.8),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("mapCanvas"),mapOptions );
console.log("alex");
$.getJSON("data/canada.json", function(data) {
//console.log(latlngArray);
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.2,
strokeWeight: 6,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: latlng,
radius: 20000,
}
for (var i = 0; i < data.length; i++) {
populationOptions.center = new google.maps.LatLng(data[i].Latitude,data[i].Longitude);
cityCircle = new google.maps.Circle(populationOptions);
}
});
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&?key=AIzaSyB_h_TZ3jVQstD6ieduDF482_kRIyF4y1I&sensor=false&'
+ 'callback=initialize';
document.body.appendChild(script);
console.log("aaa");
}
window.onload = loadScript;
The html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {height:100%},
body {height:100%;margin:0;padding:0}
</style>
<script src="js/jquery1.9.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/AlexMap.js"></script>
</head>
<body >
<div id="heatmapArea style="width:1100px; height:900px"></div>
</body>
The data I use draws a bunch of circles of all weather stations in Canada both official and part of the "observer program"