Created
March 21, 2012 17:40
-
-
Save nblenke/2150006 to your computer and use it in GitHub Desktop.
Google Map v3 from Saxotech geodata
This file contains 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 lang="en"> | |
| <head> | |
| <!-- *********************************** | |
| * Method: | |
| * Purpose: called from article7.pbo, displays google map via saxo geodata fields, | |
| * this map is opened via saxo template (?template=geo) | |
| * | |
| * 20110510 NB | |
| * 20110627 NB - Updated to allow for multiple markers | |
| ************************************* --> | |
| <title></title> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> | |
| <link rel="stylesheet" type="text/css" href="/global/includes/css/global.css" media="screen"> | |
| <style type="text/css"> | |
| body {padding:5px 0 10px 10px;font-family:Arial;} | |
| #map_canvas {width:640px;height:480px} | |
| .info {font:12px/1.3 verdana,arial,sans-serif} | |
| .info h4 {font-weight:bold;margin:0;padding:0;} | |
| </style> | |
| <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> | |
| <script type="text/javascript" > | |
| /* Google Map with multiple markers and info windows, using v3 api | |
| * 20110727 NB | |
| */ | |
| /* | |
| * sites array returns: | |
| * sites[0] = name | |
| * sites[1] = lat | |
| * sites[2] = long | |
| * sites[3] = counter | |
| * sites[4] = location | |
| * sites[5] = zoom | |
| */ | |
| var sites = [['Truck%2C%20Train%20Collision', 27.89806, -81.8841188, 1, '2800%20State%20Road%2060%20East%2C%20Bartow%2C%20Fl', 11],], | |
| i; | |
| function setMarkers(map, markers) { | |
| for (i = 0; i < markers.length; i += 1) { | |
| var sites = markers[i], | |
| siteLatLng = new google.maps.LatLng(sites[1], sites[2]), | |
| marker = new google.maps.Marker({ | |
| position: siteLatLng, | |
| map: map, | |
| title: sites[0], | |
| zIndex: sites[3], | |
| html: '<div class="info"><h4>' + decodeURIComponent(sites[0]) + '</h4>' + decodeURIComponent(sites[4]) + '</div>' | |
| }); | |
| // open first marker info window | |
| if ( i === 0) { | |
| google.maps.event.addDomListener(window, "load", function() { | |
| infowindow.setContent(marker.html); | |
| infowindow.open(map, marker); | |
| }); | |
| } | |
| google.maps.event.addListener(marker, "click", function () { | |
| infowindow.setContent(this.html); | |
| infowindow.open(map, this); | |
| }); | |
| } | |
| } | |
| function init() { | |
| var centerMap = new google.maps.LatLng(sites[0][1], sites[0][2]), | |
| myOptions = { | |
| //zoom: sites[0][5], | |
| zoom: 12, | |
| center: centerMap, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP | |
| }, | |
| map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); | |
| setMarkers(map, sites); | |
| infowindow = new google.maps.InfoWindow({ | |
| content: "loading..." | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="map_canvas"></div> | |
| <script type="text/javascript"> | |
| init(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment