Trying to find nearby places from my current location. The issue I'm currently facing is that I'm only able to see 10 markers on the map, and no more locations are being displayed. Is there a way to bypass or resolve this problem? I've come across information online stating that Google limits the number of markers to 10.
googleMaps.js:
// Initialize Variables
var map;
var infowindow;
var service;
var markers = [];
// DOM Initialization
$('#details').hide();
// Checkbox Initialization
$('#gym').prop('checked', true);
$('#park').prop('checked', true);
$('#store').prop('checked', true);
$('#museum').prop('checked', true);
$('#cafe').prop('checked', true);
// Initialize GeoLocation
geoLocationInit();
// Google Maps Section
function geoLocationInit() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, fail);
} else {
alert("Browser not supported");
}
}
function success(position) {
var latval = position.coords.latitude;
var Ingval = position.coords.longitude;
myLatLng = new google.maps.LatLng(latval, Ingval);
initMap(myLatLng);
}
function fail() {
alert("it fails");
}
// Map Initialization
function initMap(myLatLng) {
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 12
});
var request = {
location: myLatLng,
radius: 8047,
types: ['cafe', 'gym', 'park', 'store', 'museum']
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
map.addListener('idle', performSearch);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
addMaker(results[i]);
}
}
}
// Adding Marker
function addMaker(place) {
service.getDetails({
placeId: place.place_id
}, function (place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
// Code here to add Marker to the map
}
});
}
// Marker Filters for Gym, Park, Store, Museum, Zoo, Cafe
function gymMarkers() {
// Code for gym markers
}
function parkMarkers() {
// Code for park markers
}
function storeMarkers() {
// Code for store markers
}
function museumMarkers() {
// Code for museum markers
}
function zooMarkers() {
// Code for zoo markers
}
function cafeMarkers() {
// Code for cafe markers
}
front.blade.php
@extends('layouts.master')
@section('content')
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<div id='searchBar'>
<p>Search: <strong data-bind="text: location"></strong></p>
// Checkbox options for gym, park, store, museum, zoo, cafe
</div>
<div class="container">
{{--Google maps--}}
<div id="map"></div>
{{--Cafe details--}}
<div id="details" style="visibility:false">
// Details displayed when clicking on a marker
</div>
{{--Review--}}
<div>
<ul class="reviews"></ul>
</div>
{{--Example--}}
<div>
<ul class="example"></ul>
</div>
</div>
@endsection