Polygons with labels

by Wolf

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOW7b0eVJzLBlTz1eY9XP04VJ48C_uaMQ&v=3.31">
</script>
<script src="https://rawgit.com/googlemaps/js-map-label/gh-pages/src/maplabel-compiled.js">
</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

// This example creates draggable triangles on the map.
// Note also that the red triangle is geodesic, so its shape changes
// as you drag it north or south.

function init() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  var blueCoords = [
    {lat: 25.774, lng: -60.190},
    {lat: 18.466, lng: -46.118},
    {lat: 32.321, lng: -44.757}
  ];

  var redCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Construct a draggable red triangle with geodesic set to true.
  var redT = new google.maps.Polygon({
    map: map,
    paths: redCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    draggable: true,
    geodesic: true
  });

  // Construct a draggable blue triangle with geodesic set to false.
  var blueT = new google.maps.Polygon({
    map: map,
    paths: blueCoords,
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.35,
    draggable: true,
    geodesic: false
  });

  var redLabel = new MapLabel({
    text: 'Red',
    position: quickAndDirtyCenter(redT.getPath()),
    map: map,
    fontSize: 35,
    align: 'center'
  });
  redT.bindTo('position', redLabel);
//  redT.addListener('drag', function(e) {
//    redLabel.set('position', quickAndDirtyCenter(redT.getPath()));
//  });
//  redLabel.set('position', quickAndDirtyCenter(redT.getPath()));
}

function quickAndDirtyCenter(coords) {
  var lat;
  var lng;
	for (var i=0; i < coords.getLength(); i++) {
  	lat += coords.getAt(i).lat;
    lng += coords.getAt(i).lng;
  }
  lat = lat/coords.getLength();
  lng = lng/coords.getLength();
  return new google.maps.LatLng(lat, lng);
}

google.maps.event.addDomListener(window, 'load', init);