Adding a Google Map with a Marker to Your Website - 2019

How to Add Google Map in Website

Add Map in your Website

<script src="https://maps.googleapis.com/maps/api/js?key={keyhere}&libraries=places&sensor=false"></script>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
  
           <textarea rows="5" id="address" name="order_address" class="form-control" style="height:80px;" placeholder="You can select location from Search Location Box"  ></textarea>   
            
            <input  onblur="changeAddress();" id="pac-input" type="text" placeholder="Enter a location" class='form-control'>
    <div id="location-error"></div>             
    <div id='map_canvas' style="height:400px;"></div>

<span id="valBox"></span>
<input type="range" min="5" max="1000" step="1" 
   oninput="showVal(this.value)" onchange="showVal(this.value)"> 
<script type="text/javascript">
function changeAddress()
{
  setTimeout(function(){ 
   console.log(jQuery('#pac-input').val())
   jQuery('#address').val(jQuery('#pac-input').val());
   }, 500); 
       
}
function selectAddress()
{  
   jQuery('#pac-input').focus(); 
}
function showVal(newVal){
  var x = document.getElementById("valBox").innerHTML=newVal;
  initMap(x);
}


</script>
<script type="text/javascript">

$(document).ready(function() {
    var x = document.getElementById("map_canvas"); 
    function showPosition(position) {
        x.innerHTML = "Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;
        $("#address").val("Latitude: " + position.coords.latitude +"\n Longitude: " + position.coords.longitude);
    }
}); 
     
var currentIndex = 1;
function initMap(x) 
{ 

// Create a map object and specify the DOM element for display.
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(22.2864791, 70.8060137),
mapTypeId: google.maps.MapTypeId.ROADMAP,
// scrollwheel: false,
zoom: 14, 
// center: new google.maps.LatLng(Latitude, Longitude),
// mapTypeControl: false,
scaleControl: false,
streetViewControl: true,
overviewMapControl: false,
zoomControl: true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.LEFT_BOTTOM 
},
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
panControl: false, 
});

var myMarker;
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(22.2864791, 70.8060137),
draggable: true
});

// Add circle overlay and bind to marker

var circle = new google.maps.Circle({
  map: map,
  radius:parseFloat(x),    // 10 miles in metres
  strokeColor: 'blue'
});
circle.bindTo('center', myMarker, 'position');

google.maps.event.addListener(myMarker, 'dragend', function (event) { 
geocoder.geocode({
'latLng': event.latLng
}, function(results, status) {
   
if (status == google.maps.GeocoderStatus.OK) {
  if (results[0]) {
var new_address = results[0].formatted_address;
// alert( new_address);
$('#address').val(''); 
$('#address').val(new_address); 
  }
}
});
});

/*start search location*/
var card = document.getElementById('pac-card');
var input = document.getElementById('pac-input'); 
var infowindowContent = document.getElementById('infowindow-content');

//MOVE SEARCH BOX CODE
//map.controls[google.maps.ControlPosition.TOP_CENTER].push(card);

var autocomplete = new google.maps.places.Autocomplete(input);
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(infowindowContent);

autocomplete.addListener('place_changed',function() {
  document.getElementById("location-error").style.display = 'none';
  infowindow.close();
  myMarker.setVisible(true);
  var place = autocomplete.getPlace();
  if (!place.geometry) {
document.getElementById("location-error").style.display = 'inline-block';
document.getElementById("location-error").innerHTML = "Cannot Locate '" + input.value + "' on map";
return;
  }
  map.fitBounds(place.geometry.viewport);
  myMarker.setPosition(place.geometry.location);
  myMarker.setVisible(true);
  infowindowContent.children['place-icon'].src = place.icon;
  infowindowContent.children['place-name'].textContent = place.name; 
  infowindow.open(map, myMarker);
});
//end search location
map.setCenter(myMarker.position);
myMarker.setMap(map);
}   
     
 //custom start get address 
var myLatlng = new google.maps.LatLng(22.2864791, 70.8060137);
var myOptions = {
  zoom: 14,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.LEFT_BOTTOM
  }
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var geocoder = new google.maps.Geocoder();

google.maps.event.addListener(map, 'click', function(event) {
  geocoder.geocode({
'latLng': event.latLng
  }, function(results, status) {
   
if (status == google.maps.GeocoderStatus.OK) {
  if (results[0]) {
// alert(results[0].formatted_address);
  //set search address to 

$('#address').text(results[0].formatted_address);  
   
  }
}
  });
});
initMap();
</script>