如果我有GeoJSON数据,则单击地图时的Google Map Marker / Pointer不起作用

时间:2019-03-17 07:13:40

标签: google-maps google-maps-markers geojson

我在GeoJSON多边形内部添加指针(标记)时遇到问题。 这样,我可以在GeoJSON多边形之外添加标记,但不能在多边形内部添加标记。

screenshot of map

但是当我删除map.data.loadGeoJson('gadm36_PHL_1.json');时,该区域是可单击的。

这是JSON文件: gadm36_PHL_1.json 和代码:

<script>
        /**
         * Create new map
         */
        var infowindow;
        var map;
        var red_icon =  'http://maps.google.com/mapfiles/ms/icons/red-dot.png' ;
        var purple_icon =  'http://maps.google.com/mapfiles/ms/icons/purple-dot.png' ;
        var locations = <?php get_confirmed_locations() ?>;
        var myOptions = {
            zoom: 9,
            center: new google.maps.LatLng(14.1864178, 120.5176283),
            mapTypeId: 'terrain'
        };
        map = new google.maps.Map(document.getElementById('map'), myOptions);
        map.data.loadGeoJson('gadm36_PHL_1.json');

        map.data.setStyle(function (feature) {
             var strokeColor = feature.getProperty('strokeColor');
             return {
                 strokeColor: "#ff0000",
                 strokeWeight: 1,
                 fillColor: "#555555",
                 fillOpacity: 0,


             };
         });


        /**
         * Global marker object that holds all markers.
         * @type {Object.<string, google.maps.LatLng>}
         */
        var markers = {};

        /**
         * Concatenates given lat and lng with an underscore and returns it.
         * This id will be used as a key of marker to cache the marker in markers object.
         * @param {!number} lat Latitude.
         * @param {!number} lng Longitude.
         * @return {string} Concatenated marker id.
         */
        var getMarkerUniqueId= function(lat, lng) {
            return lat + '_' + lng;
        };

        /**
         * Creates an instance of google.maps.LatLng by given lat and lng values and returns it.
         * This function can be useful for getting new coordinates quickly.
         * @param {!number} lat Latitude.
         * @param {!number} lng Longitude.
         * @return {google.maps.LatLng} An instance of google.maps.LatLng object
         */
        var getLatLng = function(lat, lng) {
            return new google.maps.LatLng(lat, lng);
        };

        /**
         * Binds click event to given map and invokes a callback that appends a new marker to clicked location.
         */
        var addMarker = google.maps.event.addListener(map, 'click', function(e) {
            var lat = e.latLng.lat(); // lat of clicked point
            var lng = e.latLng.lng(); // lng of clicked point
            var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
            var marker = new google.maps.Marker({
                position: getLatLng(lat, lng),
                map: map,
                animation: google.maps.Animation.DROP,
                id: 'marker_' + markerId,
                html: "    <div id='info_"+markerId+"'>\n" +
                "        <table class=\"map1\">\n" +
                  "            <tr>\n" +
                "                <td><a>title:</a></td>\n" +
                "                <td><textarea  id='manual_title' placeholder='Title'></textarea></td></tr>\n" +
                "            <tr><td></td></tr>\n" +
                "            <tr>\n" +
                "                <td><a>Description:</a></td>\n" +
                "                <td><textarea  id='manual_description' placeholder='Description'></textarea></td></tr>\n" +
                "            <tr><td></td><td><input type='button' value='Save' onclick='saveData("+lat+","+lng+")'/></td></tr>\n" +
                "        </table>\n" +
                "    </div>"
            });
            markers[markerId] = marker; // cache marker in markers object
            bindMarkerEvents(marker); // bind right click event to marker
            bindMarkerinfo(marker); // bind infowindow with click event to marker
        });

        /**
         * Binds  click event to given marker and invokes a callback function that will remove the marker from map.
         * @param {!google.maps.Marker} marker A google.maps.Marker instance that the handler will binded.
         */
        var bindMarkerinfo = function(marker) {
            google.maps.event.addListener(marker, "click", function (point) {
                var markerId = getMarkerUniqueId(point.latLng.lat(), point.latLng.lng()); // get marker id by using clicked point's coordinate
                var marker = markers[markerId]; // find marker
                infowindow = new google.maps.InfoWindow();
                infowindow.setContent(marker.html);
                infowindow.open(map, marker);
                // removeMarker(marker, markerId); // remove it
            });
        };

        /**
         * Binds right click event to given marker and invokes a callback function that will remove the marker from map.
         * @param {!google.maps.Marker} marker A google.maps.Marker instance that the handler will binded.
         */
        var bindMarkerEvents = function(marker) {
            google.maps.event.addListener(marker, "rightclick", function (point) {
                var markerId = getMarkerUniqueId(point.latLng.lat(), point.latLng.lng()); // get marker id by using clicked point's coordinate
                var marker = markers[markerId]; // find marker
                removeMarker(marker, markerId); // remove it
            });
        };

        /**
         * Removes given marker from map.
         * @param {!google.maps.Marker} marker A google.maps.Marker instance that will be removed.
         * @param {!string} markerId Id of marker.
         */
        var removeMarker = function(marker, markerId) {
            marker.setMap(null); // set markers setMap to null to remove it from map
            delete markers[markerId]; // delete marker instance from markers object
        };


        /**
         * loop through (Mysql) dynamic locations to add markers to map.
         */
        var i ; var confirmed = 0;
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon :   locations[i][4] === '1' ?  red_icon  : purple_icon,
                html: "<div>\n" +
                "<table class=\"map1\">\n" +
                "<tr>\n" +
                "<td><a>Title:</a></td>\n" +
                "<td><textarea disabled id='manual_title' placeholder='Title'>"+locations[i][5]+"</textarea></td>"+
                "</tr>\n" +
                "<tr>\n" +
                "<td><a>Description:</a></td>\n" +
                "<td><textarea disabled id='manual_description' placeholder='Description'>"+locations[i][3]+"</textarea></td>"+
                "</tr>\n" +
                "</table>\n" +
                "</div>"
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow = new google.maps.InfoWindow();
                    confirmed =  locations[i][4] === '1' ?  'checked'  :  0;
                    $("#confirmed").prop(confirmed,locations[i][4]);
                    $("#id").val(locations[i][0]);
                    $("#description").val(locations[i][3]);
                    $("#form").show();
                    infowindow.setContent(marker.html);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }

        /**
         * SAVE save marker from map.
         * @param lat  A latitude of marker.
         * @param lng A longitude of marker.
         */
        function saveData(lat,lng) {
            var biomap_title = document.getElementById('manual_title').value;
            var description = document.getElementById('manual_description').value;
            var url = 'locations_model.php?add_location&description=' + description + '&lat=' + lat + '&lng=' + lng + '&title=' + biomap_title ;
            downloadUrl(url, function(data, responseCode) {
                if (responseCode === 200  && data.length > 1) {
                    var markerId = getMarkerUniqueId(lat,lng); // get marker id by using clicked point's coordinate
                    var manual_marker = markers[markerId]; // find marker
                    manual_marker.setIcon(purple_icon);
                    infowindow.close();
                    infowindow.setContent("<div style=' color: purple; font-size: 25px;'> Success Add Marker,</div>");
                    infowindow.open(map, manual_marker);

                }else{
                    console.log(responseCode);
                    console.log(data);
                    infowindow.setContent("<div style='color: red; font-size: 25px;'>Inserting Errors</div>");
                }
            });
        }

        function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            request.onreadystatechange = function() {
                if (request.readyState == 4) {
                    callback(request.responseText, request.status);
                }
            };

            request.open('GET', url, true);
            request.send(null);
        }


    </script>

