A Pen by Mark Lvov

Thumbnail
This awesome code was written by neverfan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright neverfan ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Mark Lvov</title>
     <title>Simple click event</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
  
  
  
  
</head>

<body>

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

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/neverfan/a-pen-by-mark-lvov-YXeEPM */
//текущий маркер
var curMarker;

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(59.941114,30.334436),
    disableDefaultUI: true,
    panControl: false,
    zoomControl: true,
    scaleControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.RIGHT_CENTER
    }
  };
  var map = new google.maps.Map(mapDiv, mapOptions);

  //Кнопки управления
  var CancelButton = new Button('red', 'Отмена', function(e){
    curMarker.setMap(null);
  });
  
  var SuccessButton = new Button('green', 'Ок', function(e){
    alert(curMarker.position);
  });
  
  map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(CancelButton);
  map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(SuccessButton);

  //Отметка маркером
  google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
  });
}

//Установить маркер
function placeMarker(position, map) {
  if(curMarker != undefined)
  {
      curMarker.setMap(null);
  }
  curMarker = new google.maps.Marker({
    position: position,
    map: map
  });
  map.panTo(position);
  //map.setZoom(16);
  map.panTo(curMarker.position);
  
  alert(curMarker.position);
  
  codeLatLng(curMarker.position);
  
}

//function Button(controlDiv, map, name, color, callback) {
function Button(color, name, callback) {

  var ButtonDiv = document.createElement('div');
  
  // Set CSS for the control border
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.margin = '0 5% 20px';
  controlUI.style.textAlign = 'center';
  controlUI.style.borderRadius = '4px';
  controlUI.style.color = '#ffffff';
    
  if(color == 'green') {
    controlUI.style.backgroundColor = '#48b01b';
    controlUI.style.borderBottom = '3px solid #759a51';
  }

  if(color == 'red') {
    controlUI.style.backgroundColor = '#c53238';
    controlUI.style.borderBottom = '3px solid #8e262c';
  }
  
  ButtonDiv.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(255,255,255)';
  controlText.style.fontFamily = 'Lato",sans-serif';
  controlText.style.fontSize = '18px';
  controlText.style.padding = '10px';
  controlText.innerHTML = name;
  ButtonDiv.style.width = '40%';
  controlUI.appendChild(controlText);
  ButtonDiv.index = 1;
  
  google.maps.event.addDomListener(controlUI, 'click', function(e){callback(e)});
  
  return ButtonDiv;
}

function codeLatLng(position) {
    
  geocoder = new google.maps.Geocoder();

  var lat = parseFloat(position['F']);
  var lng = parseFloat(position['A']);

  var latlng = new google.maps.LatLng(lat, lng);
  
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        alert(results[1].formatted_address);
        console.log(results[1]);
      } else {
        alert('No results found');
      }
    } else {
      alert('Geocoder failed due to: ' + status);
    }
  });
}


//Инициализация после загрузки окна
google.maps.event.addDomListener(window, 'load', initialize);

Comments