Google maps v3 zoom to GroundOverlay after load - google-maps

Hi I am trying to load image on google maps. Here is what I get:
red square - what I see.
green square - what I want to see. I want to zoom to green square after map loads, but I cant manage to do that, any help?
Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 400px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90,-180),
new google.maps.LatLng(90,180));
var oldmap = new google.maps.GroundOverlay("http://www.dxatlas.com/HamCap/3Y0X/20UT-21MHz.gif", imageBounds);
oldmap.setMap(map);
oldmap.setOptions({opacity: 0.5});
map.fitBounds(imageBounds);
</script>
</body>
</html>
I want to zoom to overlay layer that map would look nice like green square shows, it looks like "map.fitBounds(imageBounds);" doesnt work...
Any ideas?

This may be the nature of Google Maps v3; bounding extent is out of range at -180 to 180, modifying longitude to 179.9999. Ensuring image bounds is within Google Maps global extent may solve problem.
http://jsfiddle.net/wptc/cPcMC/
Some code demonstrates the issue:
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 95%; height: 400px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(30, -97),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var viewportBox;
google.maps.event.addListener(map, 'idle', function(event) {
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90,-179.999),
new google.maps.LatLng(90,180));
var oldmap = new google.maps.GroundOverlay("http://www.dxatlas.com/HamCap/3Y0X/20UT-21MHz.gif", imageBounds);
oldmap.setMap(map);
oldmap.setOptions({opacity: 0.5});
map.fitBounds(imageBounds);
var bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var viewportPoints = [
ne, new google.maps.LatLng(ne.lat(), sw.lng()),
sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
];
if (viewportBox) {
viewportBox.setPath(viewportPoints);
} else {
viewportBox = new google.maps.Polygon({
path: viewportPoints,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 1
});
viewportBox.setMap(map);
};
var info = document.getElementById('info');
info.innerHTML = 'NorthEast: ' + ne.lat() + ' ' + ne.lng() +
'<br />' + 'SouthWest: ' + sw.lat() + ' ' + sw.lng();
});
</script>
</body>
<div id='info'></div>
</html>​

Related

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>

Google Maps GroundOverlay

I am attempting to get a Google maps GroundOverlay working without luck. Searched everywhere, read the Google reference documentation, still no lucK.
What I have attempted can be seen at:
http://www.ryecemetery.com.au/locate.html
Very basic code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_SJakjgkzjvWoMu7T-DqsUDWUEbfUtTA"></script>
</head>
<body>
<div style="width: 1200px; height: 800px" id="map-canvas"></div>
<script>
var historicalOverlay;
var myLatlng = new google.maps.LatLng(-38.374058,144.822763);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 18,
center: myLatlng
});
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-38.374615, 144.823766),
new google.maps.LatLng(-38.373628, 144.821631)
);
historicalOverlay = new google.maps.GroundOverlay(
'http://www.ryecemetery.com.au/images/layout-06a.jpg',
imageBounds);
historicalOverlay.setMap(map);
</script>
</body>
</html>
You can see that some sort of overlay is placed on the map. I believe I have the sw, ne latlng correct. If I check on Google maps by right clicking and choosing "whats here" those are the latlng that is given.
I have the overlay in png, gif and jpeg. With the png and gif I get nothing to appear.
Where have I gone wrong?
thanks
Ken
Your bounds is wrong for your groundOverlay.
according to the documentation for the constructor for a google.maps.LatLngBounds object:
Constructor
LatLngBounds(sw?:LatLng, ne?:LatLng) Constructs a rectangle from the points at its south-west and north-east corners.
The arguments should be SW, NE. Your arguments are SE, NW. Your code:
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-38.374615, 144.823766), //SE
new google.maps.LatLng(-38.373628, 144.821631) //NW
);
If I swap the longitudes between the two points it works:
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-38.374615, 144.821631), //SW
new google.maps.LatLng(-38.373628, 144.823766) //NE
);
proof of concept fiddle
code snippet:
var historicalOverlay;
var myLatlng = new google.maps.LatLng(-38.374058, 144.822763);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 18,
center: myLatlng
});
var markerNW = new google.maps.Marker({
position: new google.maps.LatLng(-38.374615, 144.823766),
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
},
title: "SW"
});
var markerSE = new google.maps.Marker({
position: new google.maps.LatLng(-38.373628, 144.821631),
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
},
title: "NE"
});
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-38.374615, 144.821631),
new google.maps.LatLng(-38.373628, 144.823766));
historicalOverlay = new google.maps.GroundOverlay(
'http://www.ryecemetery.com.au/images/layout-06a.jpg',
imageBounds);
historicalOverlay.setMap(map);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

Google Maps will not show inside my div id="map"

