Google Map not showing in Modal popup - javascript

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.

Related

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.

ArcGIS 4.8 JS: State is not showing selected when hover or click

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.

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

Google Map Marker and nested JSON to show data in Map Infowindow

I am using Google Map to show some places and users in it via the info window.
Google Map Script:
<script>
var markers = [
['<p>New York</p> <p>More information</p>', 40.769090, -74.002740],
['<p>Washington, Finland</p> <p>More information</p>', 38.908127, -77.034863],
];
function initializeMaps() {
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(40.769090, -74.002740),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var image = 'img/logos.png';
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}}</script>
The Script for Map Info window
<script>
var success = function(data) {
$(".ID").append(data.sessions[0].ID);
$(".Users").append(data.sessions[0].Users);
$.each(data.sessions[0].Location, function(i, value){
$(".Location").append('<li>' + value.name + '</li>');
})
}
$.getJSON("sample.json", success);
</script>
The JSON file:
{"sessions":[
{
"ID":"123",
"Users":"4",
"Location":
{ "New York": [
{ "id": 1, "name": "Mat" },
{ "id": 2, "name": "Cat" }
],
"Washington": [
{ "id": 1, "name": "Rat" },
{ "id": 2, "name": "Sat" }
]
}
},
{
"ID":"456",
"Users":"1",
"Location":
{ "New York": [
{ "id": 1, "name": "Bat" }
]
}
}]}
The HTML:
<div id="map_canvas"></div>
<div id="myModal" class="modal hide fade" 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">More Details</h3>
</div>
<div class="modal-body">
<p class="ID">ID</p>
<ul class="Location"></ul>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
The problem I am facing is to show a specific user in its respective place.
For example when I click new york in the marker, it should show me the info window with two sessions and its details (according to the JSON file). I am not sure how to deal with marker ID and Nested JSON. Please help.

There are a few problems in your yode you have to fix.
First:
<script>
var success = function(data) {
$(".ID").append(data.sessions[0].ID);
$(".Users").append(data.sessions[0].Users);
$.each(data.sessions[0].Location, function(i, value){
$(".Location").append('<li>' + value.name + '</li>');
})
}
$.getJSON("sample.json", success);
</script>
That Script is loading when calling the page. So it puts the values for the modal in it at the beginning. So there are always the same information in it.
Good way should be to load the JSON File in the beginning and write it in a global variable.
When pushing the "More Information" button in your marker, you should call a javascript function with an id of the pushed city as parameter (not name, they aren't unique).
You have to put that id instead of the city name in your json.
Now the javascript function, which is called after pushing the "more information" button, should go in an iterative way (for each oder for) over the different sessions in your json and should look for an Location with the matching id. When the id matches, append the data to the model.
The usage of nested JSON is really easy.
When you want to get the information of Mat in New york in the first session, you have to use the following code:
data.sessions[0].Location.NewYork[0]
Have a look, that you better write the identifiers without a space.
So you can write a for construct like :
for(var i = 0; i<data.sessions.length;i++){
var locations = data.sessions[i].Location;
if ('Washington' in locations) {
//Code to add it in your city information window
console.log(locations.Washington);
}
}
the variable id is the passed parameter of the clicked marker.
You also should check your whole code, there are a few parts you should better change (The model won't really work with more than 1 Session)

Categories