Can this very inefficient Google Maps Multiple Markers script be improved?

John_Betong · December 24, 2018, 5:01am

I am in the process of creating a Google Map with Multiple Markers obtained from a PHP MySqli database table.

Screenshot%20from%202018-12-24%2011-22-47

The following example seems very inefficient especially since the JavaScript is generated using PHP Heredoc strings.

Web Page:

<?php 
// THE $aLocations VARIABLE IS GENERATED FROM A PHP MySqli Database Table

// BEWARE ONLY LINEFEED AFTER TRAILING ____TMP
    $aLocations = <<< ____TMP
      var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
____TMP;
// BEWARE ONLY LINEFEED AFTER TRAILING ;

?>
<!doctype html>
<html>
<head>
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
</head>
<body>
  <h1> Google Maps Multiple Markers </h1>
  <div id="map" style="height: 400px; width: 500px;">
</div>
<script type="text/javascript">

   <?php echo $aLocations; ?>

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

Is it possible to eliminate the PHP string of $aLocations and replace the following loop with a revised PHP HereDoc string?

for (i = 0; i < locations.length; i++)
{ 
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

Special Note:

The web page source script does not show the expanded JavaScript loop?

Edit:
Source code example:
“https://gist.github.com/joshbuchea/fd33f1168b8e3ba8efbdc4afbedb5cc0”

Mittineague · December 25, 2018, 8:00am

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.

m_hutley · December 25, 2018, 9:16am

Well you could have the query directly echo out into the location where $aLocations is used. The Javascript variable currently named “locations” must exist for the code to work; so however you create that variable is up to you.

… why? This feels like a step towards inefficiency rather than improvement.

John_Betong · December 26, 2018, 6:45am

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>

John_Betong · December 26, 2018, 6:59am

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:

<?php 
...
...
  $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 .=  '];';

Mittineague · December 26, 2018, 7:16am

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.

system · March 27, 2019, 2:16pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.