0
我想要在附近的地方找到我目前的位置。目前我面臨的問題是，我只能找回10個標記地圖，它不給回了位置，有沒有辦法繞過或解決這個問題，顯然我已經在網上看了，谷歌限制你只能到10個標記有沒有辦法在地圖上獲得10個以上的標記
googleMaps.js：
//Variable init
var map;
var infowindow;
var service;
var markers = [];
//var myLatLng= new google.maps.LatLng(-33.8665433,151.1956316);
//Dom init
$('#details').hide();
$('#gym').prop('checked', true);
$('#park').prop('checked', true);
$('#store').prop('checked', true);
$('#museum').prop('checked', true);
//$('#zoo').prop('checked', true);
$('#cafe').prop('checked', true);
//Function init
geoLocationInit();
//Google maps area
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");
}
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]);
}
}
}
function addMaker(place) {
service.getDetails({
placeId: place.place_id
}, function (place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
name: place.name,
map: map,
position: place.geometry.location,
types: place.types
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
var review = [];
if (undefined !== place.reviews && place.reviews.length) {
for (var i = 0; i < place.reviews.length; i++) {
if (place.reviews[i].text) {
review.push('<b>Author Name:</b> ' + place.reviews[i].author_name + '</br>' + '<b>Review:</b> ' + place.reviews[i].text + '</br>');
}
}
} else {
review.push('Not Available');
}
infowindow.setContent(place.name);
infowindow.open(map, this);
$('#details').show();
$('#name').html(place.name);
$('#rating').html(place.rating + ' ' + 'Star(s)');
$('#address').html(place.adr_address);
$('#review').html(review);
});
}
});
}
//Gym markers
function gymMarkers() {
markerType = '';
var check = $('#gym').is(':checked');
if (check) {
for (var i = 0; i < markers.length; i++) {
for (var j = 0; j < markers[i].types.length; j++) {
if (markers[i].types[j] == "gym") {
markers[i].setVisible(true);
}
}
}
} else {
for (var i = 0; i < markers.length; i++) {
for (var j = 0; j < markers[i].types.length; j++) {
if (markers[i].types[j] == "gym") {
markers[i].setVisible(false);
}
}
}
}
}
//Park markers
function parkMarkers() {
var check = $('#park').is(':checked');
if (check) {
for (var i = 0; i < markers.length; i++) {
for (var j = 0; j < markers[i].types.length; j++) {
if (markers[i].types[j] == "park") {
markers[i].setVisible(true);
}
}
}
} else {
for (var i = 0; i < markers.length; i++) {
for (var j = 0; j < markers[i].types.length; j++) {
if (markers[i].types[j] == "park") {
markers[i].setVisible(false);
}
}
}
}
}
//Store markers
function storeMarkers() {
var check = $('#store').is(':checked');
if (check) {
for (var i = 0; i < markers.length; i++) {
for (var j = 0; j < markers[i].types.length; j++) {
if (markers[i].types[j] == "store") {
markers[i].setVisible(true);
}
}
}
} else {
for (var i = 0; i < markers.length; i++) {
for (var j = 0; j < markers[i].types.length; j++) {
if (markers[i].types[j] == "store") {
markers[i].setVisible(false);
}
}
}
}
}
//Museum markers
function museumMarkers() {
var check = $('#museum').is(':checked');
if (check) {
for (var i = 0; i < markers.length; i++) {
for (var j = 0; j < markers[i].types.length; j++) {
if (markers[i].types[j] == "museum") {
markers[i].setVisible(true);
}
}
}
} else {
for (var i = 0; i < markers.length; i++) {
for (var j = 0; j < markers[i].types.length; j++) {
if (markers[i].types[j] == "museum") {
markers[i].setVisible(false);
}
}
}
}
}
//Zoo markers
// function zooMarkers() {
// var check = $('#zoo').is(':checked');
// if (check) {
// for (var i = 0; i < markers.length; i++) {
// for (var j = 0; j < markers[i].types.length; j++) {
// if (markers[i].types[j] == "zoo") {
// markers[i].setVisible(true);
// }
// }
// }
// } else {
// for (var i = 0; i < markers.length; i++) {
// for (var j = 0; j < markers[i].types.length; j++) {
// if (markers[i].types[j] == "zoo") {
// markers[i].setVisible(false);
// }
// }
// }
// }
// }
//Cafe markers
function cafeMarkers() {
var check = $('#cafe').is(':checked');
if (check) {
for (var i = 0; i < markers.length; i++) {
for (var j = 0; j < markers[i].types.length; j++) {
if (markers[i].types[j] == "cafe") {
markers[i].setVisible(true);
}
}
}
} else {
for (var i = 0; i < markers.length; i++) {
for (var j = 0; j < markers[i].types.length; j++) {
if (markers[i].types[j] == "cafe") {
markers[i].setVisible(false);
}
}
}
}
}
前.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>
<p><input type='checkbox' onclick="gymMarkers();" id='gym'> Gyms </p>
<p><input type='checkbox' onclick="parkMarkers();" id='park'>Parks </p>
<p><input type='checkbox' onclick="storeMarkers();" id='store'> Stores </p>
<p><input type='checkbox' onclick="museumMarkers();" id='museum'> Museums </p>
<p><input type='checkbox' onclick="zooMarkers();" id='zoo'> Zoos </p>
<p><input type='checkbox' onclick="cafeMarkers();" id='cafe'> cafe </p>
</div>
<div class="container">
{{--Google maps--}}
<div id="map"></div>
{{--Cafe details--}}
<div id="details" style="visibility:false">
<table class="table table-bordered" style="width: 500px; margin-top: 10px;">
<tr>
<td colspan="2" style="text-align: center;"><b>Description</b></td>
</tr>
<tr>
<td width="150">Name</td>
<td id="name"></td>
</tr>
<tr>
<td width="150">Rating</td>
<td id="rating"></td>
</tr>
<tr>
<td width="150">Address</td>
<td id="address"></td>
</tr>
<tr>
<td width="150">User Review</td>
<td id="review"></td>
</tr>
</table>
</div>
{{--Review--}}
<div>
<ul class="reviews"></ul>
</div>
{{--Example--}}
<div>
<ul class="example"></ul>
</div>
</div>
@endsection
