how to plot circles in subgurim google maps? - google-maps

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"

Related

Google Maps - Animated Polyline -- Stop / Remove Animation

I'm plotting a polyline on Google Maps API V3, from a GPX file.
On mouseover of that polyline, I have an animated dot, moving along the polyline, using function animateRoute();
Currently however, I don't have a way to remove the animated dot on mouseout, and as a result, if you mouseover, mouseout, mouseover etc, you end up with multiple animated dots moving along the same line.
Code snippet: (see full working URL below too)
var gmarkers = [];
function loadGPXFileIntoGoogleMap(map, filename,recordNum, name, hex_code) {
$.ajax({
type: "GET",
url: filename,
dataType: "xml",
success: function(xml) {
var points = [];
var bounds = new google.maps.LatLngBounds ();
$(xml).find("trkpt").each(function() {
var lat = $(this).attr("lat");
var lon = $(this).attr("lon");
if((lat != 0) && (lon != 0))
{
var p = new google.maps.LatLng(lat, lon);
points.push(p);
bounds.extend(p);
}
});
var strokeColor = "#ff0000";
var poly = new google.maps.Polyline({
path: points,
strokeColor: strokeColor,
strokeOpacity: 1,
strokeWeight: 4,
recordNum: recordNum,
});
poly.setMap(map);
google.maps.event.addListener(poly, 'mouseover', function() {
var start = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#00ff00',
fillOpacity: 1,
strokeColor:'#000000',
strokeWeight: 4,
scale: 0.5
}
var end = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: 1,
strokeColor:'#000000',
strokeWeight: 4,
scale: 0.5
}
var markerStart = new google.maps.Marker({
position: poly.getPath().getAt(0),
icon: start,
map: map,
zIndex: 200,
scale: 1
});
gmarkers.push(markerStart);
var markerEnd = new google.maps.Marker({
position: poly.getPath().getAt(poly.getPath().getLength() - 1),
icon: end,
map: map,
zIndex: 200,
scale: 1
});
gmarkers.push(markerEnd);
var icons = this.setOptions({
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
strokeOpacity: 1,
strokeColor: "#000000",
strokeWeight: 2,
scale: 4
},
}]});
animateRoute(poly);
});
function animateRoute(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var icons = poly.get('icons');
icons[0].offset = (count / 2) + '%';
poly.set('icons', icons);
}, 60);
}
google.maps.event.addListener(poly, 'mouseout', function() {
removeMarkers();
});
// fit bounds to track
map.fitBounds(bounds);
}
});
}
function removeMarkers(){
for(i=0; i<gmarkers.length; i++){
gmarkers[i].setMap(null);
}
}
$(document).ready(function() {
var mapOptions = {
zoom: 17,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
loadGPXFileIntoGoogleMap(map, "cmsAdmin/uploads/blue_and_green_not_comfortable_.gpx","724","Example A","FFFF00");
loadGPXFileIntoGoogleMap(map, "cmsAdmin/uploads/taraweratrailrouterecce.gpx","431","Example B","4F4CBE");
});
Full working example:
https://www.wildthings.club/mapStack.php
Hover over the blue line and you'll see the animated dot.
Mouse off, and then after a few seconds hover again - a second dot will appear, and the first dot is still going.
Repeat and you'll soon have a bunch of jittery dots.
Ideally I'd like to remove all animated dots on mouseout.
Second option would be to not add a subsequent animated dot icon if there is already one on that polyLine (note there are multiple polyLines on the map).
Third option failing that would be to have the animated dot stop and remove once it reaches the end (position markerEnd) so at least it doesn't loop.
I have tried placing the icons into an array and then removing from there (like I have done with the gmarkers array and removeMarkers(), but no luck.
I also had a play with Animate google maps polyline but this just works with straight line point to point, rather than following a series of points from a GPX file.
Any help, most appreciated
Cheers

You should use the window.clearInterval() function to remove the interval you are using to animate the icon on the polyline. You should save the id when call window.setInterval() in animateRoute(). Here is a simple JSBin proof of concept adapted from the code on that website. In my code, I'm just simply using a global id variable, and updating that variable in animateRoute():
<!DOCTYPE html>
<html>
<head>
<title>Polyline path</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
height: 100%;
width: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var map;
var id;
var gmarkers = [];
var gmarkersicons = [];
function initMap() {
var mapOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: {lat: 9.291, lng: -157.821}
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var points = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var poly = new google.maps.Polyline({
path: points,
strokeColor: "red",
strokeOpacity: 1,
strokeWeight: 4,
recordNum: "test"
});
poly.setMap(map);
google.maps.event.addListener(poly, 'mouseover', function() {
var start = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#00ff00',
fillOpacity: 1,
strokeColor:'#000000',
strokeWeight: 4,
scale: 0.5
}
var end = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: 1,
strokeColor:'#000000',
strokeWeight: 4,
scale: 0.5
}
var go = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#000000',
fillOpacity: 1,
strokeColor:'#fff',
strokeWeight: 4,
scale: 0.5
}
var markerStart = new google.maps.Marker({
position: poly.getPath().getAt(0),
icon: start,
map: map,
zIndex: 200,
scale: 1
});
gmarkers.push(markerStart);
var markerEnd = new google.maps.Marker({
position: poly.getPath().getAt(poly.getPath().getLength() - 1),
icon: end,
map: map,
zIndex: 200,
scale: 1
});
gmarkers.push(markerEnd);
var icons = this.setOptions({
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
strokeOpacity: 1,
strokeColor: "#000000",
strokeWeight: 2,
scale: 4
},
}]});
this.setOptions({
strokeColor: "red",
scale: 1,
strokeWeight:15,
strokeOpacity:.6
});
var contentString = "Testing";
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, markerStart);
id = animateRoute(poly);
});
function animateRoute(line) {
var count = 0;
var id = window.setInterval(function() {
count = (count + 1) % 200;
var icons = poly.get('icons');
icons[0].offset = (count / 2) + '%';
poly.set('icons', icons);
}, 60);
return id;
}
google.maps.event.addListener(poly, 'mouseout', function() {
removeMarkers();
this.setOptions({strokeColor:"red",strokeWeight:4,strokeOpacity:1});
this.setOptions( { suppressMarkers: true } );
this.setOptions({
icons: [{}]});
window.clearInterval(id);
});
function removeMarkers(){
for(i=0; i<gmarkers.length; i++){
gmarkers[i].setMap(null);
}
}
}
$(document).ready(function() {
initMap();
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

Google Maps encoded polyline not showing as expected

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>

Get center of decodedpath google maps

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>

Why google map Polyline not showing (in Chrome)?

I use google map to show markers,
then I want to use polyline to link markers one by one.
but polyline doesn't showing.
my code as below:
$(document).ready(function (){
/*map initial*/
var mapOptions = {
...
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
/*draw markers*/
var tmp_user_location1 = new google.maps.LatLng(37.772,-122.214);
var tmp_marker1 = new google.maps.Marker({
position: tmp_user_location1,
map: map
});
var tmp_user_location2 = new google.maps.LatLng(21.291,-157.821);
var tmp_marker2 = new google.maps.Marker({
position: tmp_user_location2,
map: map
});
arr_markers.push(tmp_marker1);
arr_markers.push(tmp_marker2);
/*draw polyline*/
arr_user_location_polyline.push(tmp_user_location1);
arr_user_location_polyline.push(tmp_user_location2);
var user_location_path = new google.maps.Polyline({
paths: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
user_location_path.setMap(map);
}
screen capture picture
any one help?
thanks a lot.

The issue with your code is that a google.maps.PolylineOptions object doesn't have a paths property (a google.maps.Polygon does), it has a path property.
var user_location_path = new google.maps.Polyline({
path: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
If I fix that, and the javascript errors in the posted code:
Uncaught ReferenceError: arr_markers is not defined
Uncaught ReferenceError: arr_user_location_polyline is not defined
I get a polyline: proof of concept fiddle
code snippet:
$(document).ready(function() {
var arr_markers = [];
var arr_user_location_polyline = [];
/*map initial*/
var mapOptions = {
center: {
lat: 21.291,
lng: -157.821
},
zoom: 3
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
/*draw markers*/
var tmp_user_location1 = new google.maps.LatLng(37.772, -122.214);
var tmp_marker1 = new google.maps.Marker({
position: tmp_user_location1,
map: map
});
var tmp_user_location2 = new google.maps.LatLng(21.291, -157.821);
var tmp_marker2 = new google.maps.Marker({
position: tmp_user_location2,
map: map
});
arr_markers.push(tmp_marker1);
arr_markers.push(tmp_marker2);
/*draw polyline*/
arr_user_location_polyline.push(tmp_user_location1);
arr_user_location_polyline.push(tmp_user_location2);
var user_location_path = new google.maps.Polyline({
path: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
user_location_path.setMap(map);
});
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

Google maps api - Circle sector stop working

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