Created
March 1, 2016 11:43
-
-
Save gujiaxi/cd5f6c4dd82fd5394dbf to your computer and use it in GitHub Desktop.
Set markers on Google Maps.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | |
| <meta charset="utf-8"> | |
| <title>Google Maps</title> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #map { | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div><input type="file" id="fileInput"/></div> | |
| <div><p id="debug"></p></div> | |
| <div id="map"></div> | |
| <script src="https://maps.googleapis.com/maps/api/js"></script> | |
| <script> | |
| function init() { | |
| var fileInput = document.getElementById('fileInput'); | |
| fileInput.addEventListener('change', function(e) { | |
| var file = fileInput.files[0]; | |
| var locations; | |
| var reader = new FileReader(); | |
| reader.onload = function(e) { | |
| var text = reader.result; | |
| var centerLat = 34.0223519; | |
| var centerLng = 120.285117; | |
| var map = new google.maps.Map(document.getElementById('map'), { | |
| zoom: 8, | |
| center: {lat: centerLat, lng: centerLng} | |
| }); | |
| var debug = document.getElementById('debug'); | |
| var lines = text.split('\n'); | |
| for (var i=0; i<lines.length; i++) { | |
| var location = lines[i].split(','); | |
| var information = location[0] | |
| var latitude = parseFloat(location[1]); | |
| var longitude = parseFloat(location[2]); | |
| if ((Math.pow(latitude-centerLat,2) + Math.pow(longitude-centerLng,2)) < 10000) { | |
| var marker = new google.maps.Marker({ | |
| position: { | |
| lat: latitude, | |
| lng: longitude | |
| }, | |
| map: map, | |
| title: information | |
| }); | |
| google.maps.event.addListener(marker, 'click', (function(information) { | |
| return function() { | |
| debug.innerHTML = information; | |
| } | |
| })(information)); | |
| } | |
| } | |
| } | |
| reader.readAsText(file); | |
| }); | |
| } | |
| window.onload = init; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment