How to embed google map with movable cursor and location search option?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker Animations</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div > <input type="text" id="latitude" value=""></div>
<div ><input type="text" id="longitude" value=""></div>
<input id="pac-input" class="controls" type="text" placeholder="Search Box" style="width:350px;">
<div id="map"></div>
<script>
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 59.325, lng: 18.070},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.set('styles', [
{"featureType": "landscape", "elementType": "geometry", "stylers": [{ hue: '#a1ced1' }]
},{"featureType": "road.highway", "elementType": "geometry", "stylers": [{"color": "#f77776"}, {"lightness": 0}]
},{"featureType": "road.arterial", "elementType": "geometry", "stylers": [{"color": "#f8aead"}, {"lightness": 0}]
},{"featureType": "water", "stylers": [{"color": "#a7e2ef"}]}
,{ 'featureType': "poi", 'stylers': [ { visibility: "off" }]}]);
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function(event) {
searchBox.setBounds(map.getBounds());
var bounds = new google.maps.LatLngBounds();
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 59.327, lng: 18.067}
});
marker.addListener('click', toggleBounce);
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latitude").value = event.latLng.lat();
document.getElementById("longitude").value = event.latLng.lng();
});
google.maps.event.addListener(map, 'click', function (event) {
var latlng = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
//marker.setIcon('/img/site/yolo_marker.png');
marker.setPosition(event.latLng);
document.getElementById("latitude").value = event.latLng.lat();
document.getElementById("longitude").value = event.latLng.lng();
});
searchBox.addListener('places_changed', function(event) {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
//marker
var latlng = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
document.getElementById("latitude").value = place.geometry.location.lat();
document.getElementById("longitude").value = place.geometry.location.lng()
marker.setPosition(place.geometry.location);
map.setCenter(latlng);
});
});
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDobO5ZOV2FyxR89ew6a61FFVoAK8aPgXE&&libraries=places&callback=initMap">
</script>
</body>
</html>
Comments
Post a Comment