I'm looking for a way to display users location on world map using html, javascript or any other way, while the data will be pulled from exel file. The location data is basicly a City Name, and i want to show it on world map as mark/dot for each user.
the map need to be displayed on a website and update every time user refresh the site.
is there a way it can be done? if someone have something like this it will be very appreciated.
thanks.
The most common way these days is to use Google Maps they have a lot of sample code here
Alternatives to google maps can be found here Open alternatives to Google-maps?
You will most likely need to learn a server side language that can read the spreadsheet data and pass it to the frontend. Solutions for this exist in PHP, ruby, node.js, asp etc...
What about using OpenLayers , here is a full example :
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
html, body, #basicMap {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="map.js"></script>
</head>
<body>
<div id="basicMap"></div>
<script>
init();
</script>
</body>
</html>
JS
function init() {
map = new OpenLayers.Map("basicMap", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution()
]
});
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(7.55785346031189,50.3625329673905).transform( fromProjection, toProjection);
var zoom = 3
map.addLayer(mapnik);
map.setCenter(position, zoom );
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var marker = new OpenLayers.Marker(position);
marker.events.register("click", map , function(e){ alert("click");
});
markers.addMarker(marker);
}
Please note that this is just a sample, and markers are deprecated.
For further informations , look http://dev.openlayers.org/docs/files/OpenLayers-js.html
If you decide to use Google Maps you can load your Excel data into a Google Spreadsheet. The locations can then be mapped directly on Google Maps from the spreadsheet. Have a look at this demo to get started.
If you want to do it without writing code, check out GeoSheets to create the map directly from your spreadsheet. GeoSheets is a free add-on for Google Sheets that makes it super easy to create customized and embeddable maps.
