Google Map Polymer web component 7/9/14

Google has been doing incredible work to advance the proposed web component standard with their Polymer project. Web components let web developers define their own HTML tags, and Polymer is a framework for creating and using those components¹.

Of special interest to me is the Polymer Google Map component. Normally, adding custom map widgets to your page is an annoying mix of CSS, Javascript and HTML. Here is a an example from the Google Maps documentation of how you have to initialize a Google Map today²:

<style>
  #map-canvas { height: 100% }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script>
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(37.77493, -122.41942),
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>

If you’re using Polymer’s Google Map component, the code gets a lot simpler³:

<style>
  google-map { display: block; height: 100%; }
</style>
<google-map latitude="37.77493" longitude="-122.41942" zoom="8"></google-map>

See a demo of the above code.

If you want to know more, Google engineer Eric Bidelman explains the map component in this video:

Unfortunately, we can only use Polymer on bleeding edge browsers, but I look forward to using it and web components in the future.