Google Map Places

A point of interest based on type and radius

by Andrew Pougher

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>

  
  <body>
    <div id="map"></div>
    <div id="results"></div>
    <div id="lodging"></div>
    <div id="spa"></div>
    <div id="park"></div>
       <div id="airport"></div>
  </body>

CSS

#map {
       height: 400px;
       width: 100%;
       border: 6px solid #dedede;
       margin: 0em auto;
     }
     #results {
       z-index:9999;
       position:absolute;
       width:200px;
       height:388px;
       background:#222;
    opacity:0.8;
       top:0;
       bottom:0;
       right:6px;
       right:0px;
       color:#ccc;
       overflow-y:scroll;
       font-size:.82em;
       padding:12px 5px;
       line-height:1.333;
     }
     .school {
       color:lightblue;
     }
     .lodging, .restaurant, .bar, .food, .store {
       color:orange;
     }
     .park {
       color:darkgreen;
     }
.spa {color:pink}
.airports {color:#ecd455}

JavaScript

var map;
    var infowindow;

    function initialize() {

      var styles = [{
        stylers: [{
          hue: "#00b2ff"
        }, {
          saturation: -50
        }, {
          lightness: 7
        }, {
          weight: 1
        }

        ]
      }, {
        featureType: "road",
        elementType: "geometry",
        stylers: [{
          lightness: 100
        }, {
          visibility: "on"
        }]
      }, {
        featureType: "road",
        elementType: "labels",
        stylers: [{
          visibility: "on"
        }]
      }];

      var styledMap = new google.maps.StyledMapType(styles, {
        name: "Styled Map"
      });
        // customize this based on autocomplete
      var pos = new google.maps.LatLng(46.8637, 8.1028);
      var center = new google.maps.LatLng(46.8637, 8.1028);

      map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        center: center,
        zoom: 9,
        streetViewControl: false,
        panControl: false,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'map_style']
        }
      });
      var image = 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png';
      marker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        position: pos,
        icon: image
      });

 
     var newPos = new google.maps.LatLng(46.8637, 8.1028);
      var request = {
        location: pos,
        radius: 115000,
        types: ['lodging', 'spa', 'park', 'airport']
      };
      infowindow = new google.maps.InfoWindow();
      var service = new google.maps.places.PlacesService(map);
      service.nearbySearch(request, callback);

      map.mapTypes.set('map_style', styledMap);
      map.setMapTypeId('map_style');
    }



    function...