We Keep Coding

Jquery : 'types' can only be used in a .ts file

I am working on Jquery project using Leaflet map . My project is getting data json coordinates for flights position . My code below is working fine , but the problem is l have repeat markers on map while data is updating . l did some steps to remove previous markers position then shows new markers position, but l have error 'types' can only be used in a .ts file.
markers repeated on map while data is updating
My code
$(document).ready(function () {
var heading ;
coords: L.Marker[]
var type ;
// map initializing
var coords = [33,44]; // the geographic center of our map
var zoomLevel = 6 // the map scale.
var map = L.map('map').setView(coords, zoomLevel);
L.tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png', {
attribution: 'Map data ©',
maxZoom: 18
}).addTo(map);
// Aircraft data
setInterval(function(){
$.ajax('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', {
type: 'GET',
dataType: 'jsonp',
timeout: 5000
}).done(function (data, textStatus, jqXHR) {
// Error is here ------------ under marker //
coords ? coords.forEach((marker:marker) => {
marker.remove();
}) : '';
coords = [];
Object.keys(data)
.map(key => data[key])
.map((position) => ({
lat: position[1],
lng: position[2],
callSign: position[13],
heading: position[3],
AircraftType: position[8]
})).filter(position => position.lat && position.lng && position.callSign
&& position.heading
&& position.AircraftType).forEach(i => {
console.log(i.lat, i.lng, i.heading)
coords.push( new L.Marker([i.lat, i.lng], {
icon: new L.DivIcon({
html: ` <div style="width:120px;";>
<div class="temp-${i.heading} ${type}"></div>
<span style="color:white;background-color: midnightblue;margin: 4px;padding: 4px;border-radius: 3px;">
${i.callSign}
</span
></div>`
})
}).addTo(marker))
})
},5000)
});

