We Keep Coding

Google maps displaying just the state of PA - javascript

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>

Related

I'm trying to build a website where a user types in a city and venue and a bunch of venues load up with maps in each venue container. What happens is that only the markers show up and only the last venue on the list shows the actual map, the other map containers are blank.
Picture on what happens.
Code that I tried:
mapboxgl.accessToken = 'ACCESSTOKEN123';
let maps = {}, markers = {};
export function loadVenues(venues, container) {
container.innerHTML = "";
venues.forEach(venue => {
const {
name,
id,
lat,
lng
} = venue;
// ADDING VENUE
container.innerHTML += `
<div class="col">
<div class="venue" id="venue${id}">
<h3 class="card-title">${name}</h3>
<div class="map-content">
<div id=${id} class='venue-map'></div>
<button class="btn btn-secondary rounded-circle venue-point">
<img src="./style/images/icons8_next_page_100px.png" alt="">
</button>
</div>
</div>
</div>
`;
// MAKING MAP
maps = {
...maps,
["map" + id]: (new mapboxgl.Map({
container: id,
center: [lng, lat],
style: 'mapbox://styles/mapbox/dark-v10',
zoom: 15
}))
};
// MAKING MARKER
markers = {
...markers,
["marker" + id]: (new mapboxgl.Marker({
color: "#5B43EF",
})
.setLngLat([lng, lat])
.addTo(maps["map" + id]))
};
});
}

Do you have a JSFiddle or JSbin where you're testing this? If so, can you please post it here along with your question? It seems as though there may be an issue with your forEach loop.

I'm using ArcGis 4.8 Javascript library. and I'm stuck on one point. I'm creating map with US states' layers and want to show highlight when hover or click on any state on map. But unfortunately, I'm not able to found any way how we can achieve this.
Below is the code which I write.
<!DOCTYPE html>
<html>
<head>
<title>Hosted Feature layer</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
</head>
<body>
<!-- Main content -->
<section class="content pp-dashboard">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-12">
<div id="viewDiv" style="height: 800px;"></div>
<div id="searching">
<input type="text" name="name" id="searchInput">
<input type="submit" name="Search" id="searchBtn">
</div>
</div>
</div>
<!-- /.row -->
</section>
<script src="https://js.arcgis.com/4.8/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
], function(
Map, MapView, FeatureLayer, Legend, GraphicsLayer, Graphic, on, dom
) {
let tempGraphicsLayer = new GraphicsLayer();
var filteredGeometries;
var searchInput = dom.byId("searchInput");
var povLayer = new FeatureLayer({
url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_States_Generalized/FeatureServer/0",
outFields: ["*"]
});
var map = new Map({
basemap: "dark-gray",
layers: [povLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-99.244309, 40.004476],
zoom: 5
});
view.on('click', (event) => {
view.hitTest(event)
.then((res) => {
console.log("length",res.results);
if (res.results.length > 1) {
return
}
let clickedResultData = res['results'][0];
let stateCode = clickedResultData["graphic"]['attributes']['state_abbr'];
let stateName = clickedResultData["graphic"]['attributes']['state_name'];
console.log("clickedResultData", clickedResultData);
});
});
view.ui.add("searching", "bottom-right");
/******************************************************************
*
* Add layers to layerInfos on the legend
*
******************************************************************/
var legend = new Legend({
view: view,
layerInfos: [
{
layer: povLayer,
title: "Poverty in the southeast U.S."
}]
});
view.ui.add(legend, "top-right");
});
</script>
</body>
</html>
In my code, I'm using FeatureLayer to read US states from FeatureLayer url. and all the states are drawing something like this.
Now my requirement is that, when user click on any state on map then that state should highlight and when user click on another state then previous selected state should de-select and newly selected state should show highlight.