1 个答案:

答案 0 :(得分:2)

How to add markers on top of a polygon using Google Maps Javascript API?重复

使GeoJSON多边形“不可点击”(clickable:false):

map.data.setStyle(function(feature) {
  var strokeColor = feature.getProperty('strokeColor');
  return {
    strokeColor: "#ff0000",
    strokeWeight: 1,
    fillColor: "#555555",
    fillOpacity: 0,
    clickable: false
  };
})

proof of concept fiddle

screenshot of resulting map with marker inside polygon

代码段:

/**
 * Create new map
 */
var infowindow;
var map;
var myOptions = {
  zoom: 9,
  center: new google.maps.LatLng(17.555172, 120.825245),
  mapTypeId: 'terrain'
};
map = new google.maps.Map(document.getElementById('map'), myOptions);

map.data.setStyle(function(feature) {
  var strokeColor = feature.getProperty('strokeColor');
  return {
    strokeColor: "#ff0000",
    strokeWeight: 1,
    fillColor: "#555555",
    fillOpacity: 0,
    clickable: false
  };
});


/**
 * Global marker object that holds all markers.
 * @type {Object.<string, google.maps.LatLng>}
 */
var markers = {};

/**
 * Concatenates given lat and lng with an underscore and returns it.
 * This id will be used as a key of marker to cache the marker in markers object.
 * @param {!number} lat Latitude.
 * @param {!number} lng Longitude.
 * @return {string} Concatenated marker id.
 */
