fix: region tags should be unique and start with maps_

build/test_tags.sh

@@ -0,0 +1,51 @@
+#!/bin/bash
+
+tmp=$(mktemp)
+
+grep -or "\[START [a-zA-Z0-9_]*\]" samples/**/src >$tmp
+
+# use associative array to track tags
+declare -A tags
+
+# track errors
+errors_duplicate=()
+errors_lint=()
+
+while read l; do
+    path=$(echo "$l" | cut -d: -f1)
+
+    # use package name without file extension
+    package=$(dirname $path)
+
+    # region tag including START
+    region=$(echo "$l" | cut -d: -f2)
+
+    if [ "${tags[$region]}" == "" ]; then
+        tags[$region]=$package
+    else
+        if [ "${tags[$region]}" != "$package" ]; then
+            errors_duplicate+=("duplicate for $region: $package conflicts with ${tags[$region]}")
+        fi
+    fi
+
+    # Check if begins with [START maps_*]
+    if [ "${region:7:5}" != "maps_" ]; then
+        errors_lint+=("region tag should start with maps_: $region $path")
+    fi
+done <$tmp
+
+if [ "${#errors_duplicate[@]}" == "0" ] && [ "${#errors_lint[@]}" == "0" ]; then
+    echo -e "\033[32m Passed: Region tags passed checks!\033[0m"
+    exit 0
+fi
+
+# print errors
+(
+    IFS=$'\n'
+    echo -e "\033[31m Failed: Invalid region tags!"
+    echo "${errors_duplicate[*]}"
+    echo "${errors_lint[*]}"
+    echo -e "\033[0m"
+)
+
+exit 1

package.json

@@ -27,7 +27,7 @@
     "build:js": "lerna run build:js",
     "build:watch": "npm-watch build",
     "build:move": "lerna run build:move && cp index.html dist/index.html",
-    "ci": "npm run lint && npm run test && npm build",
+    "ci": "npm run lint && npm run test",
     "defaults:data:merge": "lerna exec '../../build/merge_default_data.sh'",
     "defaults:package:merge": "lerna exec '../../build/merge_default_package.sh'",
     "format": "npm run format:root && lerna run format",
@@ -36,7 +36,8 @@
     "lint": "lerna run lint",
     "serve": "firebase serve --port 8080",
     "serve:watch": "run-p build:watch serve",
-    "test": "lerna run test"
+    "test": "lerna run test && npm run test:tags",
+    "test:tags": "./build/test_tags.sh"
   },
   "dependencies": {},
   "devDependencies": {

samples/layer-data-dynamic/src/index.js

@@ -27,7 +27,7 @@ export function initMap() {
     "https://storage.googleapis.com/mapsdevsite/json/google.json"
   );
 
-  // [START snippet]
+  // [START maps_layer_data_dynamic_snippet]
   // Color each letter gray. Change the color when the isColorful property
   // is set to true.
   map.data.setStyle(function(feature) {
@@ -58,6 +58,6 @@ export function initMap() {
   map.data.addListener("mouseout", function(event) {
     map.data.revertStyle();
   });
-  // [END snippet]
+  // [END maps_layer_data_dynamic_snippet]
 }
 // [END maps_layer_data_dynamic]

samples/layer-data-event/src/index.js

@@ -35,13 +35,13 @@ export function initMap() {
     });
   });
 
-  // [START snippet]
+  // [START maps_layer_data_event_snippet]
   // Set mouseover event for each feature.
   map.data.addListener("mouseover", function(event) {
     document.getElementById("info-box").textContent = event.feature.getProperty(
       "letter"
     );
   });
-  // [END snippet]
+  // [END maps_layer_data_event_snippet]
 }
 // [END maps_layer_data_event]

samples/overlay-hideshow/src/index.js

@@ -107,7 +107,7 @@ USGSOverlay.prototype.onRemove = function() {
   this.div_.parentNode.removeChild(this.div_);
 };
 
