Simple Map

by Lawrence Ross

HTML

<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map-canvas {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf::before,
.cf::after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf::after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

JavaScript

google.maps.event.addDomListener(window, 'load', init);
var lat = 25.2091043;
var lng = 55.2725799;

function init() {
  var mapOptions1 = {
    zoom: 18,
    center: new google.maps.LatLng(lat, lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  };
  var mapElement1 = document.getElementById('map-canvas');
  var map1 = new google.maps.Map(mapElement1, mapOptions1);
  var marker = new google.maps.Marker({
    position: {
      lat: lat,
      lng: lng
    },
    map: map1,
    icon: {
      url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
      labelOrigin: new google.maps.Point(100, 32),
      size: new google.maps.Size(32, 32),
      anchor: new google.maps.Point(16, 32)
    },
    label: {
      text: "Aspin Commercial Tower",
      color: "#C70E20",
      fontWeight: "bold"
    }
  });
  var measle = new google.maps.Marker({
    position: marker.getPosition(),
    map: marker.getMap(),
    zIndex: 0,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
          // Create the DIV to hold the control and call the CenterControl()
        // constructor passing in this DIV.
        var directionsControlDiv = document.createElement('div');
        var directionsControl = new DirectionsControl(directionsControlDiv, map1);

        directionsControlDiv.index = 1;
        map1.controls[google.maps.ControlPosition.TOP_LEFT].push(directionsControlDiv);
}

/**
 * The DirectionsControl adds a control to the map that gets directions
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function DirectionsControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px...