var getMarkerUniqueId = function(lat, lng) {
  return lat + '_' + lng;
};

/**
 * Creates an instance of google.maps.LatLng by given lat and lng values and returns it.
 * This function can be useful for getting new coordinates quickly.
 * @param {!number} lat Latitude.
 * @param {!number} lng Longitude.
 * @return {google.maps.LatLng} An instance of google.maps.LatLng object
 */
var getLatLng = function(lat, lng) {
  return new google.maps.LatLng(lat, lng);
};

/**
 * Binds click event to given map and invokes a callback that appends a new marker to clicked location.
 */
var addMarker = google.maps.event.addListener(map, 'click', function(e) {
  var lat = e.latLng.lat(); // lat of clicked point
  var lng = e.latLng.lng(); // lng of clicked point
  var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
  var marker = new google.maps.Marker({
    position: getLatLng(lat, lng),
    map: map,
    animation: google.maps.Animation.DROP,
    id: 'marker_' + markerId,
    html: "    <div id='info_" + markerId + "'>\n" +
      "        <table class=\"map1\">\n" +
      "            <tr>\n" +
      "                <td><a>title:</a></td>\n" +
      "                <td><textarea  id='manual_title' placeholder='Title'></textarea></td></tr>\n" +
      "            <tr><td></td></tr>\n" +
      "            <tr>\n" +
      "                <td><a>Description:</a></td>\n" +
      "                <td><textarea  id='manual_description' placeholder='Description'></textarea></td></tr>\n" +
      "            <tr><td></td><td><input type='button' value='Save' onclick='saveData(" + lat + "," + lng + ")'/></td></tr>\n" +
      "        </table>\n" +
      "    </div>"
  });
  markers[markerId] = marker; // cache marker in markers object
  bindMarkerEvents(marker); // bind right click event to marker
  bindMarkerinfo(marker); // bind infowindow with click event to marker
});

/**
 * Binds  click event to given marker and invokes a callback function that will remove the marker from map.
 * @param {!google.maps.Marker} marker A google.maps.Marker instance that the handler will binded.
 */
var bindMarkerinfo = function(marker) {
  google.maps.event.addListener(marker, "click", function(point) {
    var markerId = getMarkerUniqueId(point.latLng.lat(), point.latLng.lng()); // get marker id by using clicked point's coordinate
    var marker = markers[markerId]; // find marker
    infowindow = new google.maps.InfoWindow();
    infowindow.setContent(marker.html);
    infowindow.open(map, marker);
    // removeMarker(marker, markerId); // remove it
  });
};

/**
 * Binds right click event to given marker and invokes a callback function that will remove the marker from map.
 * @param {!google.maps.Marker} marker A google.maps.Marker instance that the handler will binded.
 */
var bindMarkerEvents = function(marker) {
  google.maps.event.addListener(marker, "rightclick", function(point) {
    var markerId = getMarkerUniqueId(point.latLng.lat(), point.latLng.lng()); // get marker id by using clicked point's coordinate
    var marker = markers[markerId]; // find marker
    removeMarker(marker, markerId); // remove it
  });
};

