smebberson/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Example: drawing on a Google Map using pixel space

This example shows you how to draw on a Google Map, without having to explicitly know any latitude or longitude. This makes it really easy to draw on a map that has been adjusted as required by a user, and can then be annotated using only the pixel size of the map as reference points.

  
## index.html

<!DOCTYPE html>
<head>
  <meta chartset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Scott Mebberson">
  <title>scottmebberson.com example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="http://scottmebberson.com/css/examples.css" type="text/css" media="screen">
  <style>
    #mapcanvas {
      width: 100%;
      height: 240px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
</head>
<body>
  <header>
    <h1>scottmebberson.com</h1>
  </header>
  <div class="content">
    <article>
      <header>
        <h1>Drawing on a Google Map using pixel space</h1>
      </header>
      <script type="text/javascript">
      (function() {
        var convertPixels, initialiseGoogleMap,
          _this = this;

        initialiseGoogleMap = function() {
          var mapOptions;
          mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          this.map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
          this.overlay = new google.maps.OverlayView();
          this.overlay.draw = function() {};
          this.overlay.setMap(this.map);
          return setTimeout(getCenter, 100);
        };

        this.lineSymbol = {
          path: 'M 0,-1 0, 1',
          strokeOpacity: 1,
          strokeWeight: 1,
          scale: 3
        };

        this.getCenter = function() {
          var bottom, center, middle, polyline;
          center = map.getCenter();
          middle = $('#mapcanvas').width() / 2;
          bottom = $('#mapcanvas').height();
          _this.aLines = [convertPixels(middle, 0), convertPixels(middle, bottom)];
          return polyline = new google.maps.Polyline({
            path: aLines,
            strokeOpacity: 0,
            icons: [
              {
                icon: lineSymbol,
                offset: '0',
                repeat: '10px'
              }
            ],
            map: map
          });
        };

        convertPixels = function(x, y) {
          return overlay.getProjection().fromDivPixelToLatLng(new google.maps.Point(x, y));
        };

        window.addEventListener('load', initialiseGoogleMap);

      }).call(this);
      </script>

    <div id="mapcanvas"></div>

    <p>This example draws on a Google Map using pixel space, rather than specific knowledge of lat/lng or map zoom and center. You should see a vertical dashed line straight through the center of the map above.</p>

    <p class="highlight">To make this example work, you'll need to add your Google Maps API key to this example.</p>

    </article>
  </div>
</body></html>

	<!DOCTYPE html>
	<head>
	<meta chartset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="Scott Mebberson">
	<title>scottmebberson.com example</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="http://scottmebberson.com/css/examples.css" type="text/css" media="screen">
	<style>
	#mapcanvas {
	width: 100%;
	height: 240px;
	}
	</style>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
	</head>
	<body>
	<header>
	<h1>scottmebberson.com</h1>
	</header>
	<div class="content">
	<article>
	<header>
	<h1>Drawing on a Google Map using pixel space</h1>
	</header>
	<script type="text/javascript">
	(function() {
	var convertPixels, initialiseGoogleMap,
	_this = this;

	initialiseGoogleMap = function() {
	var mapOptions;
	mapOptions = {
	center: new google.maps.LatLng(-34.397, 150.644),
	zoom: 8,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	this.map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
	this.overlay = new google.maps.OverlayView();
	this.overlay.draw = function() {};
	this.overlay.setMap(this.map);
	return setTimeout(getCenter, 100);
	};

	this.lineSymbol = {
	path: 'M 0,-1 0, 1',
	strokeOpacity: 1,
	strokeWeight: 1,
	scale: 3
	};

	this.getCenter = function() {
	var bottom, center, middle, polyline;
	center = map.getCenter();
	middle = $('#mapcanvas').width() / 2;
	bottom = $('#mapcanvas').height();
	_this.aLines = [convertPixels(middle, 0), convertPixels(middle, bottom)];
	return polyline = new google.maps.Polyline({
	path: aLines,
	strokeOpacity: 0,
	icons: [
	{
	icon: lineSymbol,
	offset: '0',
	repeat: '10px'
	}
	],
	map: map
	});
	};

	convertPixels = function(x, y) {
	return overlay.getProjection().fromDivPixelToLatLng(new google.maps.Point(x, y));
	};

	window.addEventListener('load', initialiseGoogleMap);

	}).call(this);
	</script>

	<div id="mapcanvas"></div>

	<p>This example draws on a Google Map using pixel space, rather than specific knowledge of lat/lng or map zoom and center. You should see a vertical dashed line straight through the center of the map above.</p>

	<p class="highlight">To make this example work, you'll need to add your Google Maps API key to this example.</p>

	</article>
	</div>
	</body></html>