I found a way to show highlight state when hover/click on any state on map. Below is the full code.
<!DOCTYPE html>
<html>
<head>
<title>Hosted Feature layer</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
</head>
<body>
<!-- Main content -->
<section class="content pp-dashboard">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-12">
<div id="viewDiv" style="height: 800px;"></div>
<div id="searching">
<input type="text" name="name" id="searchInput">
<input type="submit" name="Search" id="searchBtn">
</div>
</div>
</div>
<!-- /.row -->
</section>
<script src="https://js.arcgis.com/4.8/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
], function(
Map, MapView, FeatureLayer, Legend, GraphicsLayer, Graphic, on, dom
) {
let highlight;
let tempGraphicsLayer = new GraphicsLayer();
var filteredGeometries;
var searchInput = dom.byId("searchInput");
var povLayer = new FeatureLayer({
url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_States_Generalized/FeatureServer/0",
outFields: ["*"]
});
var map = new Map({
basemap: "dark-gray",
layers: [povLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-99.244309, 40.004476],
zoom: 5
});
view.on("pointer-move", eventHandler);
view.on("pointer-down", eventHandler);
view.on("click", eventHandler);
function eventHandler(event) {
// the hitTest() checks to see if any graphics in the view
// intersect the given screen x, y coordinates
view.hitTest(event)
.then((res) => {
console.log("length",res.results);
if (res.results.length < 1) {
return
}
view.graphics.removeAll();
// create a new selected graphic
let selectedGraphic = new Graphic({
geometry: res.results[0].graphic.geometry,
attributes: res.results[0].graphic.attributes,
symbol: {
type: "simple-fill",
// style: "polygon",
color: "orange",
// size: "12px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 2 // points
}
}
});
// add the selected graphic to the view
// this graphic corresponds to the row that was clicked
view.graphics.add(selectedGraphic);
});
}
var legend = new Legend({
view: view,
layerInfos: [{
layer: povLayer,
title: "Poverty in the southeast U.S."
}]
});
view.ui.add(legend, "top-right");
});
</script>
</body>
</html>
I think this will help anyone.

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>
?

I'm trying to pass the longitude and latitude of a service to script that generates a google maps.
This is my code:
Blade
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize() {
var mapOptions = {
scaleControl: true,
center: new google.maps.LatLng({{$servicio->Longitud}}}, {{$servicio->Latitud}}},
zoom:18
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
map: map,
position: map.getCenter()
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="perfiles">
<legend>Detalle de servicio</legend>
<table class="table">
<tr><td>Numero de Orden</td><td>{{$servicio->idServicio}}</td></tr>
<tr><td>Cliente</td><td>{{$servicio->Cliente}}</td></tr>
<tr><td>Fecha Inicio</td><td>{{$servicio->Hora_Inicio}}</td></tr>
</table>
#if($servicio->Completado)
<div id="map-canvas" style="width:650px;height:300px;"></div>
<table>
<tr><td>{{HTML::image($servicio->RutaFoto1, '', array('width' => '300', 'height' => '300'))}}</td><td>{{HTML::image($servicio->RutaFoto2, '', array('width' => '300', 'height' => '300'))}}</td></tr>
<tr><td>{{HTML::image($servicio->RutaFoto3, '', array('width' => '300', 'height' => '300'))}}</td><td>{{HTML::image($servicio->RutaFoto4, '', array('width' => '300', 'height' => '300'))}}</td></tr>
</table>
#endif
Controller
public function doDetail($id){
$servicio = Servicio::find($id);
return View::make('detalleservicio', array('servicio' => $servicio));
}
The problem is that the script does not recognize the code laravel or php. How can I fix it?

Here you've got three }}} after Longitud and Latitud. I believe Longitud should be }} and Latitud should be }})
center: new google.maps.LatLng({{$servicio->Longitud}}}, {{$servicio->Latitud}}},
should be:
center: new google.maps.LatLng({{$servicio->Longitud}}, {{$servicio->Latitud}}),

You should either use double curly brackets {{ and }} or triple curly brackets {{{ and }}}. You shouldn't mix one with the other.
Instead of
center: new google.maps.LatLng({{$servicio->Longitud}}}, {{$servicio->Latitud}}},
you should do
center: new google.maps.LatLng({{$servicio->Longitud}}, {{$servicio->Latitud}},
If you were to use {{{ three curly brackets }}} instead of {{ two }} then your output will be escaped, the angular brackets will be converted to HTML entities.
You can read more about echoing data using Blade templating engine here: http://laravel.com/docs/templates#other-blade-control-structures

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.