Multiple points on Google Maps

Posted on 2016-07-01
Medium Priority
Last Modified: 2016-07-13
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.
Question by:Dan Craciun
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
  • +1
LVL 111

Expert Comment

by:Ray Paseur
ID: 41686281
This article is old, but I believe the principles still apply.

You can see the class in action here:
LVL 111

Expert Comment

by:Ray Paseur
ID: 41686286
LVL 21

Accepted Solution

Randy Poole earned 1200 total points
ID: 41686305
Here is a PHP example with instructions:
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

LVL 35

Author Comment

by:Dan Craciun
ID: 41686590
@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.
LVL 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 400 total points
ID: 41688045
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:

Open in new window

Here is the PHP script that creates the dynamic map:
<?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

$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;

$objs = [];
foreach ($rows as $row)
    $obj = new StdClass;
    $obj->lat = $row[0];
    $obj->lng = $row[1];
    $obj->txt = $row[2];
    $objs[] = $obj;

$jso = json_encode($objs);

$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<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;

<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>

var json = $jso;
var map;

    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);

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

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

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


echo $htm;

Open in new window

LVL 111

Expert Comment

by:Ray Paseur
ID: 41688075
... 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?"
LVL 58

Assisted Solution

by:Julian Hansen
Julian Hansen earned 400 total points
ID: 41690267
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.
LVL 35

Author Comment

by:Dan Craciun
ID: 41690343
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...
LVL 58

Expert Comment

by:Julian Hansen
ID: 41690357
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?
LVL 111

Expert Comment

by:Ray Paseur
ID: 41690384
@Julian: There is "a sample of how to display multiple points on the Map" here:
LVL 35

Author Comment

by:Dan Craciun
ID: 41690388
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).
LVL 35

Author Closing Comment

by:Dan Craciun
ID: 41708915
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.
LVL 58

Expert Comment

by:Julian Hansen
ID: 41708995
You are welcome Dan,

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question