We Keep Coding

How do I generate several different MapBox maps

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 want to access database from google maps API to show Markers as per database longitude latitude value

var demoCtrl = this;
NgMap.getMap().then(function(map) {
demoCtrl.map = map;
});
demoCtrl.stores = {
foo: { position:[41, -87]},
bar:{ position:[41, -83]}
};
demoCtrl.showStore = function(evt, storeId) {
demoCtrl.store = demoCtrl.stores[storeId];
demoCtrl.map.showInfoWindow('foo', this);
};
demoCtrl.mouseover = function() {
console.log('mouseover');
};
above is the code of javascript for google maps api
<info-window id="foo" on-mouseover="demoCtrl.mouseover()">
<div ng-non-bindable="">
Lat: {{anchor.getPosition().lat()}}<br/>
Lng: {{anchor.getPosition().lng()}}<br/>
<ul>
<li ng-repeat='item in demoCtrl.store.items'>{{item}}</li>
</ul>
</div>
</info-window>
<marker ng-repeat="(id, store) in demoCtrl.stores" id="{{id}}"
position="{{store.position}}"
on-click="demoCtrl.showStore(event, id)"></marker>
<info-window id="bar" on-mouseover="demoCtrl.mouseover()">
<div ng-non-bindable="">
Lat: {{anchor.getPosition().lat()}}<br/>
Lng: {{anchor.getPosition().lng()}}<br/>
</div>
</info-window>
<marker position="41, -79" on-click="demoCtrl.map.showInfoWindow('bar')" />
Here i want my custom value of longitude and latitude from my database i am getting value from database but i am unable to show it on Map can anyone help how to get value on Map.

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>

How to call a PHP variable from JavaScript in laravel?

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

Hide/Show Google Maps markers based on category with checkbox's

I've searched thoroughly and spent two full working days on this, so far I can't find a scenario that matches mine specifically. I'm learning on the fly here, ok here goes...
I'm using the google maps api v3. I have 12 pub locations (markers) on the map. Above the map I have checkbox's defining categories, 1 pub may fit under numerous categories. I want to show only the pub within the particular category on a checkbox click and hide the remaining.
I've tried numerous solutions to no avail, i've stripped it back to the bare minimum for new eyes. Thanks for your time.
Live link: http://xii.com.au/pubmap
Javascript:
var infowindow = null;
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(-37.854000, 144.900432);
var myOptions = {
zoom: 14,
minZoom: 12,
maxZoom: 20,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:[{
featureType:"poi",
elementType:"labels",
stylers:[{
visibility:"off" /* Hide POI */
}]
}]
}
var map = new google.maps.Map(document.getElementById("googlemap"), myOptions);
setMarkers(map, sites);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var sites = [
['Customs House Hotel', -37.86314,144.904012, 9, '<a class="orange" href="#">Customs House Hotel</a><p>Williamstown</p><p><img src="img/stars_25.png" /></p>'],
['Juntions Beer Hall & Wine Bar', -37.843199,144.883992, 1, '<a class="orange" href="#">Juntions Beer Hall & Wine Bar</a><p>Newport</p><p><img src="img/stars_45.png" /></p>'],
['Morning Star Hotel', -37.86426,144.899121, 11, '<a class="orange" href="#">Morning Star Hotel</a><p>Williamstown</p><p><img src="img/stars_35.png" /></p>'],
['Pirates Tavern', -37.862818,144.907381, 8, '<a class="orange" href="#">Pirates Tavern</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>'],
['Prince Albert Hotel', -37.853337,144.896165, 2, '<a class="orange" href="#">Prince Albert Hotel</a><p>Williamstown</p><p><img src="img/stars_4.png" /></p>'],
['Rifle Club Hotel', -37.858244,144.888843, 4, '<a class="orange" href="#">Rifle Club Hotel</a><p>Williamstown</p><p><img src="img/stars_25.png" /></p>'],
['Rose of Australia Hotel', -37.85892,144.899105, 6, '<a class="orange" href="#">Rose of Australia Hotel</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>'],
['Stags Head Hotel', -37.8661,144.906562, 12, '<a class="orange" href="#">Stags Head Hotel</a><p>Williamstown</p><p><img src="img/stars_35.png" /></p>'],
['Steam Packet Hotel', -37.863519,144.90268, 10, '<a class="orange" href="#">Steam Packet Hotel</a><p>Williamstown</p><p><img src="img/stars_4.png" /></p>'],
['Victoria Inn', -37.85676,144.897547, 3, '<a class="orange" href="#">Victoria Inn</a><p>Williamstown</p><p><img src="img/stars_25.png" /></p>'],
['Williamstown RSL', -37.858342,144.894213, 5, '<a class="orange" href="#">Williamstown RSL</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>'],
['Yacht Club Hotel', -37.862191,144.902608, 7, '<a class="orange" href="#">Yacht Club Hotel</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>']
];
function setMarkers(map, markers) {
var image = {
url: 'img/pin.png',
size: new google.maps.Size(33, 41),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 41),
};
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: image,
title: sites[0],
zIndex: sites[3],
html: sites[4],
});
var contentString = "";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
HTML
<h1>Pubs</h1>
<div class="subhead">
<div class="tags">
<ul>
<li class="current"><label><input type="checkbox" name="filter" id="all"> All </label></li>
<li><label><input type="checkbox" name="filter" id="craft-beer"> Craft Beer </label></li>
<li><label><input type="checkbox" name="filter" id="beer-garden"> Beer Garden </label></li>
<li><label><input type="checkbox" name="filter" id="night-club"> Night Club </label></li>
<li><label><input type="checkbox" name="filter" id="quiz-night"> Quiz Night </label></li>
<li><label><input type="checkbox" name="filter" id="steak-night"> Steak Night </label></li>
<li><label><input type="checkbox" name="filter" id="parma-night"> Parma Night </label></li>
<li><label><input type="checkbox" name="filter" id="tab"> TAB </label></li>
<li><label><input type="checkbox" name="filter" id="live-sport"> Live Sport </label></li>
<li><label><input type="checkbox" name="filter" id="live-music"> Live Music</label></li>
</ul>
</div>
</div>
</header>
<div id="googlemap"></div>

