Hi,
In the below code, we can see how to check the current location and predefined locations in the address.
<!DOCTYPE html>
<html>
<head>
<title>Practice Maps</title>
<style>
</style>
</head>
<body>
<div class="map-cont">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map" style="width:1000px;height:300px;"></div>
</div>
<script>
var mapPointers = [{
"address": "#15, IIHT Ltd, 4th Floor, Shri Lakshmi",
"store": "OFF MG Road",
"thumb": "",
"id": "967",
"distance": 0.8000000000000000444089209850062616169452667236328125,
"address2": "Complex, St.Marks Road,",
"city": "Bangalore",
"state": "Karnataka",
"zip": "560 001",
"country": "India",
"lat": "12.974297",
"lng": "77.601749",
"phone": "1800-123-321-5",
"fax": "",
"email": "interest@iiht.com",
"url": "https:\/\/iiht.com\/ils\/centers\/karnataka\/bangalore\/off-mg-road\/"
}, {
"address": "216, New Kalimati Road, Raj Motors Building",
"store": "Sakchi",
"thumb": "",
"id": "768",
"distance": 1422.200000000000045474735088646411895751953125,
"address2": "",
"city": "Sakchi, Jamshedpur",
"state": "Jharkhand",
"zip": "831001",
"country": "India",
"lat": "22.798765",
"lng": "86.210487",
"phone": "1800-123-321-5",
"fax": "",
"email": "interest@iiht.com",
"url": "https:\/\/iiht.com\/ils\/centers\/jharkhand\/jamshedpur\/sakchi\/"
}];
var locations = [];
for (var i = 0; i < mapPointers.length; i++) {
var pointerInfo = '<div><div><strong>' + mapPointers[i].store + '</strong></div>';
pointerInfo += '<div>' + mapPointers[i].address + '</div>';
pointerInfo += '</div>';
var pointerArr = [pointerInfo, mapPointers[i].lat, mapPointers[i].lng, i];
locations.push(pointerArr);
}
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(12.974741, 77.601690),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var infoWindow = new google.maps.InfoWindow();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(locations[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
}
var markers = [];
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDy0i22lqtG9KvJWgZsEHRewBOz1tl76Ig&libraries=places&callback=initAutocomplete" async defer></script>
</body>
</html>