var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

var labelIndex = 0;

var search_markers = [];

var s_markers = [];

var markers = [];

var counter = 0;

var x_infowindow = null;

var map;

function initialize() {

   var currentarea = { lat: 14.5393988, lng: 121.0521586};

   map = new google.maps.Map(document.getElementById('map'), {

      zoom: 1,

      center: {lat:0,lng:0},

      disableDefaultUI: true

   });

   document.getElementById('search_geo').addEventListener('click', function() {

      var address = document.getElementById('place-id').value;

      var geocoder = new google.maps.Geocoder();

      geocoder.geocode({ 'address': address },function(results, status) {

         s_markers.forEach(function(s_mark) {

            s_mark.setMap(null);

         });

         s_markers = [];

         results.forEach(function(res){

            var pos = res.geometry.location;

            map.panTo(pos);

            var s_mark = new google.maps.Marker({

               position: pos,

               title: res.formatted_address,

               map: map

            });

            s_markers.push(s_mark);

            s_mark.addListener('click', function() {

               if (x_infowindow != null){

                  x_infowindow.close();

               }

               var rloc = res.geometry.location

               var _lat = rloc.lat();

               var _lng = rloc.lng();

               var location = _lat + "," + _lng;

               var loc_type = res.geometry.location_type;

               var address = res.formatted_address;

               var add_type = res.types;

               var s_cont = '<p>Location: '+ location +'</p>';

               s_cont += '<p>Location Type: '+loc_type+'</p>';

               s_cont += '<p>Address: '+address+'</p>';

               s_cont += '<p>Address Type :'+add_type+'</p>';

               var s_infowindow = new google.maps.InfoWindow({

                  content: s_cont

               });

               s_infowindow.open(map, s_mark);

               x_infowindow = s_infowindow;

            });

            fitsearch();

         });

      });

   });

   google.maps.event.addListener(map, 'click', function(event) {

      addMarker(event.latLng, map);

   });

   function addMarker(location, map) {

      counter++;

      var marker = new google.maps.Marker({

         position: location,

         label: labels[labelIndex++ % labels.length],

         map: map,

         id: counter,

      });

      markers.push(marker);

      var contentString = '<input onclick="deleteMarker('+counter+');" type=button value="Delete Marker">';

      var infowindow = new google.maps.InfoWindow({

         content: contentString

        });

      marker.addListener('click', function() {

         if (x_infowindow != null){

            x_infowindow.close();

         }

         infowindow.open(map, marker);

         x_infowindow = infowindow;

      });

   }

   function setMapOnAll(map) {

      for (var i = 0; i < markers.length; i++) {

         markers[i].setMap(map);

      }

   }

}

function clearMarkers(count) {

   count = count - 1;

   markers[count].setMap(null);

}

function deleteMarker(count) {

   clearMarkers(count);

}

​

function fitsearch(){

   var bounds = new google.maps.LatLngBounds();

   for (var i=0; i<s_markers.length; i++) {

      bounds.extend( s_markers[i].getPosition() );

   }

   map.fitBounds(bounds);

}

google.maps.event.addDomListener(window, 'load', initialize);

​

​