Advertisement
Guest User

Untitled

a guest
Apr 29th, 2016
63
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.66 KB | None | 0 0
  1. <!DOCTYPE html >
  2. <head>
  3. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  5. <title>Google Maps</title>
  6. <script src="https://maps.googleapis.com/maps/api/js?key=my key"
  7. type="text/javascript"></script>
  8. <script type="text/javascript">
  9.  
  10. var customIcons = {
  11. restaurant: {
  12. icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
  13. },
  14. bar: {
  15. icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
  16. }
  17. };
  18.  
  19. function load() {
  20. var map = new google.maps.Map(document.getElementById("map"), {
  21. center: new google.maps.LatLng(52.3702160, 4.8951680),
  22. zoom: 13,
  23. mapTypeId: 'roadmap'
  24. });
  25. var infoWindow = new google.maps.InfoWindow;
  26.  
  27. downloadUrl("createxml.php", function(data) {
  28. var xml = data.responseXML;
  29. var markers = xml.documentElement.getElementsByTagName("marker"); //this line contains error
  30. for (var i = 0; i < markers.length; i++) {
  31. var name = markers[i].getAttribute("name");
  32. var address = markers[i].getAttribute("address");
  33. var type = markers[i].getAttribute("type");
  34. var point = new google.maps.LatLng(
  35. parseFloat(markers[i].getAttribute("lat")),
  36. parseFloat(markers[i].getAttribute("lng")));
  37. var html = "<b>" + name + "</b> <br/>" + address;
  38. var icon = customIcons[type] || {};
  39. var marker = new google.maps.Marker({
  40. map: map,
  41. position: point,
  42. icon: icon.icon
  43. });
  44. bindInfoWindow(marker, map, infoWindow, html);
  45. }
  46. });
  47. }
  48.  
  49. function bindInfoWindow(marker, map, infoWindow, html) {
  50. google.maps.event.addListener(marker, 'click', function() {
  51. infoWindow.setContent(html);
  52. infoWindow.open(map, marker);
  53. });
  54. }
  55.  
  56. function downloadUrl(url, callback) {
  57. var request = window.ActiveXObject ?
  58. new ActiveXObject('Microsoft.XMLHTTP') :
  59. new XMLHttpRequest;
  60.  
  61. request.onreadystatechange = function() {
  62. if (request.readyState == 4) {
  63. request.onreadystatechange = doNothing;
  64. callback(request, request.status);
  65. }
  66. };
  67.  
  68. request.open('GET', url, true);
  69. request.send(null);
  70. }
  71.  
  72. function doNothing() {}
  73.  
  74. </script>
  75.  
  76. </head>
  77.  
  78. <body onload="load()">
  79. <div id="map" style="width: 500px; height: 300px"></div>
  80. </body>
  81.  
  82. </html>
  83.  
  84. <?xml version="1.0" encoding="UTF-8"?>
  85.  
  86. <markers>
  87.  
  88. <marker type="bar" lng="4.892607" lat="52.371613" address="oudezijds" name="barretje"/>
  89.  
  90. </markers>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement