Multiple points on Google Maps

If I have a csv with 10-50 GPS coordinates, how can I display them all at once in browser in Google Maps?

Preferably using PHP/JavaScript.

Thank you.
LVL 35
Dan CraciunIT ConsultantAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
This article is old, but I believe the principles still apply.
https://www.experts-exchange.com/articles/3350/Using-the-Google-Maps-API-in-PHP.html

You can see the class in action here:
https://iconoun.com/demo/google_static_map_class.php
0
Ray PaseurCommented:
0
Randy PooleCommented:
Here is a PHP example with instructions:
https://shellcreeper.com/multiple-location-google-map/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Dan CraciunIT ConsultantAuthor Commented:
@Ray: thank you. But I don't want a static map. I need to be able to pan/zoom on the map with the markers.

@Randy: that looks interesting. I'll play with it for a bit.

Use case: I have a client who is a small ISP. I need to be able to display on the map the complaints from last 6 hours/last day/etc and visually check for "clusters".
These clusters would then need to be further investigated, to check for a common cause.
0
Ray PaseurCommented:
It's a shame the last comment got deleted.  E-E seems to be overzealous in its efforts to deny the fact that there are other learning resources on the internet!  It was almost exactly the perfect example.

Whatever.  I could not find the deleted link, but I understand the concepts.  I've tried to recreate and simplify the example here.

The strategy is to read the CSV into a PHP variable (array of arrays) and then turn the "sub-arrays" into objects (would be nice if PHP would let us get an object from fgetcsv() instead of an array, but that's beside the point).  Once we have an array of objects we can use JSON encoding to create JavaScript variables.   The JavaScript variables are injected into the HTML via HEREDOC notation.

Here is the CSV:
https://iconoun.com/demo/storage/temp_dancraciun.csv
38.9304552,-77.1503227,"Home"
38.9086018,-77.1298843,"Club"
38.9400024,-77.0893293,"Church"
38.9326919,-77.1774237,"Store"

Open in new window

Here is the PHP script that creates the dynamic map:
https://iconoun.com/demo/temp_dancraciun.php
<?php // demo/temp_dancraciun.php
/**
 * https://www.experts-exchange.com/questions/28955215/Multiple-points-on-Google-Maps.html
 *
 * Ref: http://codepen.io/hellogareth/pen/qEPQqJ
 */
error_reporting(E_ALL);

// READING A CSV FILE
$url = 'storage/temp_dancraciun.csv';
$fpr = fopen($url, 'r');
if (!$fpr) trigger_error("Unable to open $url", E_USER_ERROR);
$rows = [];
while (!feof($fpr))
{
    $row = fgetcsv($fpr);
    $rows[] = $row;
}

// CREATING AN ARRAY OF OBJECTS FROM THE CSV DATA
$objs = [];
foreach ($rows as $row)
{
    $obj = new StdClass;
    $obj->lat = $row[0];
    $obj->lng = $row[1];
    $obj->txt = $row[2];
    $objs[] = $obj;
}

// CREATING THE JSON STRING FROM THE ARRAY OF OBJECTS
$jso = json_encode($objs);

// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style type="text/css">
html, body, #map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<script>
var json = $jso;
var map;

$(document).ready(function(){
    function initialize() {
        var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(38.929932,-77.1165074)
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        for(var i = 0; i < json.length; i++) {
            var obj = json[i];
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(obj.lat,obj.lng),
                map: map,
                title: obj.txt
            });
        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
});
</script>

<title>E-E questions/28955215/Multiple-points-on-Google-Maps</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

<div id="map-canvas"></div>

</body>
</html>
HTML5;


// RENDER THE WEB PAGE
echo $htm;

Open in new window

0
Ray PaseurCommented:
... otherwise you're better off not suggesting anything.
That speaks volumes, and provides the E-E policy guidance that I think we all needed to hear.  

Are the links I posted to my articles "throwing links against the wall hoping they'll stick?"  If so, I'm at a loss about where to go next.  I wrote these articles because I saw the same questions being repeated over and over, similar themes in only slightly dissimilar clothing.  I have hundreds of thousands of E-E points as a result of these articles.  What are we to make of the new policies that tell us not to "throw links against the wall?"
0
Julian HansenCommented:
@Dan,
Based on your description of your project it sounds like this might be something internal to your ISP.

Just note that Google's licensing policy is quite strict on the use of its Map API - if you are using it on a publicly viewable site then you are ok - if you are behind a logon or an internal only site then you need to purchase a use license from Google.

If you find yourself in a situation where you are running foul of Google's use policy then you can look at
OpenLayers http://openlayers.org/
OpenStreetMaps https://www.openstreetmap.org/
Leaflet http://leafletjs.com/

Personally I recommend Leaflet with OSM - very easy to use.
0
Dan CraciunIT ConsultantAuthor Commented:
Hmmm. I'll need to check that.

The results page is publicly available, but not advertised (meaning no link from the official website).
I guess one could find it using google search.
But accessing the page directly would only display an empty map, as it requires post data.

Technically I'm compliant, as it is a free and public page. And as long as you supply post data with coordinates and names, it's not empty...
0
Julian HansenCommented:
As long as it is public facing - i.e. no logon page that obscures it and you are not deriving income from it and, I think, you are not tracking assets with it - you should be Ok.

Are you still looking for a sample of how to display multiple points on the Map?

If so can you expand a bit - this is a fairly straight forward task with tons of samples on the Net so I am going to assume there is more to it than simply creating a bunch of points and adding them to the map?
0
Ray PaseurCommented:
@Julian: There is "a sample of how to display multiple points on the Map" here:
https://www.experts-exchange.com/questions/28955215/Multiple-points-on-Google-Maps.html#a41688045
0
Dan CraciunIT ConsultantAuthor Commented:
I've modified the example from Randy's link and it works.

I'm working now on color coding: having different colors for new tickets, assigned, closed, waiting for client confirmation etc.
And heat maps from proximity (i.e. the color is more pronounced the more close neighbors it has).
0
Dan CraciunIT ConsultantAuthor Commented:
Thank you all.

I've ended up using Randy's solution.
Ray's sample code is informative, as always.
Julian made an excellent point about possible licensing issues.
0
Julian HansenCommented:
You are welcome Dan,
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.