The web page source script does not show the expanded JavaScript loop?
Edit:
Source code example:
“https://gist.github.com/joshbuchea/fd33f1168b8e3ba8efbdc4afbedb5cc0”
Sorry, but I’m not sure exactly sure what you’re asking. You want to change the PHP code so you can have different JavaScript code, i.e. not have the loop done in JavaScript?
I think it should be possible to have PHP do the loop and output the JavaScript code if you think that would be more efficient.
Mittineague:
I think it should be possible to have PHP do the loop and output the JavaScript code if you think that would be more efficient.
I managed to create the first part of the loop into a PHP string and passed it to the JavaScript but was unable to get the second part working and believe me I really tried 
<script type="text/javascript">
var locations = [ [ "2018", 54.3409, -1.43524, 0 ],
[ "1545497127", 54.3409, -1.43524, 1 ],
[ "2018", 54.3409, -1.43524, 2 ],
[ "2018", 54.3409, -1.43524, 3 ],
[ "1545501329", 54.3404, -1.43504, 4 ],
[ "1545501329", 54.3404, -1.43504, 5 ],
[ "1545501368", 54.3406, -1.43518, 6 ],
[ "1545501368", 54.3406, -1.43518, 7 ],
[ "1545501516", 54.3407, -1.43521, 8 ],
[ "1545501516", 54.3407, -1.43521, 9 ],
[ "1545501709", 54.3407, -1.43524, 10 ],
[ "1545501860", 54.3407, -1.43523, 11 ],
[ "1545502005", 54.3409, -1.43457, 12 ],
[ "1545502153", 54.3413, -1.43395, 13 ],
[ "1545502302", 54.3407, -1.43569, 14 ],
[ "1545502393", 54.3406, -1.43615, 15 ],
[ "1545502541", 54.3406, -1.43579, 16 ],
[ "1545504273", 54.3406, -1.43557, 17 ],
[ "1545504421", 54.3406, -1.43543, 18 ],
[ "1545504569", 54.3401, -1.43456, 19 ],
[ "1545505901", 54.3373, -1.43283, 20 ],
[ "1545506049", 54.3381, -1.43399, 21 ],
[ "1545506267", 54.3408, -1.43527, 22 ],
[ "1545507572", 54.3409, -1.43505, 23 ],
[ "1545507720", 54.3408, -1.43519, 24 ],
[ "1545507868", 54.3407, -1.43526, 25 ],
[ "1545508017", 54.3407, -1.43527, 26 ],
[ "1545508165", 54.3407, -1.43527, 27 ],
[ "1545508313", 54.3408, -1.4353, 28 ],
[ "1545508461", 54.3406, -1.43531, 29 ],
[ "1545508610", 54.3406, -1.43529, 30 ],
[ "1545508758", 54.3408, -1.43524, 31 ],
[ "1545508906", 54.3407, -1.43529, 32 ],
[ "1545509055", 54.3407, -1.43529, 33 ],
[ "1545509203", 54.3407, -1.43529, 34 ],
[ "1545510468", 54.3407, -1.43519, 35 ],
[ "1545510616", 54.3407, -1.43523, 36 ],
[ "1545510764", 54.3408, -1.43532, 37 ],
[ "1545510913", 54.3407, -1.43526, 38 ],
[ "1545511061", 54.3406, -1.43526, 39 ],
[ "1545511209", 54.3407, -1.43518, 40 ],
[ "1545511357", 54.3415, -1.4357, 41 ],
[ "1545511506", 54.3427, -1.43683, 42 ],
[ "1545511654", 54.3433, -1.43641, 43 ],
[ "1545511802", 54.3432, -1.43663, 44 ],
[ "1545511950", 54.3432, -1.43671, 45 ],
[ "1545512099", 54.3432, -1.43663, 46 ],
[ "1545512247", 54.3432, -1.43665, 47 ],
[ "1545512692", 54.3446, -1.43826, 48 ],
[ "1545512840", 54.3446, -1.43817, 49 ],
[ "1545513137", 54.3446, -1.4383, 50 ],
[ "1545513285", 54.3445, -1.43829, 51 ],
[ "1545513433", 54.3446, -1.43822, 52 ],
[ "1545514175", 54.3442, -1.43988, 53 ],
[ "1545514335", 54.3438, -1.43983, 54 ],
[ "1545514631", 54.3438, -1.43939, 55 ],
[ "1545514779", 54.3441, -1.43962, 56 ],
[ "1545514928", 54.3441, 1.16667, 57 ],
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
// center: new google.maps.LatLng(-33.92, 151.25),
center: new google.maps.LatLng( locations[20][1], locations[20][2]),
mapTypeId: google.maps.MapTypeId.ROADMAP
var infowindow = new google.maps.InfoWindow();
var marker, i;
marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3409, -1.43524),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3409, -1.43524),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3409, -1.43524),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3409, -1.43524),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3404, -1.43504),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3404, -1.43504),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3406, -1.43518),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3406, -1.43518),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43521),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43521),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43524),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43523),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3409, -1.43457),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3413, -1.43395),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43569),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3406, -1.43615),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3406, -1.43579),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3406, -1.43557),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3406, -1.43543),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3401, -1.43456),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3373, -1.43283),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3381, -1.43399),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3408, -1.43527),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3409, -1.43505),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3408, -1.43519),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43526),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43527),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43527),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3408, -1.4353),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3406, -1.43531),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3406, -1.43529),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3408, -1.43524),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43529),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43529),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43529),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43519),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43523),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3408, -1.43532),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43526),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3406, -1.43526),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3407, -1.43518),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3415, -1.4357),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3427, -1.43683),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3433, -1.43641),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3432, -1.43663),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3432, -1.43671),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3432, -1.43663),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3432, -1.43665),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3446, -1.43826),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3446, -1.43817),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3446, -1.4383),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3445, -1.43829),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3446, -1.43822),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3442, -1.43988),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3438, -1.43983),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3438, -1.43939),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3441, -1.43962),
map: map
}); marker = new google.maps.Marker({
position: new google.maps.LatLng(54.3441, 1.16667),
map: map
for (i = 0; i < locations.length; i++) {
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
})(marker, i));
</script>
replace the following loop with a revised PHP HereDoc string?
… why? This feels like a step towards inefficiency rather than improvement.
I believe that if the loop was replaced with hard-coded JavaScript values on the server this would reduce the current five second rendering time. The complete script would be passed to Google and not rely on the browser to loop through the JavaScript array.
The map is rendered quite quickly but the markers take about five seconds to be appear?
Following is the PHP Heredoc string to generate the the first part of the JavaScript loop:
$bLocations = 'var locations = [';
$mak1 = '';
foreach($locationsFromMySqlTable as $id => $lox):
$tmp = <<< ____TMP
[ "{$lox[0]}", {$lox[1]}, {$lox[2]}, $id ],
____TMP;
$bLocations .= $tmp;
$tmp2 = <<< ____TMP
marker = new google.maps.Marker({
position: new google.maps.LatLng({$lox[1]}, {$lox[2]}),
map: map
____TMP;
$mak1 .= $tmp2;
endforeach;
$bLocations .= '];';
Maybe you could lose the click loop by using event delegation?
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
Event delegation
Bubbling also allows us to take advantage of event delegation — this concept relies on the fact that if you want some code to run when you click on any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent, rather than having to set the event listener on every child individually.
A good example is a series of list items — if you want each one of them to pop up a message when clicked, you can set the click event listener on the parent <ul> , and it will bubble to the list items.
This concept is explained further on David Walsh’s blog, with multiple examples — see How JavaScript Event Delegation Works.