Looks like you are using a type here:
coords ? coords.forEach((marker:marker) => {
The first marker is your variable and the second one after the colon is the type used in TypeScrypt. Try removing the colon and the marker there.
coords ? coords.forEach((marker) => {

Google maps displaying just the state of PA

I am working with the javascript Google maps API and I am looking to restrict the viewing area of the map to only show PA. I currently have some kml data being used to display the county lines in PA. Now I just need to keep the user within the state of PA. How do I go about setting a restriction on the map in javascript?
I have looked up other posts regarding holes? Like cutting PA out of the map and the rest of the world is a polygon that gets its colored changed and then PA is still the main focus. I have no idea how to implement such a feature though. I am very new with working with Google Maps API.

get a source for the geographic coordinates for the state's boundaries (One source would be http://www.gadm.org).
Invert that polygon (example) and display it on a Google Maps Javascript API v3 map (note that KmlLayer doesn't seem to handle KML with holes, so the example uses a third party KML parser).
Restrict the map to the area of Pennsylvania
proof of concept fiddle
code snippet (state polygon simplified to fit):
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
minZoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(39.719429, -80.519562),
new google.maps.LatLng(42.267879, -74.690033));
google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
var geoxml = new geoXML3.parser({
map: map,
zoom: false,
suppressInfoWindows: true,
});
geoxml.parseKmlString(PAstr);
var lastCenter = bounds.getCenter();
var polygon = new google.maps.Polygon({
path: geoxml.docs[0].gpolygons[0].getPaths().getAt(1)
});
google.maps.event.addListener(map, 'center_changed', function() {
var center = map.getCenter();
if (!google.maps.geometry.poly.containsLocation(center, polygon)) {
map.setCenter(lastCenter);
} else {
lastCenter = center;
}
});
});
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var PAstr = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.2"><Document><name>United States divisions. Level 1</name><description><![CDATA[GADM boundaries.]]></description><Style id="14"><LineStyle><width>1.5</width><color>ff000000</color></LineStyle><PolyStyle><color>FF6E6E6E</color><fill>1</fill></PolyStyle></Style><Placemark><name>Pennsylvania</name><description><![CDATA[State]]></description><styleUrl>#14</styleUrl><visibility>1</visibility><MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>180,85 90,85 0,85 -90,85 -180,85 -180,0 -180,-85 -90,-85 0,-85 90,-85 180,-85 180,0 180,85</coordinates></LinearRing></outerBoundaryIs><innerBoundaryIs><LinearRing><coordinates>-79.7624969482421,42.2678794860841 -79.7633285522461,42.1857109069827 -79.7627868652343,42.0479621887208 -79.7625885009766,42.0206985473635 -79.7624206542968,41.9984512329102 -79.6110916137694,41.99813079834 -79.5225830078124,41.9979400634767 -79.2611694335937,41.9980888366699 -79.1505813598633,41.9985389709475 -79.0634460449219,41.9986991882325 -78.9991912841796,41.998649597168 -78.9788131713866,41.9985809326172 -78.9694213867187,41.998561859131 -78.9465789794921,41.9988212585449 -78.9441986083984,41.9988021850587 -78.922492980957,41.9987907409671 -78.7538909912109,41.9986915588379 -78.7409210205078,41.9986801147462 -78.6284790039062,41.9990615844728 -78.4834060668945,41.9995422363281 -78.3443069458007,41.9997291564943 -78.3060302734375,42.0001220703126 -78.2905731201172,41.9997901916504 -78.2265167236328,41.9998817443848 -78.2086181640624,41.9999809265137 -77.9942932128906,41.9989509582521 -77.9662170410156,41.9988098144534 -77.8686218261718,41.9989204406741 -77.7512664794922,41.9990386962892 -77.7030868530273,41.9990921020507 -77.688362121582,41.9991989135744 -77.6096191406249,41.9997901916504 -77.4394073486328,42.0010490417482 -77.1767425537108,42.000171661377 -77.113296508789,42.0009918212892 -76.965103149414,42.0023117065431 -76.9291076660156,42.0024108886719 -76.9095230102538,42.0024719238282 -76.8965530395507,42.0026092529297 -76.6476364135742,42.001880645752 -76.6334381103514,42.001720428467 -76.5963821411133,42.0013122558594 -76.5618438720703,42.000919342041 -76.55313873291,42.0008316040039 -76.5228729248046,42.0004920959474 -76.4660491943359,41.9998512268067 -76.3826065063476,41.9989204406741 -76.1466979980469,41.9991302490234 -76.1165161132812,41.9991607666016 -76.1060333251953,41.9990615844728 -75.8490295410156,41.9986610412598 -75.7614364624023,41.9986991882325 -75.6029205322266,41.9987716674805 -75.6015090942383,41.9987716674805 -75.5984268188477,41.998779296875 -75.4833908081054,41.9989700317383 -75.3545074462891,41.9991912841799 -75.3483428955078,41.9969100952151 -75.34464263916,41.9946403503418 -75.342788696289,41.9928207397461 -75.3403320312499,41.990089416504 -75.3398513793945,41.9870719909669 -75.3393020629882,41.9847908020022 -75.3391265869141,41.9825401306153 -75.3400497436523,41.9807090759277 -75.3406372070311,41.9798889160156 -75.3413391113281,41.9789199829102 -75.3422088623047,41.9769287109376 -75.3418579101562,41.9753417968751 -75.3410568237305,41.9741287231445 -75.339859008789,41.97274017334 -75.3385162353515,41.9714698791504 -75.3360366821288,41.9706497192384 -75.3342132568359,41.9697189331054 -75.3305130004882,41.9682807922364 -75.3248672485351,41.9647903442383 -75.3203277587889,41.9594917297364 -75.3184585571289,41.9573097229004 -75.3167572021484,41.9553413391113 -75.3143920898437,41.9521217346191 -75.3125839233398,41.9507293701172 -75.310188293457,41.9500885009766 -75.3083724975585,41.9494209289551 -75.3077163696288,41.9491806030273 -75.304588317871,41.9496917724609 -75.3027801513671,41.9505310058594 -75.3003082275391,41.9518890380862 -75.2979278564453,41.9528999328613 -75.2959823608398,41.9532508850098 -75.2941360473633,41.9532508850098 -75.2927932739258,41.9522094726562 -75.2922821044921,41.9514312744141 -75.2916107177733,41.9503707885744 -75.289207458496,41.9482421875001 -75.2855072021483,41.9450607299806 -75.2813873291015,41.9415702819827 -75.2787475585936,41.9391403198243 -75.2776336669922,41.9370803833009 -75.2766876220703,41.9342193603517 -75.2749633789062,41.9305496215821 -75.2750167846679,41.928279876709 -75.2745285034179,41.9246406555176 -75.2734222412109,41.920539855957 -75.2716598510742,41.917781829834 -75.2695770263671,41.9150619506837 -75.2677307128906,41.9123306274414 -75.2671966552733,41.9099311828613 -75.2670593261719,41.9072494506837 -75.2671432495117,41.9046096801758 -75.2677612304687,41.9027900695803 -75.2689971923828,41.9000701904298 -75.2708587646484,41.8982620239258 -75.272102355957,41.8964500427246 -75.2721099853516,41.8937187194824 -75.2706527709961,41.8914184570313 -75.2676696777343,41.8894805908203 -75.2671585083008,41.8892288208007 -75.2639770507812,41.8876686096191 -75.2622680664062,41.886890411377 -75.2609863281249,41.8848915100099 -75.2598571777343,41.881690979004 -75.2592773437499,41.8798713684083 -75.2587890624999,41.8782005310059 -75.2591857910155,41.8761901855469 -75.260513305664,41.8746719360352 -75.2617568969726,41.8733291625977 -75.2625198364257,41.8713111877444 -75.2622528076172,41.8687705993652 -75.2613525390624,41.8673210144044 -75.259147644043,41.8653297424316 -75.2574157714844,41.8646392822266 -75.2536239624023,41.8647804260254 -75.2505264282227,41.8651809692386 -75.2469329833984,41.8659706115725 -75.2445907592773,41.8662109375 -75.2426071166992,41.8664207458499 -75.2376861572266,41.8664093017578 -75.2357330322264,41.8653793334962 -75.2338638305664,41.8644905090333 -75.2334060668945,41.8641014099122 -75.2326965332031,41.8634986877444 -75.2309188842773,41.8623085021973 -75.2278366088867,41.860939025879 -75.2253799438477,41.8604888916016 -75.2229232788085,41.8613891601562 -75.2210159301757,41.86238861084 -75.2178878784179,41.8641510009768 -75.2154922485351,41.8668212890627 -75.2121887207031,41.8685989379884 -75.2116775512695,41.8687400817871 -75.2093276977539,41.8690795898438 -75.2066116333007,41.869400024414 -75.2060089111328,41.8694801330568 -75.2031631469727,41.8695106506348 -75.1974029541016,41.8683319091797 -75.193717956543,41.866970062256 -75.1913299560547,41.8655014038088 -75.1895294189453,41.8641014099122 -75.1876983642578,41.8636207580566 -75.1859283447265,41.8631210327148 -75.1833267211914,41.8638801574709 -75.1811370849609,41.865909576416 -75.1797409057617,41.8680992126466 -75.1787033081054,41.8697204589845 -75.1763229370116,41.8710594177246 -75.1741790771484,41.8717193603516 -75.1717071533203,41.871711730957 -75.1698989868163,41.87073135376 -75.1682815551757,41.8688201904296 -75.1678771972656,41.8659896850586 -75.1674270629882,41.8639793395996 -75.1674880981445,41.8617019653321 -75.1663131713867,41.857780456543 -75.1641082763671,41.8547821044922 -75.16153717041,41.8526992797852 -75.1584930419922,41.8517799377441 -75.1551666259766,41.8512992858887 -75.1511230468749,41.851718902588 -75.1502761840819,41.8518218994142 -75.1477661132812,41.8521194458008 -75.1436614990234,41.8528289794922 -75.1431121826171,41.8526802062989 -75.1409912109374,41.8521003723146 -75.1397628784179,41.8516502380372 -75.1381988525391,41.8508796691895 -75.1354293823242,41.8489799499512 -75.1321105957031,41.8476791381836 -75.1293106079102,41.8470802307131 -75.1259994506836,41.8465995788574 -75.1219177246093,41.8461494445801 -75.1182327270507,41.8452301025391 -75.1157684326172,41.844310760498 -75.1145401000977,41.8429489135742 -75.1144714355469,41.8411598205567 -75.1139068603515,41.8395614624026 -75.1140365600585,41.8359298706057 -75.1139907836914,41.8323020935058 -75.1142272949218,41.8297996520999 -75.1133270263672,41.8275489807129 -75.1118927001953,41.8254890441895 -75.1101303100585,41.8240509033205 -75.1087570190429,41.8229904174806 -75.1078567504883,41.8225402832031 -75.1059036254882,41.8217010498048 -75.1034774780273,41.8202896118166 -75.1004333496094,41.8193321228027 -75.0986175537109,41.8183784484863 -75.0962066650389,41.8165206909181 -75.094367980957,41.8160896301269 -75.0912933349609,41.8152198791504 -75.0907135009766,41.8151817321779 -75.0882568359374,41.8150100708009 -75.0857772827148,41.8154220581054 -75.0833206176757,41.8153686523439 -75.0808563232421,41.8153305053713 -75.077796936035,41.8148193359376 -75.0741424560546,41.813388824463 -75.0729370117186,41.8124504089357 -75.0724029541016,41.810619354248 -75.0722427368163,41.8087615966797 -75.0727081298828,41.8067588806152 -75.0731658935547,41.8056411743165 -75.0741195678711,41.8033218383791 -75.0752029418945,41.8006896972657 -75.0772171020507,41.7992401123047 -75.079116821289,41.7978591918946 -75.0796966552734,41.7974319458009 -75.0821533203124,41.7972412109376 -75.0827102661133,41.7971992492675 -75.0852432250975,41.7972412109376 -75.0857772827148,41.7971687316896 -75.0882720947265,41.7968406677246 -75.0914077758788,41.796112060547 -75.0932464599608,41.7952117919922 -75.0951080322266,41.7938499450684 -75.0969696044921,41.7920417785646 -75.0988311767578,41.7893218994141 -75.099639892578,41.7878494262696 -75.1000671386719,41.7870597839357 -75.101676940918,41.7830200195312 -75.1019668579102,41.7798004150392 -75.1013565063475,41.777069091797 -75.100227355957,41.7745094299316 -75.0971221923828,41.7720298767089 -75.0940093994139,41.7711486816409 -75.0897598266602,41.7714385986329 -75.0842132568359,41.7717895507814 -75.0792694091797,41.7721519470215 -75.0749664306641,41.7716102600099 -75.0700759887694,41.7706108093264 -75.0646286010742,41.7682418823243 -75.0614166259766,41.766040802002 -75.0586929321288,41.762218475342 -75.0560684204102,41.7582702636719 -75.0546874999999,41.7530708312989 -75.0537033081055,41.7478294372559 -75.0538482666015,41.7426109313966 -75.0539474487304,41.7389717102052 -75.0542373657226,41.735149383545 -75.0542526245116,41.730350494385 -75.0530624389648,41.7260589599612 -75.0519332885742,41.7226295471191 -75.0506362915039,41.7196998596192 -75.0500488281249,41.7165222167971 -75.0498580932616,41.7152786254882 -75.0511474609375,41.7134895324707 -75.0536270141602,41.7126312255859 -75.0567169189453,41.7122306823733 -75.0580978393555,41.7124595642091 -75.0592727661132,41.7126502990724 -75.0597610473632,41.7125816345215 -75.063606262207,41.7120208740237 -75.0659408569335,41.7116889953614 -75.0665969848633,41.7115097045898 -75.0679168701172,41.7093200683595 -75.0673294067383,41.7065887451172 -75.0648880004882,41.7038612365723 -75.0618286132812,41.7011184692384 -75.0590820312499,41.6977386474609 -75.0564880371094,41.6940803527832 -75.0561981201172,41.6935806274414 -75.0533981323242,41.6871910095215 -75.053337097168,41.6829299926758 -75.0535507202148,41.6808395385743 -75.0542068481445,41.6785812377932 -75.0561370849609,41.676342010498 -75.057746887207,41.6748390197754 -75.0587463378906,41.6729698181153 -75.0587997436523,41.6712989807132 -75.0571670532226,41.669719696045 -75.0553665161132,41.6674308776856 -75.0547790527343,41.6669197082521 -75.052848815918,41.6634101867678 -75.0517578124999,41.6608200073243 -75.0510711669921,41.6572189331057 -75.0504531860352,41.6529617309572 -75.050308227539,41.6494407653809 -75.0493621826171,41.6412506103517 -75.0487365722656,41.6344490051271 -75.0473098754883,41.6298599243164 -75.0462036132812,41.6262016296387 -75.0450973510741,41.6225509643556 -75.044563293457,41.620719909668 -75.0446166992186,41.6189002990723 -75.0465240478514,41.6171302795413 -75.0496063232422,41.6167297363281 -75.0520629882812,41.6167793273926 -75.0537490844726,41.6175689697267 -75.0568237304686,41.618480682373 -75.0588073730468,41.6169090270997 -75.0604858398438,41.6155700683594 -75.0603561401366,41.6133995056152 -75.0618133544922,41.611270904541 -75.0630111694335,41.6103286743165 -75.0652389526367,41.6099319458008 -75.068260192871,41.6103515625001 -75.0703659057616,41.6103591918948 -75.0728378295897,41.6090087890626 -75.0734558105469,41.6081008911133 -75.0728607177734,41.6053695678712 -75.0710372924804,41.603099822998 -75.0699462890624,41.6019592285157 -75.0679931640625,41.599910736084 -75.0644531249999,41.5961189270021 -75.0612716674804,41.5935287475587 -75.0582122802734,41.5921592712402 -75.0550079345702,41.5905685424805 -75.0524597167969,41.5877189636232 -75.0503692626953,41.5856819152831 -75.0472259521484,41.5821304321292 -75.0461273193359,41.5805091857913 -75.0429687499999,41.5748596191407 -75.0408172607422,41.5710296630861 -75.0388565063476,41.5699310302736 -75.0359497070312,41.5670890808108 -75.0326385498047,41.5656814575196 -75.0293807983398,41.5636405944825 -75.0246658325195,41.5598106384278 -75.0216369628905,41.5562515258789 -75.0191879272461,41.552978515625 -75.0175704956055,41.5498199462893 -75.0167770385742,41.5470695495608 -75.0174026489257,41.5447998046875 -75.0189361572265,41.543312072754 -75.0198287963867,41.5429191589357 -75.0215377807616,41.5417213439944 -75.0229568481445,41.5402908325198 -75.0227890014648,41.5377197265625 -75.0217590332031,41.5352897644044 -75.0199890136718,41.5335197448733 -75.017578125,41.5321121215821 -75.0133361816405,41.5306701660156 -75.0080032348633,41.5277519226074 -75.0055770874023,41.525489807129 -75.0035095214843,41.5229301452636 -75.0022430419921,41.5202293395997 -75.001609802246,41.518180847168 -75.0016632080078,41.5156898498535 -75.0022506713867,41.5145606994629 -75.0029067993163,41.5125198364259 -75.0042266845703,41.5105094909671 -75.0030364990233,41.5091514587403 -75.0025024414062,41.5086212158205 -74.999412536621,41.5081520080569 -74.9963302612304,41.508541107178 -74.991958618164,41.0772590637208 -74.9956970214843,41.076099395752 -74.9993362426758,41.0747184753418 -75.0023803710938,41.0728988647461 -75.0046005249023,41.0712203979494 -75.0061264038086,41.069839477539 -75.0039901733397,40.4113121032716 -75.0009689331055,40.4117393493652 -74.9982070922852,40.4120216369629 -74.9973373413086,40.4120216369629 -74.9956665039062,40.0347900390626 -74.996696472168,40.0338020324708 -75.0004806518555,40.031120300293 -75.0047912597656,40.0286598205568 -75.7875213623046,39.7230796813965 -76.0148086547852,39.7228012084962 -76.13916015625,39.7222785949708 -76.2241516113281,39.7219314575195 -76.8401412963867,39.7205390930176 -76.9962158203124,39.7196922302247 -76.9998092651367,39.7196807861328 -77.1211929321289,39.7194290161132 -77.2151565551757,39.7196121215821 -77.3926773071289,39.7199516296387 -77.4596481323242,39.7204093933106 -77.4674224853514,39.7204818725588 -77.6719360351562,39.7214889526368 -77.9380493164062,39.7240104675295 -78.1007080078125,39.7235412597659 -78.2101516723632,39.7232208251954-78.9146423339844,39.7231597900393 -79.0408172607422,39.7225494384766 -79.3213195800781,39.7221603393555 -79.3889007568359,39.7220687866212 -79.3900909423828,39.721950531006 -79.3912963867188,39.7220306396485 -79.9146881103516,39.7221107482912 -80.1911468505859,39.7216796875001 -80.4243698120117,39.7213516235352 -80.5170516967773,39.7212219238282 -80.5178604125977,39.7543106079103 -80.5192489624023,39.9298896789554 -80.5189361572266,40.1081695556641 -80.5188827514648,40.1618995666504 -80.5187301635742,40.2882804870608 -80.5189819335937,40.4013214111328 -80.2618408203124,42.0687103271484 -80.2473526000976,42.0776519775392 -80.2314605712889,42.0825309753419 -80.2185974121094,42.0859794616699 -80.1485519409179,42.130599975586 -80.1496505737305,42.1269416809083 -80.1514205932617,42.1246299743653 -80.1537933349609,42.1218605041504 -80.011848449707,42.1669502258303 -80.0039520263672,42.1711921691896 -79.7869415283203,42.2569999694825 -79.7752685546875,42.2603797912598 -79.7673492431641,42.2646102905273 -79.7624969482421,42.2678794860841</coordinates></LinearRing></innerBoundaryIs></Polygon></MultiGeometry></Placemark></Document></kml>';
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script>
function dummy() {}
window.dummy = dummy;
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=dummy"></script>
<div id="map_canvas"></div>

I cannot display google map markers

I cannot display google map markers on map. What's wrong? it is been a day :( Am I doing something wrong? please help It is really annoying and I am newbie to angular. I am able to display complete map but markers are not displayed :(
var appa = angular.module('appa',['firebase','uiGmapgoogle-maps']);
appa.controller('mainCtrl', function($firebaseObject,$scope) {
const rootRef = firebase.database().ref();
this.object = $firebaseObject(rootRef);
$scope.markers = [];
var mark =
{
lat: 51.2019053,
lng: 4.404418,
message: "I want to travel here!",
focus: true,
draggable: false
};
var marker = new google.maps.Marker(mark);
$scope.markers.push(marker);
console.log(mark);
$scope.map = {
center:
{
latitude: 51.219053, longitude: 4.404418 },
zoom: 14
};
});
<body ng-app="appa">
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom">
<marker>
<marker ng-repeat=" pos in markers" position="{{pos.lat}},{{pos.lng}}"></marker>
</ui-gmap-google-map>
</div>

Totally not an expert on this but ...
According to https://angular-ui.github.io/angular-google-maps/#!/api/marker should you use <ui-gmap-marker /> and not <marker /> and even if there is such a thing as <marker /> it looks like you have an open tag for marker with another open tag inside but this time close. I am referring to this part:
<marker>
<marker ng-repeat=" pos in markers" position="{{pos.lat}},{{pos.lng}}"></marker>
should't this be just:
<marker ng-repeat=" pos in markers" position="{{pos.lat}},{{pos.lng}}"></marker>
or according to the docs:
<ui-gmap-marker
idKey='{expression}'
coords='{expression}'
click='{expression}'
options='{expression}'
events='{expression}'
control='{expression}'
>
</ui-gmap-marker>
?

How to set jQuery variable as a django template variable

I'm using a jQuery script inside of a Django template in order to render a Google Map. The goal is to plot multiple markers on the map. I've tried two things:
Set the jQuery var to a Django template variable, which I defined as a list in views.py. Was not able to produce any markers in this case. Just a blank map.
var markers = {{ marker_list }};
I printed marker_list on the page to confirm, which was this in my last test: marker_list = [['Chiang Mai Park', 21.0333, 21.0333], ['Ho Chi Minh Mausoleum', 21.036666667, 21.036666667]]
Make a for loop with template tags inside the jQuery script, and build the list with template variables. With this, only one marker will plot, even if there are multiple locations in the list (see marker_list above).
{% for instance in queryset %}
var markers = [
[{{ instance.place_id }}, {{ instance.place_lat }}, {{ instance.place_long }}]
];
{% endfor %}
Full code is below showing attempt #2. Note that "var markers" in the javascript requires a list of a lists. i.e. var markers = [[name1, latitude1, longitude1], [name2, latitude2, longitude2]].
Any help would be much appreciated. I'm both a Django and Javascript n00b.
views.py
def places_map(request):
if request.user.is_authenticated():
queryset = AddLink.objects.filter(user=request.user)
marker_list = []
for instance in queryset:
name = str(instance.location)
latitude = float(instance.place_lat)
longitude = float(instance.place_lat)
marker_list += [[name, latitude, longitude]]
context = {
"queryset": queryset,
"marker_list": marker_list
}
return render(request, "places_map.html", context)
else:
raise Http404("You must be logged in to view places.")
places_map.html
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% load staticfiles %}
<style>
{% block style %}
#map_wrapper {
height: 400px;
}
#map_canvas {
width: 100%;
height: 100%;
}
{% endblock style %}
</style>
{% block content %}
<div class='row' align='center'>
<h1 id="places-title">Map</h1>
{% if queryset %}
<!-- removed -->
{% endif %}
</div>
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
<!-- For testing -->
{{ marker_list }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
// Script from http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
{% for instance in queryset %}
var markers = [
// ['London Eye, London', 51.503454,-0.119562],
// ['Palace of Westminster, London', 51.499633,-0.124755],
// ['Ministry of Sound', 51.498231,-0.118468],
[{{ instance.place_id }}, {{ instance.place_lat }}, {{ instance.place_long }}]
];
{% endfor %}
// Info Window Content
var infoWindowContent = [
['<div class="info_content">' +
'<h3>London Eye</h3>' +
'<p>The London Eye is a giant...</p>' + '</div>'],
['<div class="info_content">' +
'<h3>Palace of Westminster</h3>' +
'<p>The Palace of Westminster is the...</p>' +
'</div>'],
['<div class="info_content">' +
'<h3>Ministry of Sound</h3>' +
'<p>Nice place.</p>' +
'</div>']
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2], markers[i][3]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
</script>
{% endblock content %}

You should use JSON for this.
context = {
"queryset": queryset,
"marker_list": json.dumps(marker_list)
}
and in your template, use the safe filter so Django doesn't escape the symbols:
var markers = {{ marker_list|safe }}

By doing {{ marker_list }} you just end up with a string which is obviously no good, the solution I normally go with is to define a blank array and then append to it
var markers = [];
{% for instance in queryset %}
markers.append([{{ instance.place_id }}, {{ instance.place_lat }}, {{ instance.place_long }}]);
{% endfor %}
Of course you could just close the array after the for loop, this can produce a jslint error although it should work just as well.
var markers = [
{% for instance in queryset %}
[{{ instance.place_id }}, {{ instance.place_lat }}, {{ instance.place_long }}],
{% endfor %}
];

Google Map not showing in Modal popup

The modal pop up when you click 'View Map' next to the postcode on this page here isn't displaying the map.
I had this working earlier, but can't seem to make it work in a different location even though the code is the same.
Here's the html/jscript:
<ul class="contact address clearfix">
<li><a href='#myModal' role='button' data-toggle='modal'>View Map</a></li>
</ul>
<!-- Map Modal -->
<div id="myModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Map and Directions</h3>
</div>
<div class="modal-body">
<div id='map-canvas'></div>
</div>
<div class="modal-footer"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?q=London&key=AIzaSyBaPEDyFbbnWjtvT8W3UBOM34Y7g6vK69A&sensor=false"></script>
<script type="text/javascript">
var map;
var marker = null;
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var geolocate = function(address, callback) {
$.ajax({
url: "http://maps.googleapis.com/maps/api/geocode/json",
data: {
"sensor": true,
"address": address
},
dataType: "json",
success: function(d) {
if (d.status == "ZERO_RESULTS") callback(false);
if (d.results && d.results[0] && d.results[0].geometry) {
callback({
"ne": d.results[0].geometry.bounds.northeast,
"sw": d.results[0].geometry.bounds.southwest,
"center": d.results[0].geometry.location
});
}
else callback(false);
}
});
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
geolocate("<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>", function(c) {
if(marker == null) {
marker = new google.maps.Marker({
map: map,
clickable: false //remove if you want it clickable
});
}
marker.setPosition(new google.maps.LatLng(c.center.lat, c.center.lng));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$('#myModal').on('shown', function () {
google.maps.event.trigger(map, 'resize');
map.setCenter(marker.getPosition()); //Center on your marker or replace it if you want to center it elsewhere
});
</script>
<!-- End Map Modal -->
Any ideas appreciated

You are getting the following error in console:
Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors.
This means that you have included the api more than once, maybe in the main page and then in the modal? try removing one of the instances you have loaded and check if that solves your problem.