Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Drawing a Google Map using pixel space

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.

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment