| | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| | 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
| | 3 | <head> |
| | 4 | <meta http-equiv="content-type" content="text/html; charset=utf-8"/> |
| | 5 | <title>Gmaps jQuery + XML Example</title> |
| | 6 | <script src="http://maps.google.com/maps?file=api&v=2&key=<?php echo Config::item('gmaps.api_key') ?>" type="text/javascript"></script> |
| | 7 | <?php echo html::script('jquery.min') ?> |
| | 8 | |
| | 9 | <script type="text/javascript"> |
| | 10 | $(document).ready(function() |
| | 11 | { |
| | 12 | if (GBrowserIsCompatible()) |
| | 13 | { |
| | 14 | // Initialize the map. |
| | 15 | map = new GMap(document.getElementById('map')); |
| | 16 | map.addControl(new GLargeMapControl()); |
| | 17 | map.centerAndZoom(new GPoint(0,35), 16); |
| | 18 | map.enableScrollWheelZoom(); |
| | 19 | |
| | 20 | // Disable the scrollwheel from scrolling the map |
| | 21 | GEvent.addDomListener(map.getContainer(), 'DOMMouseScroll', function(e) |
| | 22 | { |
| | 23 | e.preventDefault(); |
| | 24 | e.returnValue = false; |
| | 25 | }); |
| | 26 | |
| | 27 | // Load map markers |
| | 28 | $.ajax |
| | 29 | ({ |
| | 30 | type: 'GET', |
| | 31 | url: '<?php echo url::site('google_map/xml') ?>', |
| | 32 | dataType: 'xml', |
| | 33 | success: function(data, status) |
| | 34 | { |
| | 35 | $('marker', data).each(function() |
| | 36 | { |
| | 37 | // Current marker |
| | 38 | var node = $(this); |
| | 39 | |
| | 40 | // Extract HTML |
| | 41 | var html = node.find('html').text(); |
| | 42 | |
| | 43 | // Create a new map marker |
| | 44 | var marker = new GMarker(new GLatLng(node.attr("lat"), node.attr("lon"))); |
| | 45 | GEvent.addListener(marker, "click", function() |
| | 46 | { |
| | 47 | marker.openInfoWindowHtml(html); |
| | 48 | }); |
| | 49 | |
| | 50 | // Add the marker to the map |
| | 51 | map.addOverlay(marker); |
| | 52 | }); |
| | 53 | }, |
| | 54 | error: function(request, status, error) |
| | 55 | { |
| | 56 | alert('There was an error retrieving the marker information, please refresh the page to try again.'); |
| | 57 | } |
| | 58 | }); |
| | 59 | } |
| | 60 | }); |
| | 61 | // Unload the map when the window is closed |
| | 62 | $(document.body).unload(function(){ GBrowserIsCompatible() && GUnload(); }); |
| | 63 | </script> |
| | 64 | </head> |
| | 65 | <body> |
| | 66 | <p>You can use your scroll wheel to zoom in and out of the map.</p> |
| | 67 | <div id="map" style="width:600px;height:400px;"></div> |
| | 68 | </body> |
| | 69 | </html> |