I am following a tutorial that can locate a friend (their mobile) and pinpoint them on a Google map. All was going well including getting my coordinates and printing them to screen and putting them inside my <div id="location"></div> but now I am trying to take those coords and mark them on a map but I cant get the map to show. I'm sure my functions are set up wrong somehow but I can't work it out. Any clues?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/jquery.ui.map.js"></script>
<script>
$(document).ready(function(){
navigator.geolocation.getCurrentPosition(useposition);
});
</script>
<script>
function useposition(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
$("#location").html('Lat: ' + lat + '<br />Lon: ' + lon);
};
function deviceposition(position){
$("#map").gmap({'center': deviceposition, 'zoom': 12, 'disableDefaultUI': true, 'mapTypeId': 'terrain'}).bind('init', function(ev, map) { themap = map;});
$('#map').gmap('addMarker', { 'id': 'client', 'position': deviceposition, 'bounds': true
});
}
</script>
</head>
<body>
<div id="location"></div>
<div id="map" style="width:400px; height:400px"></div>
<!-- This is supposed to be filled with the Google Map coords -->
</body>
</html>
I have tried passing div in CreateElement() method and then assigning the values to a variable mapcanvas. This whole declaration is inside a method which is called in this particular line:
navigator.geolocation.getCurrentPosition(success);
I am sharing the whole code..
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '600px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
Hope this would help!!!

X marks along the direction

I have never worked with Google maps API.
For the school project I am working on; I need to get a direction between two locations (this is easy part and I think I can do this),
However I also need to put an X mark; at every 10 miles along the way.
Is this even possible?
Thank You.
Ok, here's a working solution that draws markers every 200 miles (I was working on big distances to check it worked on geodesic curved lines, which it does). To make this work for you, just change all the coordinates, and change 200 to 10
<!DOCTYPE html>
<html>
<head>
<title>lines with markers every x miles</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!--- need to load the geometry library for calculating distances, see http://www.svennerberg.com/2011/04/calculating-distances-and-areas-in-google-maps-api-3/ --->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var startLatlng = new google.maps.LatLng(54.42838,-2.9623);
var endLatLng = new google.maps.LatLng(52.908902,49.716793);
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(51.399206,18.457031),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var startMarker = new google.maps.Marker({
position: startLatlng,
map: map
});
var endMarker = new google.maps.Marker({
position: endLatLng,
map: map
});
// draw a line between the points
var line = new google.maps.Polyline({
path: [startLatlng, endLatLng],
strokeColor: "##FF0000",
strokeOpacity: 0.5,
strokeWeight: 4,
geodesic: true,
map: map
});
// what's the distance between these two markers?
var distance = google.maps.geometry.spherical.computeDistanceBetween(
startLatlng,
endLatLng
);
// 200 miles in meters
var markerDistance = 200 * 1609.344;
var drawMarkers = true;
var newLatLng = startLatlng;
// stop as soon as we've gone beyond the end point
while (drawMarkers == true) {
// what's the 'heading' between them?
var heading = google.maps.geometry.spherical.computeHeading(
newLatLng,
endLatLng
);
// get the latlng X miles from the starting point along this heading
var newLatLng = google.maps.geometry.spherical.computeOffset(
newLatLng,
markerDistance,
heading
);
// draw a marker
var newMarker = new google.maps.Marker({
position: newLatLng,
map: map
});
// calculate the distance between our new marker and the end marker
var newDistance = google.maps.geometry.spherical.computeDistanceBetween(
newLatLng,
endLatLng
);
if (newDistance <= markerDistance) {
drawMarkers = false;
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>

Google Maps v3 getBounds is extending beyond what is visible on the map

For some reason the getBounds() function for Google Maps v3 seems to be extending much further than what the map is actually showing. Correct me if I'm wrong, but shouldn't it return the NE (top right corner) and SW (bottom left corner) latitude and longitude coordinates for the very corners of what's being shown in the current view?
I'm returning search results (which are mapped by a lat and lng) that are between these coordinates and am being returned results much further outside the area returned by getBounds(). Any ideas about what could be going on here?
Just FYI, I'm getting the bounds on the map's idle event:
google.maps.event.addListener(map, 'idle', function() {
var bounds = map.getBounds();
var NE = bounds.getNorthEast();
var SW = bounds.getSouthWest();
...and using .lat() and .lng() to get the coordinates from the respective corners. Then I feed that to a SQL query that checks for results between those coordinates. Results are in the general area but can fall far outside what's actually being shown on the map.
Any ideas are appreciated! Thanks!
Correct, the map.getBounds() will return the bounds of the viewable area, as shown in the example below. In this example, a red Polyline box is drawn using the points of map.getBounds() when the idle event fires.
Your SQL query might not be returning the results you are looking for, and may need looked at again.
<!DOCTYPE html>
<html>
<head>
<title>Bounds Box</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(30.405865,-87.283362);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var viewportBox;
google.maps.event.addListener(map, 'idle', function(event) {
var bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var viewportPoints = [
ne, new google.maps.LatLng(ne.lat(), sw.lng()),
sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
];
/*strokeOpacity = 0 , if don't want to show the border moving. */
if (viewportBox) {
viewportBox.setPath(viewportPoints);
} else {
viewportBox = new google.maps.Polyline({
path: viewportPoints,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 4
});
viewportBox.setMap(map);
};
var info = document.getElementById('info');
info.innerHTML = 'NorthEast: ' + ne.lat() + ' ' + ne.lng() +
'<br />' + 'SouthWest: ' + sw.lat() + ' ' + sw.lng();
});
};
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:500px"></div>
<div id="info"></div>
</body>
</html>