Google Maps API/HTML5 Interaction


Although this map looks simple, I have a feeling it will be a game-changer for me (actually, it is pretty simple once you figure it out). The map itself is fairly basic: the entire world (256 x 256 pixels). You can’t interact with it directly (ie. no pan, zoom, etc.) because it’s underneath an HTML5 canvas. Everything else is made with HTML5 and KineticJS: longitude lines, circle marker, and textbox.

The real beauty of this map is the ability to pass HTML5 events (in this case, “dragstart” and “dragend” ) to the Google Map. Specifically, you can send pixel coordinates of where you drag objects to (“clientX” and “clientY”) and convert them to Lat/Long coordinates on the map.

circle.on('dragend', function(event)
            var proj = map.getProjection();
            var point = new google.maps.Point(event.clientX, event.clientY);
            var location = proj.fromPointToLatLng(point); // lat/long coordinates

That’s the meat and potatoes of it. I added a geocoder to figure out the name of the state/province of the coordinates, and, why not, some KineticJS animations as an example of actually using the HTML objects.

Note: this example requires an HTML5 compliant browser – that means no Internet Explorer or you’ll blow its mind.


One thought on “Google Maps API/HTML5 Interaction

  1. Pingback: PaperJS on Google Map | Darren's Side Projects

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s