Google Maps API via SQL with 2000+ markers: map fails to load

  google-api, google-maps, mysqli, php

I’m creating a web page with a Google Map, picking up several thousand markers from an SQL database. Currently the map will only display when I keep the number of markers down below about 250. Above that, the map simply won’t load.

Note in the following line is the SQL statement used to restrict the number of markers:

$sql = "SELECT * FROM base WHERE uid>400 AND uid<620";

When this limitation is included, the page works exactly as I want it to, but without that, no map at all (even when left for a long time).

Full code:

<?php

    $servername = "localhost";
    $username = "****";
    $password = "**********";
    $dbname = "signpost";

    // Create connection
    $conn = mysqli_connect($servername, $username, $password, $dbname);

    // Check connection
    if (!$conn) {
      die("Connection failed: " . mysqli_connect_error());
    }
    echo "Connected successfully <br>";

    $sql = "SELECT * FROM base WHERE uid>400 AND uid<620";
    $result = mysqli_query($conn, $sql);

    if (mysqli_num_rows($result) > 0) {
        // output data of each row
        while($row = mysqli_fetch_assoc($result)) {
            $outputArray[$row['uid']]['lng'] = $row['lng'];
            $outputArray[$row['uid']]['lat'] = $row['lat'];
            $outputArray[$row['uid']]['name'] = $row['name'];
            $outputArray[$row['uid']]['des'] = $row['des'];
            $outputArray[$row['uid']]['type'] = $row['type'];
            $outputArray[$row['uid']]['empl'] = $row['empl'];
        }
    } else {
        echo "0 results";
    }

    $locations = "";

    foreach ($outputArray as $key => $array) {
        $locationsArray[$key] = "{ rn";
        $locationsArray[$key] .= " lat: " . $array['lat'] . ", rn";
        $locationsArray[$key] .= " lng: " . $array['lng'] . ", rn";
        $locationsArray[$key] .= ' title: "' . $array['name'] . '"' . ", rn";
        $locationsArray[$key] .= ' label: "' . $array['empl'] . '"' . ", rn";
        $locationsArray[$key] .= ' info: "' . $key . " - " . $array['name'] . " (" . $array['empl'] . ")<br>" . $array['des'] . '"' . " rn";
        $locationsArray[$key] .= "}";
    }

    $locations = implode(",  rn", $locationsArray);
    //echo $locations;

    $html = <<<HTML

    <!DOCTYPE html>
        <html>
            <head>
                <title>Safety Signpost Trial Map</title>
                <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
                <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbbA87xsZkIWlpW2PSavkyecT7w61kr3Q&callback=initMap&libraries=&v=weekly" defer></script>
                <style type="text/css">
                    /* Set the size of the div element that contains the map */
                    #map {
                        height: 400px;
                        width: 100%;
                    }
                </style>
                <script>

                    function initMap() {

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

                        var map = new google.maps.Map(document.getElementById('map'), {
                            zoom: 10,
                            center: {
                                lat: 52,
                                lng: -2
                            }
                        });

                        // Add some markers to the map.
                        // Note: The code uses the JavaScript Array.prototype.map() method to
                        // create an array of markers based on a given "locations" array.
                        // The map() method here has nothing to do with the Google Maps API.
                        var markers = locations.map(function(location, i) {
                            var marker = new google.maps.Marker({
                                position: location,
                                title: location.title,
                                label: location.label
                            });
                            google.maps.event.addListener(marker, 'click', function(evt) {
                                infoWin.setContent(location.info);
                                infoWin.open(map, marker);
                            })
                            return marker;
                        });

                        // Add a marker clusterer to manage the markers.
                        var markerCluster = new MarkerClusterer(map, markers, {
                            imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
                        });

                    }

                    var locations = [$locations];

                </script>
            </head>

            <body>
                <h3>Safety Signpost Demo</h3>

                <!--The div element for the map -->
                <div id="map"></div>
            </body>
        </html>

    HTML;

    echo $html;
    $conn->close();

?>

*** Update *** I’ve just found that by commenting out the title, info window & label, all load fine, so it appears to be that data that is causing some kind of overload or time out

Please can anyone help? I’ve exhausted my ability to find an answer anywhere!

Thanks in hope

Source: Ask PHP

LEAVE A COMMENT