/**
 * Removes given marker from map.
 * @param {!google.maps.Marker} marker A google.maps.Marker instance that will be removed.
 * @param {!string} markerId Id of marker.
 */
var removeMarker = function(marker, markerId) {
  marker.setMap(null); // set markers setMap to null to remove it from map
  delete markers[markerId]; // delete marker instance from markers object
};
var oneAdmPoly = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [120.53491211, 17.70373917],
          [120.53601837, 17.70524979],
          [120.53777313, 17.70808029],
          [120.54038239, 17.7118206],
          [120.54297638, 17.71578979],
          [120.54519653, 17.72039032],
          [120.54759216, 17.7249794],
          [120.55059052, 17.72960091],
          [120.55259705, 17.73563004],
          [120.55415344, 17.73990059],
          [120.55683899, 17.74518967],
          [120.55805206, 17.74831009],
          [120.55988312, 17.75181007],
          [120.56101227, 17.7563591],
          [120.56228638, 17.76033974],
          [120.56376648, 17.76428986],
          [120.56421661, 17.76819038],
          [120.56417084, 17.76852989],
          [120.5651474, 17.77313995],
          [120.56684875, 17.7768898],
          [120.56951141, 17.78149033],
          [120.57090759, 17.78616905],
          [120.57302856, 17.78937912],
          [120.57581329, 17.79256058],
          [120.57910156, 17.79611969],
          [120.58183289, 17.79924965],
          [120.58683777, 17.80186081],
          [120.59055328, 17.80426979],
          [120.59353638, 17.80536079],
          [120.59751129, 17.80771065],
          [120.59853363, 17.80816078],
          [120.60128021, 17.80945969],
          [120.60608673, 17.81038094],
          [120.61035919, 17.81130028],
          [120.61499786, 17.8133297],
          [120.61875153, 17.81386948],
          [120.623703, 17.81484032],
          [120.62667084, 17.81580925],
          [120.62962341, 17.81777954],
          [120.63240814, 17.81932068],
          [120.63485718, 17.81987953],
          [120.6368866, 17.82031059],
          [120.64169312, 17.82147026],
          [120.64742279, 17.82275963],
          [120.6516037, 17.82366943],
          [120.65952301, 17.8254509],
          [120.66414642, 17.82718086],
          [120.66681671, 17.82782936],
          [120.6709671, 17.82831001],
          [120.67590332, 17.82943916],
          [120.68112946, 17.83065033],
          [120.68512726, 17.83214951],
          [120.69017029, 17.8348999],
          [120.69248199, 17.83699989],
          [120.69477081, 17.83971977],
          [120.69776154, 17.84223938],
          [120.70027924, 17.84531021],
          [120.70211029, 17.84745026],
          [120.70345306, 17.84877968],
          [120.70561981, 17.85217094],
          [120.70757294, 17.85512924],
          [120.71066284, 17.85841942],
          [120.71240997, 17.8603096],
          [120.71369934, 17.86305046],
          [120.71465302, 17.86554909],
          [120.71611786, 17.87062073],
          [120.71716309, 17.87368965],
          [120.7181778, 17.87579918],
          [120.71933746, 17.87801933],
          [120.7206192, 17.87982941],
          [120.72223663, 17.88361931],
          [120.72329712, 17.88534927],
          [120.72457123, 17.88788033],
          [120.72624207, 17.89093018],
          [120.72754669, 17.89289093],
          [120.72952271, 17.89417076],
          [120.73191071, 17.89654922],
          [120.73571777, 17.89883041],
          [120.73932648, 17.9005394],
          [120.74299622, 17.90180969],
          [120.74752045, 17.90267944],
          [120.74963379, 17.90307999],
          [120.75491333, 17.90361023],
          [120.7625885, 17.90657043],
          [120.76525116, 17.90708923],
          [120.76940918, 17.90739059],
          [120.7752533, 17.90969086],
          [120.78321838, 17.9116993],
          [120.78663635, 17.91428947],
          [120.79206085, 17.91880989],
          [120.79750824, 17.92383957],
          [120.80409241, 17.92993927],
          [120.80957031, 17.93555069],
          [120.81732941, 17.94426918],
          [120.82067871, 17.94911957],
          [120.82556915, 17.9552803],
          [120.83323669, 17.95998001],
          [120.84056854, 17.96200943],
          [120.84979248, 17.96340942],
          [120.85710907, 17.96282005],
          [120.86457825, 17.96209908],
          [120.87207794, 17.96043015],
          [120.87905884, 17.95825958],
          [120.88497925, 17.95601082],
          [120.88954926, 17.95413971],
          [120.89431763, 17.95210075],
          [120.89946747, 17.9509201],
          [120.90374756, 17.95029068],
          [120.90973663, 17.9505806],
          [120.91484833, 17.95281982],
          [120.9201889, 17.95693016],
          [120.9226532, 17.96063995],
          [120.92523193, 17.9647007],
          [120.9265976, 17.97135925],
          [120.92759705, 17.97463036],
          [120.92783356, 17.97806931],
          [120.93972015, 17.97071075],
          [120.94793701, 17.96769905],
          [120.95731354, 17.96305084],
          [120.96794891, 17.95705986],
          [120.97802734, 17.94940948],
          [120.98316193, 17.94429016],
          [120.98722839, 17.93961906],
          [120.99120331, 17.93301964],
          [120.99420929, 17.92584038],
          [120.99687958, 17.91609001],
          [120.99823761, 17.91024017],
          [120.99875641, 17.90374947],
          [120.99862671, 17.89616966],
          [120.99839783, 17.88492966],
          [120.99846649, 17.88265038],
          [120.99878693, 17.87409973],
          [120.99932861, 17.86705017],
          [121.0007782, 17.85951042],
          [121.00245667, 17.85419083],
          [121.00370789, 17.85166931],
          [121.00515747, 17.84874916],
          [121.01016998, 17.84371948],
          [121.01685333, 17.84070969],
          [121.02388763, 17.83959007],
          [121.02932739, 17.83980942],
          [121.0386734, 17.84197044],
          [121.04812622, 17.84597969],
          [121.05545044, 17.84822083],
          [121.0609436, 17.84917068],
          [121.06674957, 17.84814072],
          [121.07277679, 17.84635925],
          [121.07784271, 17.84411049],
          [121.08267975, 17.84074974],
          [121.08746338, 17.83629036],
          [121.09332275, 17.83200073],
          [121.096138, 17.82896996],
          [121.09764099, 17.82720947],
          [121.09979248, 17.82420921],
          [121.10060883, 17.82188988],
          [121.10160828, 17.81901932],
          [121.1027832, 17.81583977],
          [121.10569763, 17.80446053],
          [121.11019135, 17.78723907],
          [121.11263275, 17.76889992],
          [121.11682129, 17.74139023],
          [121.11889648, 17.72672081],
          [121.12270355, 17.68395042],
          [121.09150696, 17.66674995],
          [121.09815216, 17.62869072],
          [121.11972046, 17.58934975],
          [121.11019135, 17.56086922],
          [121.10276031, 17.55563927],
          [121.070961, 17.53586006],
          [121.05381775, 17.52997971],
          [120.99800873, 17.49139023],
          [120.9985199, 17.42930031],
          [120.99835968, 17.42255974],
          [120.99771881, 17.41864014],
          [120.99442291, 17.40873909],
          [120.99041748, 17.39801979],
          [120.98631287, 17.38740921],
          [120.98252869, 17.37812996],
          [120.97852325, 17.36964035],
          [120.97403717, 17.36211014],
          [120.96949005, 17.35487938],
          [120.96424103, 17.34378052],
          [120.95890808, 17.3373909],
          [120.95410919, 17.33023071],
          [120.94750977, 17.31860924],
          [120.9405899, 17.30746078],
          [120.935112, 17.29570961],
          [120.93074799, 17.2851696],
          [120.92685699, 17.27330971],
          [120.92347717, 17.2609005],
          [120.91478729, 17.24760056],
          [120.91597748, 17.22370911],
          [120.91519928, 17.21339989],
          [120.90544891, 17.20080948],
          [120.89766693, 17.19079971],
          [120.89681244, 17.19001007],
          [120.89418793, 17.18808937],
          [120.8911438, 17.18699074],
          [120.88625336, 17.18787003],
          [120.87728882, 17.18926048],
          [120.8649292, 17.18877983],
          [120.85827637, 17.18818092],
          [120.85738373, 17.18810081],
          [120.85469818, 17.18853951],
          [120.85182953, 17.18873978],
          [120.85053253, 17.1888504],
          [120.85037231, 17.18889046],
          [120.849823, 17.18891907],
          [120.84754181, 17.18885994],
          [120.84332275, 17.18790054],
          [120.83894348, 17.18814087],
          [120.83744049, 17.18881989],
          [120.82861328, 17.18860054],
          [120.79891205, 17.18787956],
          [120.79530334, 17.18255043],
          [120.78788757, 17.17316055],
          [120.77641296, 17.16390038],
          [120.77472687, 17.1631794],
          [120.76637268, 17.1595192],
          [120.75675964, 17.15788078],
          [120.74938965, 17.15761948],
          [120.74772644, 17.15755081],
          [120.73747253, 17.15698051],
          [120.72975922, 17.15732002],
          [120.7274704, 17.1572094],
          [120.72083282, 17.15761948],
          [120.71531677, 17.15778923],
          [120.70929718, 17.15814972],
          [120.70217133, 17.15872955],
          [120.69709778, 17.15983963],
          [120.69468689, 17.16056061],
          [120.69309998, 17.16146088],
          [120.68924713, 17.16348076],
          [120.686203, 17.16665077],
          [120.68364716, 17.1725502],
          [120.68293762, 17.17515945],
          [120.68244934, 17.17830086],
          [120.68279266, 17.1812706],
          [120.6830368, 17.18198967],
          [120.6832428, 17.1840992],
          [120.68195343, 17.18584061],
          [120.67960358, 17.18672943],
          [120.67756653, 17.18726921],
          [120.67627716, 17.18848038],
          [120.67542267, 17.19035912],
          [120.67382813, 17.19208908],
          [120.6708374, 17.19238091],
          [120.66879272, 17.19239044],
          [120.66735077, 17.19392967],
          [120.66773987, 17.19572067],
          [120.66873932, 17.1967907],
          [120.66899109, 17.19706917],
          [120.67179871, 17.19693947],
          [120.67440796, 17.19626999],
          [120.67598724, 17.19761086],
          [120.67888641, 17.19762039],
          [120.6802063, 17.19741058],
          [120.68167114, 17.19879913],
          [120.68164825, 17.20079994],
          [120.68100739, 17.20211029],
          [120.68000793, 17.20399094],
          [120.67923737, 17.20516014],
          [120.67848206, 17.20635033],
          [120.67767334, 17.20883942],
          [120.67775726, 17.20915985],
          [120.67804718, 17.2101593],
          [120.67864227, 17.21158028],
          [120.67881012, 17.21198082],
          [120.68019867, 17.21318054],
          [120.6829071, 17.2156105],
          [120.68295288, 17.21599007],
          [120.68318939, 17.21816063],
          [120.68240356, 17.21994019],
          [120.68251038, 17.22011948],
          [120.6829071, 17.22072029],
          [120.68488312, 17.22208977],
          [120.68627167, 17.22315025],
          [120.6872406, 17.22409058],
          [120.68695068, 17.22536087],
          [120.686409, 17.22574997],
          [120.68418884, 17.22711945],
          [120.68379211, 17.22967911],
          [120.68253326, 17.23167038],
          [120.68171692, 17.23365021],
          [120.6831665, 17.23689079],
          [120.68312836, 17.23925018],
          [120.68245697, 17.23995018],
          [120.68099976, 17.24041939],
          [120.67931366, 17.24016953],
          [120.67743683, 17.23984909],
          [120.67597198, 17.24012947],
          [120.67469025, 17.24039078],
          [120.67437744, 17.24134064],
          [120.67398071, 17.24230003],
          [120.67398834, 17.24239922],
          [120.67415619, 17.24415016],
          [120.67539978, 17.24474907],
          [120.67665863, 17.24511909],
          [120.67765045, 17.24628067],
          [120.67996216, 17.24818993],
          [120.68089294, 17.24950981],
          [120.68195343, 17.25325012],
          [120.68264771, 17.25572968],
          [120.68197632, 17.25612068],
          [120.68122101, 17.25657082],
          [120.67775726, 17.25863075],
          [120.67324829, 17.26016998],
          [120.66983795, 17.26254082],
          [120.66758728, 17.26416969],
          [120.66416931, 17.26518059],
          [120.6619873, 17.26601028],
          [120.66046143, 17.26695061],
          [120.65908813, 17.26766968],
          [120.65792847, 17.26844025],
          [120.65695953, 17.26903915],
          [120.65558624, 17.26959991],
          [120.65447998, 17.27028084],
          [120.65312195, 17.27146912],
          [120.65238953, 17.2719593],
          [120.65181732, 17.27228928],
          [120.65101624, 17.27238083],
          [120.65055847, 17.27334023],
          [120.64998627, 17.2740593],
          [120.64868927, 17.27411079],
          [120.64890289, 17.27511024],
          [120.64829254, 17.27590942],
          [120.64746094, 17.27692032],
          [120.64676666, 17.27806091],
          [120.64592743, 17.27898026],
          [120.64541626, 17.28026962],
          [120.64512634, 17.28046036],
          [120.64434052, 17.28087997],
          [120.64362335, 17.28174019],
          [120.64346313, 17.28186035],
          [120.64289856, 17.28232002],
          [120.64169312, 17.28253937],
          [120.64154816, 17.28326988],
          [120.64148712, 17.28351021],
          [120.63835144, 17.28406906],
          [120.63562012, 17.28469086],
          [120.6338501, 17.28632927],
          [120.63375854, 17.28640938],
          [120.63194275, 17.28879929],
          [120.62844849, 17.29336929],
          [120.62310791, 17.30051041],
          [120.62299347, 17.30067062],
          [120.61815643, 17.30732918],
          [120.61428833, 17.31069946],
          [120.61110687, 17.31180954],
          [120.60720062, 17.31217003],
          [120.60267639, 17.31191063],
          [120.59906006, 17.3113308],
          [120.59741211, 17.31131935],
          [120.59519196, 17.31069946],
          [120.59117126, 17.30927086],
          [120.58473206, 17.30851936],
          [120.57808685, 17.30780029],
          [120.5700531, 17.30813026],
          [120.56581116, 17.30830002],
          [120.56522369, 17.3073597],
          [120.56242371, 17.3096199],
          [120.56210327, 17.30950928],
          [120.56156921, 17.30913925],
          [120.56072998, 17.30884933],
          [120.55935669, 17.30842972],
          [120.55795288, 17.30777931],
          [120.55744934, 17.31008911],
          [120.55682373, 17.31299019],
          [120.55631256, 17.31434059],
          [120.55571747, 17.31566048],
          [120.55428314, 17.31693077],
          [120.5533371, 17.3178196],
          [120.55294037, 17.31893921],
          [120.552742, 17.32189941],
          [120.55236053, 17.32444954],
          [120.55161285, 17.32584],
          [120.54989624, 17.32864952],
          [120.54818726, 17.33138084],
          [120.54646301, 17.33427048],
          [120.54537201, 17.33583069],
          [120.54437256, 17.33904076],
          [120.54371643, 17.34163094],
          [120.54357147, 17.34226036],
          [120.54237366, 17.34472084],
          [120.54154205, 17.34769058],
          [120.53994751, 17.34897995],
          [120.53974915, 17.35061073],
          [120.53955841, 17.35230064],
          [120.53901672, 17.35522079],
          [120.53891754, 17.35647964],
          [120.53884125, 17.3576107],
          [120.53901672, 17.35860062],
          [120.53946686, 17.3604393],
          [120.53999329, 17.36234093],
          [120.54031372, 17.3635006],
          [120.54161835, 17.36712074],
          [120.54273987, 17.37011909],
          [120.54315186, 17.37150002],
          [120.54364014, 17.37252045],
          [120.54459381, 17.37385941],
          [120.54673004, 17.37701988],
          [120.54807281, 17.37895966],
          [120.54950714, 17.3810997],
          [120.55071259, 17.38286018],
          [120.55085754, 17.38306999],
          [120.55203247, 17.38356018],
          [120.55301666, 17.38559914],
          [120.5549469, 17.38913918],
          [120.55647278, 17.39176941],
          [120.55761719, 17.39381027],
          [120.55805969, 17.39479065],
          [120.55835724, 17.39529991],
          [120.56317139, 17.40229034],
          [120.56593323, 17.40690994],
          [120.56976318, 17.41320038],
          [120.5723877, 17.41743088],
          [120.57585144, 17.4238205],
          [120.57779694, 17.42794991],
          [120.57874298, 17.43054008],
          [120.57920074, 17.43399048],
          [120.57906342, 17.43903923],
          [120.5789566, 17.44137001],
          [120.57852173, 17.44387054],
          [120.57850647, 17.44545937],
          [120.57861328, 17.44993019],
          [120.57834625, 17.45402908],
          [120.57932281, 17.45941925],
          [120.57937622, 17.45972061],
          [120.57998657, 17.46282959],
          [120.58126068, 17.46762085],
          [120.58255768, 17.47024918],
          [120.583992, 17.47304916],
          [120.58556366, 17.47624969],
          [120.58454132, 17.47685051],
          [120.58241272, 17.47809982],
          [120.57842255, 17.48070908],
          [120.57554626, 17.4822197],
          [120.57344055, 17.48262024],
          [120.56916809, 17.48265076],
          [120.56461334, 17.48336029],
          [120.56343079, 17.48347092],
          [120.56218719, 17.48311043],
          [120.56080627, 17.48348999],
          [120.55766296, 17.48459053],
          [120.55558777, 17.48550034],
          [120.55226135, 17.48681068],
          [120.5504837, 17.48801041],
          [120.54862976, 17.48949051],
          [120.54817963, 17.48995018],
          [120.54508209, 17.49176025],
          [120.5428009, 17.49346924],
          [120.5400238, 17.49535942],
          [120.53649902, 17.49728966],
          [120.53244019, 17.49863052],
          [120.52908325, 17.49917984],
          [120.52526093, 17.49980927],
          [120.52036285, 17.49983978],
          [120.51654816, 17.49951935],
          [120.51114655, 17.49802017],
          [120.50930023, 17.49667931],
          [120.50502014, 17.49443054],
          [120.50157166, 17.49118042],
          [120.49842834, 17.4879303],
          [120.49613953, 17.48554039],
          [120.49260712, 17.4836998],
          [120.49034882, 17.48270988],
          [120.48954773, 17.48237991],
          [120.48606873, 17.48122025],
          [120.48483276, 17.48096085],
          [120.48253632, 17.48101044],
          [120.4789505, 17.48184967],
          [120.47707367, 17.48266983],
// snip to big for code snippet
          [120.52884674, 17.69231033],
          [120.52929688, 17.69322968],
          [120.53491211, 17.70373917]
        ]
      ]
    },
    "properties": {
      "GID_0": "PHL",
      "NAME_0": "Philippines",
      "GID_1": "PHL.1_1",
      "NAME_1": "Abra",
      "VARNAME_1": "",
      "NL_NAME_1": "",
      "TYPE_1": "Lalawigan|Probinsya",
      "ENGTYPE_1": "Province",
      "CC_1": "1401",
      "HASC_1": "PH.AB"
    }
  }, ]
};
map.data.addGeoJson(oneAdmPoly);
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>