bdMap/htmls/mapV/32-google-map-point-simple.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>

  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>

<div id="map"></div>

<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDgF_xU8tLp-GwUUlKWa8iTSqOhN1ff7Mg"></script>
<script type="text/javascript" src="../../js/mapv.js"></script>

<script type="text/javascript">

  var customMapType = new google.maps.StyledMapType([
    {
      stylers: [
        {hue: '#890000'},
        {visibility: 'simplified'},
        {gamma: 0.5},
        {weight: 0.5}
      ]
    },
    {
      elementType: 'labels',
      stylers: [{visibility: 'off'}]
    },
    {
      featureType: 'water',
      stylers: [{color: '#890000'}]
    }
  ], {
    name: 'Custom Style'
  });
  var customMapTypeId = 'custom_style';

  // Create a map object and specify the DOM element for display.
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(39.3, -95.8),
    scrollwheel: false,
    zoom: 4
  });

  map.mapTypes.set(customMapTypeId, customMapType);
  map.setMapTypeId(customMapTypeId);

  var resolutionScale = window.devicePixelRatio || 1;

  var randomCount = 500;
  var data = [];
  while (randomCount--) {
    data.push({
      geometry: {
        type: 'Point',
        coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
      },
      count: 30 * Math.random()
    });
  }

  var dataSet = new mapv.DataSet(data);

  var options = {
    fillStyle: 'rgba(255, 250, 50, 0.7)',
    shadowColor: 'rgba(255, 255, 50, 1)',
    shadowBlur: 10,
    size: 3,
    draw: 'simple'
  }

  var mapvLayer = new mapv.googleMapLayer(map, dataSet, options);

</script>

</body>
</html>