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>
Related
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 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>
So I am trying to draw multiple separated polylines on google map.
So far I don't have so much:
<script>
var center = new google.maps.LatLng(51.97559, 4.12565);
var map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({
map: map
});
var bounds = new google.maps.LatLngBounds();
// start coordinates
var start = ['51.97559, 4.12565',
'55.46242, 8.43872',
'49.49259, 0.1065',
'50.36862, -4.13412']
// end coordinates
var end = ['51.94784, 1.2539',
'51.74784, 1.2539',
'50.79726, -1.11048',
'43.45846, -3.80685']
function initialize() {
for (var i=0; i < end.length; i++){
calcRoute(start[i], end [i]);
}
}
function calcRoute(source,destination){
var polyline = new google.maps.Polyline({
path: [],
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
</script>
I found here an interesting example, but it has DirectionsTravelMode, and I want only a straight line between two points.
So in my example I would like to have 4 not connected straight lines drawn on the map.
a google.maps.LatLng object is two numbers; or a google.maps.LatLngLiteral is a javascript object with a lat and a lng property, neither is a string.
for (var i=0; i < end.length; i++){
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
calcRoute(startPt, endPt);
bounds.extend(startPt);
bounds.extend(endPt);
}
map.fitBounds(bounds);
you need to add those to the polyline's path:
function calcRoute(source,destination){
var polyline = new google.maps.Polyline({
path: [source, destination],
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
proof of concept fiddle
code snippet:
var map;
function initialize() {
var center = new google.maps.LatLng(51.97559, 4.12565);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({});
var bounds = new google.maps.LatLngBounds();
// start coordinates
var start = ['51.97559, 4.12565',
'55.46242, 8.43872',
'49.49259, 0.1065',
'50.36862, -4.13412'
]
// end coordinates
var end = ['51.94784, 1.2539',
'51.74784, 1.2539',
'50.79726, -1.11048',
'43.45846, -3.80685'
]
for (var i = 0; i < end.length; i++) {
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0], startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0], endCoords[1]);
calcRoute(startPt, endPt);
bounds.extend(startPt);
bounds.extend(endPt);
}
map.fitBounds(bounds);
}
function calcRoute(source, destination) {
var polyline = new google.maps.Polyline({
path: [source, destination],
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
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>
Nice answer by geocodezip !
A small improvement, instead of adding many polyline elements to your map (which could later require you to keep track of them & iterate over all of them in order to remove or change them), you can put all paths in one Polygon object.
working fiddle: http://jsfiddle.net/syoels/hyh81jfz/1/
(i took geocodezip's fiddle and made small changes)
var geocoder;
var map;
function initialize() {
var center = new google.maps.LatLng(51.97559, 4.12565);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
// start coordinates
var start = ['51.97559, 4.12565',
'55.46242, 8.43872',
'49.49259, 0.1065',
'50.36862, -4.13412'
];
// end coordinates
var end = ['51.94784, 1.2539',
'51.74784, 1.2539',
'50.79726, -1.11048',
'43.45846, -3.80685'
];
var paths = [];
for (var i = 0; i < end.length; i++) {
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0], startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0], endCoords[1]);
paths.push([startPt, endPt]);
bounds.extend(startPt);
bounds.extend(endPt);
}
map.fitBounds(bounds);
var polyline = new google.maps.Polygon({
paths: paths,
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
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?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map"></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"
I'm trying to create a Google Map that will display multiple geodesic lines originating from one marker to 2 or more separate markers on the map. I'm able to place my multiple markers on the map but I'm having problems figuring out how to have 2 or more paths go from one marker on the map. Currently this is how it's displaying
Here's my edited script for the map
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script type="text/javascript">
var geodesicPoly1;
var geodesicPoly2;
var marker1;
var marker2;
var marker3;
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(39.0997, -94.5786),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
marker1 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(33.7490, -84.3880)
});
marker2 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(33.4484, -112.0740)
});
marker3 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(37.9577, -121.2908)
});
var geodesicOptions = {
strokeColor: '#77bf44',
strokeOpacity: 1.0,
strokeWeight: 3,
geodesic: true,
map: map
};
geodesicPoly1 = new google.maps.Polyline(geodesicOptions);
update();
geodesicPoly2 = new google.maps.Polyline(geodesicOptions);
update2();
}
function update() {
var path = [marker1.getPosition(), marker2.getPosition()];
geodesicPoly1.setPath(path);
var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
document.getElementById('heading').value = heading;
document.getElementById('origin').value = path[0].toString();
document.getElementById('destination').value = path[1].toString();
}
function update2() {
var path = [marker1.getPosition(), marker3.getPosition()];
geodesicPoly2.setPath(path);
var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
document.getElementId('heading').value = heading;
document.getElementId('origin').value = path[0].toString();
document.getElementId('destination').value = path[1].toString();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
A Polyline can only draw between two points. You need to create more than one Polyline variable.
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script type="text/javascript">
var geodesicPoly1;
var geodesicPoly2;
var marker1;
var marker2;
var marker3;
var heading = "cat";
var map;
function initialize()
{
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(39.0997, -94.5786),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
marker1 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(33.7490, -84.3880)
});
marker2 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(33.4484, -112.0740)
});
marker3 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(37.9577, -121.2908)
});
var geodesicOptions = {
strokeColor: '#77bf44',
strokeOpacity: 1.0,
strokeWeight: 3,
geodesic: true,
map: map
};
geodesicPoly1 = new google.maps.Polyline(geodesicOptions);
geodesicPoly2 = new google.maps.Polyline(geodesicOptions);
update();
update2();
}
function update() {
var path = [marker1.getPosition(), marker2.getPosition()];
geodesicPoly1.setPath(path);
var heading = google.maps.geometry.spherical.computeHeading(path[0],
path[1]);
document.getElementById('heading').value = heading;
document.getElementById('origin').value = path[0].toString();
document.getElementById('destination').value = path[1].toString();
}
function update2() {
var path2 = [marker1.getPosition(), marker3.getPosition()];
geodesicPoly2.setPath(path2);
var heading2 = google.maps.geometry.spherical.computeHeading(path2[0],
path2[1]);
document.getElementById('heading').value = heading;
document.getElementById('origin').value = path2[0].toString();
document.getElementById('destination').value = path2[1].toString();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body >
<div id="map_canvas" style='height:500px; width:800px;'></div>
<div id='heading'></div>
<div id='origin'></div>
<div id='destination'></div>
</body>
</html>