diff options
| author | root <root@pigstarter.retiolum> | 2013-06-24 23:33:01 +0200 |
|---|---|---|
| committer | root <root@pigstarter.retiolum> | 2013-06-24 23:33:01 +0200 |
| commit | 1c299194ecd5e91f6f9915582c2b1d6ce0e80b5b (patch) | |
| tree | 68eb1dc23e37d0a6aa6d396349864bccc72a2abc | |
| parent | b28bedc524b1a0f90a1b760ac29fb2d49d7970b3 (diff) | |
add map
| -rw-r--r-- | retiolum/scripts/adv_graphgen/map.html | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/retiolum/scripts/adv_graphgen/map.html b/retiolum/scripts/adv_graphgen/map.html new file mode 100644 index 00000000..f66832d1 --- /dev/null +++ b/retiolum/scripts/adv_graphgen/map.html @@ -0,0 +1,90 @@ + + +<!DOCTYPE html> +<html> + <head> + <title>Simple Map</title> + <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> + <meta charset="utf-8"> + <style> + html, body, #map-canvas { + margin: 0; + padding: 0; + height: 100%; + } + </style> + <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> + <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> + <script type="text/javascript" src="jquery.ui.map.js"></script> + <script> + var map; + var markerlist ={}; + function addInfoWindow(marker, message) { + var info = message; + + var infoWindow = new google.maps.InfoWindow({ + content: message + }); + + google.maps.event.addListener(marker, 'click', function () { + + // close all the infowindows + $.each(markerlist,function (k,v){ + v["infowin"].close() + }); + infoWindow.open(map, marker); + }); + return infoWindow; + } + function initialize() { + var mapOptions = { + zoom: 5, + center: new google.maps.LatLng(51,9), + mapTypeId: google.maps.MapTypeId.ROADMAP + }; + map = new google.maps.Map(document.getElementById('map-canvas'), + mapOptions); + + $.getJSON("marker.json",function (data){ + $.each(data,function (k,v) { + jitter1=0.005 - Math.random()*0.01 + jitter2=0.005 - Math.random()*0.01 + + // add initial marker + var pt=new google.maps.LatLng(jitter1+v["latitude"],jitter2+v["longitude"]) + var marker= new google.maps.Marker({ + id: k,map:map,title: k,position:pt,content:k}) + + // add edges + $.each(v["to"],function(iter,val){ + var line = [ + pt, + new google.maps.LatLng(val['latitude'],val['longitude']) + ] + + var connector = new google.maps.Polyline({ + path:line, + strokeColor: "#FF0000", + strokeOpacity: 1.0, + strokeWeight: 2 + }) + connector.setMap(map); + val["line"]=connector + + }) + + + marker["infowin"]=addInfoWindow(marker,k+'<br/>'+v["city"]); + markerlist[k] = marker; + }); + }) + }; + + google.maps.event.addDomListener(window, 'load', initialize); + + </script> + </head> + <body> + <div id="map-canvas"></div> + </body> +</html> |