mapembed.ejs

<script src="https://maps.googleapis.com/maps/api/js?key=<%= google_maps_api_key %>&callback=initialise"></script>

<script type="text/javascript">
function initialise() {
  myLatlng = new google.maps.LatLng(54.559323, -3.321304);
  mapOptions = {
    zoom: 1,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }
  geocoder = new google.maps.Geocoder();
  infoWindow = new google.maps.InfoWindow;
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  xmlUrl = "<%= url %>";
  loadMarkers();
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      //request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };
  request.open('GET', url, true);
  request.send(null);
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function loadMarkers() {
  map.markers = map.markers || []
  downloadUrl(xmlUrl, function(data) {
    var xml = data.responseXML;
    markers = xml.documentElement.getElementsByTagName("location");
    for (var i = 0; i < markers.length; i++) {
      var title = markers[i].getAttribute("title");
      var url = markers[i].getAttribute("url");
      var lastmod = new Date(markers[i].getAttribute("lastmod"));
      var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));
      var html = "<div class='infowindow'><b>" + title + "</b> <br/><a href='" + url + "'>" + url + "</a><br/> " + lastmod + " <br/></div>";
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        title: title
      });
      map.markers.push(marker);
      bindInfoWindow(marker, map, infoWindow, html);
    } 
    centreMap();
  });
}

function centreMap() {
  var latLngBounds = new google.maps.LatLngBounds();
  for (var i = 0; i < map.markers.length; i++) {
    var currentMarker = map.markers[i];
    var latLngPoint = new google.maps.LatLng(currentMarker.position.lat(), currentMarker.position.lng());
    latLngBounds.extend(latLngPoint);
  }
  map.setCenter(latLngBounds.getCenter());
  map.fitBounds(latLngBounds); 
}



google.maps.event.addDomListener(window, 'load', initialise);
</script>

<div id="map-canvas" style="height: 500px; width: 90%;"></div>