Google Map Polymer web component 7/9/14

By Chris Johnson

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 components1.

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 today2:

<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 simpler3:

<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.


  1. InfoQ has a solid primer on web components and Polymer

  2. I modified the example code slightly for brevity. 

  3. Adding pins and popup windows is also pretty easy.