-// [START region_hideshow]
+// [START maps_overlay_hideshow_snippet]
 // Set the visibility to 'hidden' or 'visible'.
 USGSOverlay.prototype.hide = function() {
   if (this.div_) {
@@ -143,5 +143,5 @@ USGSOverlay.prototype.toggleDOM = function() {
     this.setMap(this.map_);
   }
 };
-// [END region_hideshow]
+// [END maps_overlay_hideshow_snippet]
 // [END maps_overlay_hideshow]

samples/overlay-hideshow/src/index.njk

@@ -15,7 +15,7 @@ limitations under the License.
 -->
 {% extends '../../../shared/layout.njk'%} {% block html %}
 <!-- [START maps_overlay_hideshow] -->
-<!-- [START region_toolbar] -->
+<!-- [START maps_overlay_hideshow_toolbar] -->
 <!-- Add an input button to initiate the toggle method on the overlay. -->
 <div id="floating-panel">
   <input type="button" value="Toggle visibility" onclick="overlay.toggle();" />
@@ -25,7 +25,7 @@ limitations under the License.
     onclick="overlay.toggleDOM();"
   />
 </div>
-<!-- [END region_toolbar] -->
+<!-- [END maps_overlay_hideshow_toolbar] -->
 <div id="map"></div>
 <!-- [END maps_overlay_hideshow] -->
 {% endblock %}

samples/overlay-remove/src/index.js

@@ -46,9 +46,9 @@ export function addOverlay() {
   historicalOverlay.setMap(map);
 }
 
-// [START region_removal]
+// [START maps_overlay_remove_region_removal]
 export function removeOverlay() {
   historicalOverlay.setMap(null);
 }
-// [END region_removal]
+// [END maps_overlay_remove_region_removal]
 // [END maps_overlay_remove]

samples/overlay-simple/src/index.js

@@ -15,7 +15,7 @@
  */
 
 // [START maps_overlay_simple]
-// [START region_initialization]
+// [START maps_overlay_simple_region_initialization]
 // This example creates a custom overlay called USGSOverlay, containing
 // a U.S. Geological Survey (USGS) image of the relevant area on the map.
 
@@ -52,9 +52,9 @@ export function initMap() {
   // the bounds of the image, and a reference to the map.
   overlay = new USGSOverlay(bounds, srcImage, map);
 }
-// [END region_initialization]
+// [END maps_overlay_simple_region_initialization]
 
-// [START region_constructor]
+// [START maps_overlay_simple_region_constructor]
 /** @constructor */
 export function USGSOverlay(bounds, image, map) {
   // Initialize all properties.
@@ -70,9 +70,9 @@ export function USGSOverlay(bounds, image, map) {
   // Explicitly call setMap on this overlay.
   this.setMap(map);
 }
-// [END region_constructor]
+// [END maps_overlay_simple_region_constructor]
 
-// [START region_attachment]
+// [START maps_overlay_simple_region_attachment]
 /**
  * onAdd is called when the map's panes are ready and the overlay has been
  * added to the map.
@@ -97,9 +97,9 @@ USGSOverlay.prototype.onAdd = function() {
   var panes = this.getPanes();
   panes.overlayLayer.appendChild(div);
 };
-// [END region_attachment]
+// [END maps_overlay_simple_region_attachment]
 
-// [START region_drawing]
+// [START maps_overlay_simple_region_drawing]
 USGSOverlay.prototype.draw = function() {
   // We use the south-west and north-east
   // coordinates of the overlay to peg it to the correct position and size.
@@ -119,14 +119,14 @@ USGSOverlay.prototype.draw = function() {
   div.style.width = ne.x - sw.x + "px";
   div.style.height = sw.y - ne.y + "px";
 };
-// [END region_drawing]
+// [END maps_overlay_simple_region_drawing]
 
-// [START region_removal]
+// [START maps_overlay_simple_region_removal]
 // The onRemove() method will be called automatically from the API if
 // we ever set the overlay's map property to 'null'.
 USGSOverlay.prototype.onRemove = function() {
   this.div_.parentNode.removeChild(this.div_);
   this.div_ = null;
 };
-// [END region_removal]
+// [END maps_overlay_simple_region_removal]
 // [END maps_overlay_simple]

samples/overlay-symbol-arrow/src/index.js

@@ -25,7 +25,7 @@ export function initMap() {
     mapTypeId: "terrain"
   });
 
-  // [START region_polyline]
+  // [START maps_overlay_symbol_arrow_region_polyline]
   // Define a symbol using a predefined path (an arrow)
   // supplied by the Google Maps JavaScript API.
   var lineSymbol = {
@@ -43,6 +43,6 @@ export function initMap() {
     ],
     map: map
   });
-  // [END region_polyline]
+  // [END maps_overlay_symbol_arrow_region_polyline]
 }
 // [END maps_overlay_symbol_arrow]

samples/overlay-symbol-custom/src/index.js

@@ -24,7 +24,7 @@ export function initMap() {
     mapTypeId: "terrain"
   });
 
-  // [START region_polyline]
+  // [START maps_overlay_symbol_custom_region_polyline]
   // Define the custom symbols. All symbols are defined via SVG path notation.
   // They have varying stroke color, fill color, stroke weight,
   // opacity and rotation properties.
@@ -67,6 +67,6 @@ export function initMap() {
     ],
     map: map
   });
-  // [END region_polyline]
+  // [END maps_overlay_symbol_custom_region_polyline]
 }
 // [END maps_overlay_symbol_custom]

samples/overlay-symbol-dashed/src/index.js

@@ -26,7 +26,7 @@ export function initMap() {
     mapTypeId: "terrain"
   });
 
-  // [START region_polyline]
+  // [START maps_overlay_symbol_dashed_region_polyline]
   // Define a symbol using SVG path notation, with an opacity of 1.
   var lineSymbol = {
     path: "M 0,-1 0,1",
@@ -49,6 +49,6 @@ export function initMap() {
     ],
     map: map
   });
-  // [END region_polyline]
+  // [END maps_overlay_symbol_dashed_region_polyline]
 }
 // [END maps_overlay_symbol_dashed]

samples/places-autocomplete-addressform/src/index.js

@@ -51,7 +51,7 @@ export function initAutocomplete() {
   autocomplete.addListener("place_changed", fillInAddress);
 }
 
-// [START region_fillform]
+// [START maps_places_autocomplete_addressform_fillform]
 export function fillInAddress() {
   // Get the place details from the autocomplete object.
   var place = autocomplete.getPlace();
@@ -71,9 +71,9 @@ export function fillInAddress() {
     }
   }
 }
-// [END region_fillform]
+// [END maps_places_autocomplete_addressform_fillform]
 
-// [START region_geolocation]
+// [START maps_places_autocomplete_addressform_geolocation]
 // Bias the autocomplete object to the user's geographical location,
 // as supplied by the browser's 'navigator.geolocation' object.
 export function geolocate() {
@@ -91,5 +91,5 @@ export function geolocate() {
     });
   }
 }
-// [END region_geolocation]
+// [END maps_places_autocomplete_addressform_geolocation]
 // [END maps_places_autocomplete_addressform]

samples/places-autocomplete-hotelsearch/src/index.js

@@ -175,7 +175,7 @@ export function clearMarkers() {
   markers = [];
 }
 
-// [START region_setcountry]
+// [START maps_places_autocomplete_hotelsearch]
 // Set the country restriction based on user input.
 // Also center and zoom the map on the given country.
 export function setAutocompleteCountry() {
@@ -192,7 +192,7 @@ export function setAutocompleteCountry() {
   clearResults();
   clearMarkers();
 }
-// [END region_setcountry]
+// [END maps_places_autocomplete_hotelsearch]
 
 export function dropMarker(i) {
   return function() {

samples/places-searchbox/src/index.js

@@ -41,7 +41,7 @@ export function initAutocomplete() {
   });
 
   var markers = [];
-  // [START region_getplaces]
+  // [START maps_places_searchbox_getplaces]
   // Listen for the event fired when the user selects a prediction and retrieve
   // more details for that place.
   searchBox.addListener("places_changed", function() {
@@ -91,7 +91,7 @@ export function initAutocomplete() {
     });
     map.fitBounds(bounds);
   });
-  // [END region_getplaces]
+  // [END maps_places_searchbox_getplaces]
 }
 
 // [END maps_places_searchbox]

samples/polygon-draggable/src/index.js

@@ -32,7 +32,7 @@ export function initMap() {
     { lat: 32.321, lng: -44.757 }
   ];
 
-  // [START region_red_triangle]
+  // [START maps_polygon_draggable_red_triangle]
   var redCoords = [
     { lat: 25.774, lng: -80.19 },
     { lat: 18.466, lng: -66.118 },
@@ -51,7 +51,7 @@ export function initMap() {
     draggable: true,
     geodesic: true
   });
-  // [END region_red_triangle]
+  // [END maps_polygon_draggable_red_triangle]
 
   // Construct a draggable blue triangle with geodesic set to false.
   new google.maps.Polygon({

samples/user-editable-shapes/src/index.js

@@ -22,7 +22,7 @@ export function initMap() {
     zoom: 9
   });
 
-  // [START region_rectangle]
+  // [START maps_user_editable_shapes_rectangle]
   var bounds = {
     north: 44.599,
     south: 44.49,
@@ -35,7 +35,7 @@ export function initMap() {
     bounds: bounds,
     editable: true
   });
-  // [END region_rectangle]
+  // [END maps_user_editable_shapes_rectangle]
   rectangle.setMap(map);
 }
 // [END maps_user_editable_shapes]