Polymer Google Map

Polymer Google Map is a custom element that makes it easy to embed Google Maps into your Polymer app. This element provides a high-level API for creating and manipulating Google Maps.

Features

• Customizable map marker icons
• Map click event handling
• Dynamic map rendering based on data input
• Support for multiple maps on a single page
• API for controlling map zoom and center
• Direction and route functionality
• Geolocation functionality

Installation

To use Polymer Google Map, add the following dependencies to your project:

<link rel="import" href="../polymer/polymer-element.html">
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<link rel="import" href="polymer-google-map.html">

Usage

You can add Polymer Google Map to your app like any other Polymer element. Simply use the following code:

<polymer-google-map
  api-key="YOUR_API_KEY"
  zoom="13"
  center-lat="37.77493"
  center-lng="-122.419416"
  style="height: 300px;"
></polymer-google-map>

This will add a map to your app with the specified zoom level and center coordinates.

Adding markers

To add a marker to the map, use the following code:

<polymer-google-map-marker
  latitude="37.77493"
  longitude="-122.419416"
></polymer-google-map-marker>

Handling map click events

To handle a map click event, use the following code:

<polymer-google-map
  on-google-map-click="_handleMapClick"
></polymer-google-map>

_handleMapClick: function(event) {
  var latitude = event.detail.latLng.lat();
  var longitude = event.detail.latLng.lng();
  // do something with the coordinates
}

Rendering maps based on data input

To render a map based on data input, use Polymer's data binding features. For example:

<template is="dom-repeat" items="{{locations}}">
  <polymer-google-map
    zoom="13"
    center-lat="{{item.latitude}}"
    center-lng="{{item.longitude}}"
    style="height: 300px;"
  >
    <polymer-google-map-marker
      latitude="{{item.latitude}}"
      longitude="{{item.longitude}}"
    ></polymer-google-map-marker>
  </polymer-google-map>
</template>

Controlling map zoom and center

You can control the map's zoom and center using the zoom and center attributes. For example:

<polymer-google-map
  zoom="{{mapZoom}}"
  center="{{mapCenter}}"
  style="height: 300px;"
></polymer-google-map>

...

this.mapZoom = 10;
this.mapCenter = {
  latitude: 37.77493,
  longitude: -122.419416
};

Direction and route functionality

Polymer Google Map provides an API for adding directions and routes to the map. For example:

<polymer-google-map
  api-key="YOUR_API_KEY"
  style="height: 300px;"
></polymer-google-map>

...

var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer({
  map: this.$.map.$,
  suppressMarkers: true
});

directionsService.route({
  origin: 'San Francisco, CA',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING'
}, function(result, status) {
  if (status === 'OK') {
    directionsRenderer.setDirections(result);
  }
});

Geolocation functionality

Polymer Google Map provides an API for handling geolocation. For example:

<polymer-google-map
  api-key="YOUR_API_KEY"
  style="height: 300px;"
></polymer-google-map>

...

navigator.geolocation.getCurrentPosition(function(position) {
  this.$.map.setCenter({
    latitude: position.coords.latitude,
    longitude: position.coords.longitude
  });
}.bind(this));

Conclusion

Polymer Google Map is a powerful and flexible element for embedding Google Maps into your Polymer app. With support for customizable marker icons, event handling, dynamic rendering, and much more, it provides everything you need to create rich, interactive maps.