I've put together a fiddle that demonstrates how to set this up, but overview: store references to your markers in an array, and then when the checkboxes are clicked, run through your list of pubs and show or hide the markers depending on whether they match.
The critical bit is in the for loop where you create your arrays. Here's a modified version that will set things up:
markerobj = [];
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
markerobj[i] = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: image,
title: sites[0],
zIndex: sites[3],
html: sites[4],
});
var contentString = "";
google.maps.event.addListener(markerobj[i], "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
And then the handler to filter them when the checkboxes are changed:
$('.tags').on('change', 'input[type="checkbox"]', function () {
filter = $(this).val();
for (i = 0; i < sites.length; i++) {
//Test to see if the entry matches, for now we'll just make it random to illustrate the concept
//e.g. if(filter in sites[i].attrs)
if(Math.random() < 0.5) {
markerobj[i].setVisible(true);
} else {
markerobj[i].setVisible(false);
}
}
});
That code will just randomly pick about half of the markers to show, just to demonstrate that it is indeed hiding and showing things. You'll have to put some actual logic in there in place of the Math.random(), probably checking the filter against something in the entry for that marker. The important bit is that now you have a list of the Marker objects that are mapped to the same indexes as your sites, so you can alter the Markers on the map based on information in the sites array.
In order to filter things, somewhere (probably in the sites array) you're going to have to list which attributes the pub fulfills that you can check against. Supporting filtering by multiple attributes will require some additional checking (when any checkbox is changed, you'll need to pull the values of all the checkboxes and check each item against all of them), but this example should get you back on track.
Other notes: you'll have to declare markerobj as a global variable like the sites array, so you can get to it from the callback. I would recommend using the value of the checkbox to store what it's filtering for, rather than the id - my code above assumes that the value of the checkbox is the filter.