自定义Google Makers与DataLayer/GeoJson

GeoJson标记的样式与本机Google Maps Javascript API v3标记不同。 请参阅文档中的设置 GeoJSON 数据的样式，特别是动态更改外观部分。

map.data.setStyle(function(feature) {
  var type = feature.getProperty('type')
  return /** @type {google.maps.Data.StyleOptions} */ ({
    icon: icons[type].icon,
    title: type
  });
});

来自参考：

图标类型：字符串|图标|象征

前景图标。如果提供了字符串，则将其视为将字符串作为 url 的图标。仅适用于点几何图形。

概念验证小提琴

代码片段：

var map,
  infoWindow = new google.maps.InfoWindow({
    pixelOffset: new google.maps.Size(0, -25)
  });
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 10,
    center: {
      lat: 40.7127837,
      lng: -74.0059413
    }
  });
  // map.data.loadGeoJson('http://customers.auroracomputers.co.uk/customers-json.php');
  map.data.addGeoJson(testGeoJson)
  map.data.addListener('click', function(event) {
    infoWindow.setContent(
      'Surname: ' + event.feature.getProperty('surname') + '<br>' +
      'Postcode: ' + event.feature.getProperty('postcode')
    );
    var anchor = new google.maps.MVCObject();
    anchor.set("position", event.latLng);
    infoWindow.open(map, anchor);
  });
  var iconBase = 'http://customers.auroracomputers.co.uk/icons/'
  var icons = {
    business: {
      icon: iconBase + 'business.png'
    },
    home: {
      icon: iconBase + 'home.png'
    },
    competitor: {
      icon: iconBase + 'devil.png'
    }
  };
  map.data.setStyle(function(feature) {
    var type = feature.getProperty('type')
    return /** @type {google.maps.Data.StyleOptions} */ ({
      icon: icons[type].icon,
      title: type
    });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
// New York, NY, USA (40.7127837, -74.00594130000002)
// Newark, NJ, USA (40.735657, -74.1723667)
var testGeoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-74.0059413, 40.7127837]
    },
    "properties": {
      "surname": "York",
      "postcode": " 10007",
      "type": "home"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-74.1723667, 40.735657]
    },
    "properties": {
      "surname": "Newark",
      "postcode": "07102",
      "type": "business"
    }
  }]
};

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

我注意到的一件事是源 json 已损坏，希望以下内容可能有助于对其进行排序。

<?php
    /*
        Customer-Json.php
        -----------------
        The original code had thousands of `<script>` & `</script>` tags
        which meant it was not valid json.
        I have assumed that the previous loop can be replaced with the
        more usual recordset iteration loop as shown below.
        Each row has items added to the json array which gets echoed at the
        end - there is not need for the script tags at all - just include the
        correct headers.
    */
    /* store data to be sent */
    $json=array();
    /* using object notation for ease */
    while( $row=mysqli_fetch_object( $result ) ){
        $surname=$row->surname;
        $postcode=$row->postcode;   
        $lat=$row->lat;
        $lng=$row->lng;
        $type=$row->type;

        $json[]=array(
            'type'      =>  'Feature',
            'geometry'  =>  array(
                'type'          =>  'Point',
                'coordinates'   =>  array( $lng, $lat )
            ),
            'properties'    =>  array(
                'surname'   =>  $surname,
                'postcode'  =>  $postcode,
                'type'      =>  $type
            )
        );
    }
    $json=json_encode( $json );
    header( 'Content-Type: application/json' );
    echo $json;
?>