<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    html {
      height: 100%
    }

    body {
      height: 100%;
      margin: 0;
      padding: 0
    }

    #map-canvas {
      height: 100%
    }
  </style>


  <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?v=3.17&signed_in=true&region=ZA&key=AIzaSyDVqE8kh7MCNnsjq4jHOz4gyGvELJF8DPw">
  </script>
  <script type="text/javascript">

    function CoordMapType() {
    }

    CoordMapType.prototype.tileSize = new google.maps.Size(256, 256);
    CoordMapType.prototype.maxZoom = 19;

    CoordMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
      var div = ownerDocument.createElement('div');
      div.innerHTML = coord;
      div.style.width = this.tileSize.width + 'px';
      div.style.height = this.tileSize.height + 'px';
      div.style.fontSize = '10';
      div.style.borderStyle = 'solid';
      div.style.borderWidth = '1px';
      div.style.borderColor = '#AAAAAA';
      return div;
    };

    CoordMapType.prototype.name = "Tile #s";
    CoordMapType.prototype.alt = "Tile Coordinate Map Type";

    var map;
    var johannesburg = new google.maps.LatLng(-26.1215, 28.20);
    var coordinateMapType = new CoordMapType();


    function initialize() {
      var mapOptions = {
        center: johannesburg,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: false
      };

      var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
      map.setTilt(45);
      map.setHeading(90);

      var markerImage = 'app/images/icons/picture-18.png';
      var carMarkerImage =  'app/images/icons/limo-icon.png'; ;

       var marker = new google.maps.Marker({
         position: johannesburg,
         map: map,
         icon:markerImage,
         draggable:false,
         animation: google.maps.Animation.DROP,
         title: "5 Simmons Street",

         // This marker is 20 pixels wide by 32 pixels tall.
             size: new google.maps.Size(20, 32),
             // The origin for this image is 0,0.
             origin: new google.maps.Point(0,0),
             // The anchor for this image is the base of the flagpole at 0,32.
             anchor: new google.maps.Point(0, 32)   ,
             scaledSize: new google.maps.Size(25, 25)
       });


      var carMarker = new google.maps.Marker({
        position: new google.maps.LatLng(-26.1215, 28.201),
        map: map,
        icon:carMarkerImage,
        draggable:false,
        animation: google.maps.Animation.DROP,
        title: "5 Simmons Street",

        // This marker is 20 pixels wide by 32 pixels tall.
            size: new google.maps.Size(20, 32),
            // The origin for this image is 0,0.
            origin: new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 0,32.
            anchor: new google.maps.Point(0, 32)   ,
            scaledSize: new google.maps.Size(25, 25)
      });

      marker.setMap(map);
      carMarker.setMap(map);
      google.maps.event.addListener(marker, 'click', toggleBounce);

      //detectBrowser();
    }

    function detectBrowser() {
      var useragent = navigator.userAgent;
      var mapdiv = document.getElementById("map-canvas");

      if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
        mapdiv.style.width = '100%';
        mapdiv.style.height = '100%';
      } else {
        mapdiv.style.width = '600px';
        mapdiv.style.height = '800px';
      }
    }

    function toggleBounce() {

      if (marker.getAnimation() != null) {
        marker.setAnimation(null);
      } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
      }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>











