Google maps Search near by places
Loading...
Source Code
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="idSerchtype" placeholder="Search Type" />
<input type="text" id="idRadius" placeholder="Search Radius" />
<button id="idBtnSearch">
Search</button>
<hr />
<div id="map" style="width: 100%; height: 94%">
Loading...</div>
</body>
</html>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_APP_KEY&libraries=places"></script>
<script type="text/javascript">
var map;
var service;
var infowindow;
var lat = "";
var lon = "";
$(document).ready(function () {
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
SetLatLng(lat, lng);
initialize(5000, "");
}, function (error) {
geolocFail();
});
$("#idBtnSearch").on("click", function () {
var SearchType = $("#idSerchtype").val();
var radius = $("#idRadius").val();
initialize(radius, SearchType);
});
});
function SetLatLng(a, b) {
lat = a;
lon = b;
}
function initialize(rad, type) {
var pyrmont = new google.maps.LatLng(lat, lon);
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: rad,
types: [type]
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
}
</script>
![CORS - Access-control-allow-origin header not present [SOLVED]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s4cCl7VTtClAunzWBML38M5j878jMpxbpoBHVXztDdgCPaoHWrG2Wzw9U2TCh1yKX6AmBo1J3Kf6X2VzBnChFQyoyKvpOAAmLNuHQ)
No comments