0
オブジェクト上のgeometry.viewportがマップウィンドウと一致する場合にのみ、マップ上にマーカーを表示しようとしています。オブジェクトからジオメトリビューポートをアクティブウィンドウにマップする方法
私は、地図ウィンドウ上でビューポートが一致してもマーカーが表示されない場合、マップがドラッグ/ズームされるとジオメトリ。ビューポートと比較してマーカを表示し始めました。
マップの境界とオブジェクトのgeometry.viewportを比較するのは可能でしょうか？
var map,
infowindow,
latlngbounds;
var myData = {
"results": [{
"ATM": [{
"geometry": {
"location": {
"lat": -6.187688000000001,
"lng": 106.815248
},
"viewport": {
"northeast": {
"lat": -6.186168469708499,
"lng": 106.8167501802915
},
"southwest": {
"lat": -6.188866430291504,
"lng": 106.8140522197085
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/atm-71.png",
"id": "a3accb50985678d7589f712fea5252ef0be7651a",
"name": "Lippo Bank",
"place_id": "ChIJC5p3Jp32aS4RNV2CNGY_bkI",
"reference": "CmRRAAAAgSqsFrQBWNCZyAlRULRhSxUimo1oGOixfr-acHJA7-CcQZhHMzDUfy7YG1g7RKYiBe0owH-gRpq03Z_k_q6hzNX_-XZ6w-zbaoZitCLwRod_IHF6xDYcxb5r9o4oE_8wEhBdKhGKDev1-eD1h83BxEuPGhRbIJYGEzHEx8Efd8xYH29o6j6PaA",
"scope": "GOOGLE",
"types": ["atm", "finance", "point_of_interest", "establishment"],
"vicinity": "Pasar Tanah Abang, Jalan Fachrudin No.5, Kampung Bali",
"category": "atm"
},
{
"geometry": {
"location": {
"lat": -6.166333700000001,
"lng": 106.8031611
},
"viewport": {
"northeast": {
"lat": -6.164964969708497,
"lng": 106.8045088802915
},
"southwest": {
"lat": -6.167662930291502,
"lng": 106.8018109197085
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/atm-71.png",
"id": "a73fadf83bd003c0623aaa0cbdfc9ddb9412ba5d",
"name": "BCA",
"place_id": "ChIJtXHoeG_2aS4RG3yyAdj4ph4",
"rating": 2,
"reference": "CmRRAAAA8zCEbvfTRyBVHPTV64Den19_zYpUtWr4eEJED31xFn7Z6oXfUJwwSrJmYjZct8IofG60DLYDxk5uHXixHWNYSyuazzzLUnUpA3aTPXttYHaROfqvRBpC76Dd9OP60SVdEhBK3EeYj6DxyYjaqnwHTA1rGhSwe3IYepu-EPz3rVYzGejybdH2VA",
"scope": "GOOGLE",
"types": ["atm", "finance", "point_of_interest", "establishment"],
"vicinity": "Jalan Kh. Hasyim Ashari No.Lt. Dasar, No., RW.8, Cideng",
"category": "atm"
},
{
"geometry": {
"location": {
"lat": -6.16088,
"lng": 106.83252
},
"viewport": {
"northeast": {
"lat": -6.159531019708498,
"lng": 106.8338689802915
},
"southwest": {
"lat": -6.162228980291502,
"lng": 106.8311710197085
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/atm-71.png",
"id": "b2b350cf75380825292d35f17bdc5c0167b780c0",
"name": "BCA",
"place_id": "ChIJNTIagMT1aS4RfmpinPMUO9g",
"rating": 5,
"reference": "CmRSAAAAOisT3gDmVlNzyWdT1IMNLV2GnBd-KbbsnL0-OD16JdEjSJY_nQKDVWFNYXTDgRvoDB7IrWE6AOoTQc6_aVGC3vYWb_hGfTjfxtOsV_pdKcha_e0cBUeyNMqak20OXtLbEhCoSm_Sw-wqbfW0dXoxnFujGhSu-TW5gIJrJ-LNJUDmgw7HVwGfHQ",
"scope": "GOOGLE",
"types": ["atm", "finance", "point_of_interest", "establishment"],
"vicinity": "Pasar Metro, Jl. Kh. Samanhudi No.Lt.1, RT.3/RW.6, Pasar Baru",
"category": "atm"
}
],
"Restaurant": [{
"geometry": {
"location": {
"lat": -6.177284299999998,
"lng": 106.800065
},
"viewport": {
"northeast": {
"lat": -6.175935319708497,
"lng": 106.8014139802915
},
"southwest": {
"lat": -6.178633280291501,
"lng": 106.7987160197085
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
"id": "2bad9fd476e1f228888b12718a2b16688c239c9c",
"name": "Domino's Pizza Indonesia",
"opening_hours": {
"open_now": true,
"weekday_text": []
},
"photos": [{
"height": 2448,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/104847677816323088483/photos\"\u003eMetta Pranata\u003c/a\u003e"
],
"photo_reference": "CmRaAAAA9_A-JNmp_F1pAfw1LfyQIzmbZ0CyEHAP85Bu6cVIpBZyOpjJf7r5jHLsaI4lI1JU-kUp6PSIGE3nelvcBbyibFHriRteg4T24cUy5cFfFXctazlvrkRJGWoUpp1fpYlCEhCF6Kqv_SyPan3ZQwlcsu2MGhSo7czKonbhbMpLFo49wqPGAnkPQA",
"width": 3264
}],
"place_id": "ChIJq7oXAIr2aS4RtPo-KxshLHQ",
"price_level": 1,
"rating": 4.1,
"reference": "CmRRAAAAIPD7F3cb2jopx91PUhhqxpu4b8SNC8toZMp8IFZSsj2tjzv0fWogLIyx6GLrUIji7kC3i3zQSK99OEu9uZHuSurn0c6RZjhfHfOfFld89sWaGgoCjpckO99uTFBhzeUzEhBEYlvMHgNaYi1dcg0wGoaGGhQBPFeTSa_ejqXyAmJuuYL2f6c9nA",
"scope": "GOOGLE",
"types": [
"meal_delivery",
"meal_takeaway",
"restaurant",
"food",
"point_of_interest",
"establishment"
],
"vicinity": "Jalan Tomang Raya No. 32 Blok B11 Kav. 39, Jatipulo, Palmerah, RT.5/RW.1, Jatipulo",
"category": "restaurant"
}],
"School": [{
"geometry": {
"location": {
"lat": -6.1795373,
"lng": 106.7991026
},
"viewport": {
"northeast": {
"lat": -6.178036219708497,
"lng": 106.8003758802915
},
"southwest": {
"lat": -6.180734180291502,
"lng": 106.7976779197085
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/school-71.png",
"id": "fbacddf46e05f548cbbfe0dc4ba670ad012a1218",
"name": "Sekolah Dasar Negeri Jati Pulo 07 Pagi",
"photos": [{
"height": 1440,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/111303697514616849044/photos\"\u003eGb Jkt\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAfm0ln5twhqqMELlbZ2Jc2YGq5DvTOPZoXdy1Zop6lbeol_4uYjPnrK38k75DHIEL2zBIYMbm6Hgru2UBmDXRwUQFbH7kbFNSEHdZ6bWW8c9RfIb3ElKBn1hZY6F-yPEIEhCXy7avCBaVVULc4ngZa2fUGhTFzHdwiOgjejPYgf-QiV_d1bN75Q",
"width": 2560
}],
"place_id": "ChIJmdYuN4r2aS4RDUwPBrQtgyA",
"rating": 4,
"reference": "CmRRAAAAt7mhFoZeaukhSfR6MfkxDE5-_tgsqSFA_1LIOiiaYwyryetUsB4YAR-RaPhvU6-bh9XysOp0IFUFVQA8GEl06opmI_Mv08--56zbT0nKcFZ95f-4V3wApC1IlCqXluX8EhB0oI-9p5LqUM-8S5ohJAn9GhSjylq2coBRTkQ6iPqPlgyOw36VgA",
"scope": "GOOGLE",
"types": ["school", "point_of_interest", "establishment"],
"vicinity": "Jalan Teratai No.17, RT.4/RW.1, Jatipulo",
"category": "school"
},
{
"geometry": {
"location": {
"lat": -6.1812008,
"lng": 106.7856261
},
"viewport": {
"northeast": {
"lat": -6.179857319708496,
"lng": 106.7869020302915
},
"southwest": {
"lat": -6.182555280291501,
"lng": 106.7842040697085
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/school-71.png",
"id": "c2c219444c5a0ebe4a3cc3a1c7ba8aeac887fb94",
"name": "Sekolah Dasar Negeri Tanjung Duren Selatan 05 Pagi",
"place_id": "ChIJRabUAvf2aS4RH0yq3DzuydE",
"rating": 4.2,
"reference": "CmRSAAAAvG63rooM19T3RKVu_7c9yjj7_Ipzshl1OOUrnLKJZjgTyKb9GJrH1l62Ie9CQFN0BmZX_5KpSc0LoN46xLXy9k2GRP-6hWkWQwxJln4SKdMPNvFPnk6EhQ_3zyoYX6vHEhDZKLj8nSSQZRhYEqKSxLnsGhQrIDHxFabEN0KtvVM6DvkL_e6aDQ",
"scope": "GOOGLE",
"types": ["school", "point_of_interest", "establishment"],
"vicinity": "Jalan Tanjung Duren Dalam IV No.26, RT.3/RW.3, Tanjung Duren Selatan",
"category": "school"
}
],
"Convenience_Store": [{
"geometry": {
"location": {
"lat": -6.1675108,
"lng": 106.7955641
},
"viewport": {
"northeast": {
"lat": -6.166144019708497,
"lng": 106.7968599302915
},
"southwest": {
"lat": -6.168841980291502,
"lng": 106.7941619697085
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "fdfd8c6c1f5381d1558b77010445c1bfb72b2ac0",
"name": "Alfamart",
"opening_hours": {
"open_now": true,
"weekday_text": []
},
"place_id": "ChIJN9dNcln2aS4RYSdYc1koi4w",
"reference": "CmRSAAAA7ky5vQ0XtVUu8GEC7fuJUpmYc2cl3GiOspV6fQbPOggcUmopf1Ic0MqB658pBjcwWjuTDb7K3Errw4kyT08WbZJGoB-tZAz_DR3bWjaISERDUC2-O7ehXNsVpKevgyp2EhDuyH5Pur2itPZM92e5d6H-GhSZPYJLKH8aPfyKEgkZJBZX3vu-7g",
"scope": "GOOGLE",
"types": [
"convenience_store",
"food",
"store",
"point_of_interest",
"establishment"
],
"vicinity": "Jalan Tawakal Raya RT.3/RW.9, Tomang",
"category": "conveniencestore"
},
{
"geometry": {
"location": {
"lat": -6.1758259,
"lng": 106.7981367
},
"viewport": {
"northeast": {
"lat": -6.174526069708498,
"lng": 106.7995251802915
},
"southwest": {
"lat": -6.177224030291502,
"lng": 106.7968272197085
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "ce03dfc58a9776220ba205c38d1957a9526b889a",
"name": "Alfamart",
"opening_hours": {
"open_now": true,
"weekday_text": []
},
"photos": [{
"height": 2940,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/102054846689288140361/photos\"\u003eBata Expose Indonesia\u003c/a\u003e"
],
"photo_reference": "CmRaAAAApDL_kUQ46OPPGLyRF_wU_o1HIXHMtith4KfzJ5d1Tu8qd8YgfjMq_haUN4qB8mYfF3JJP2GDCm_Xu-A1RwxwCywuv_ogUYuY4oSfbKINy1DQcYi7VoebjmhapSVrkHsiEhDNzI7lLqjUE-mf__uNx9pMGhSdi89tZBDuZyWl0qqc3leDXE0KMA",
"width": 3920
}],
"place_id": "ChIJT9oDuWH2aS4Rn8NUqTJCoXg",
"rating": 5,
"reference": "CmRRAAAArHa0QxrDI2b5UbQPrPbEYKjhj1BKdyg7zqmbX6Y4c13LSG-5rUz5kCZ_QqSPW9ZzczzdYMQ4b9PaJxt7el-yQgXmQork4kH33ctcKLVD-J3Mf873ET7ICne6qpY3AnTWEhDUY6jTBsnRcNHo4U-goOCUGhTDvd2WGmkZdtFQpfG3R4hdw13uQw",
"scope": "GOOGLE",
"types": [
"convenience_store",
"food",
"store",
"point_of_interest",
"establishment"
],
"vicinity": "Jalan Gelong Baru, RT. 11/02, Tomang, Grogol petamburan, RT.11/RW.2, Tomang",
"category": "conveniencestore"
}
],
"Shelter": [{
"geometry": {
"location": {
"lat": -6.165864,
"lng": 106.790138
},
"viewport": {
"northeast": {
"lat": -6.164515019708498,
"lng": 106.7914869802915
},
"southwest": {
"lat": -6.167212980291502,
"lng": 106.7887890197085
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/bus-71.png",
"id": "bee1b888faccd80390916b0db9eee48b23d97997",
"name": "Kramat Djati. PT - Grogol",
"place_id": "ChIJrXP6vkL2aS4RZzma9Io9SLU",
"reference": "CmRSAAAATLmMwXMvt-4ETiEyVY0hCF60GDdinc_Da41B3WXy5w0TyQPDSewMSAVt9DRCGFoelfWi043QJOxDcoevR12exizcBpPWUtsZw7d0NGZg2I4hUHQy3gLXFBXNufcnKFweEhD5mNIc6BPjg3nPIaP0yr9oGhRMqcxj-MUhTuDS-bCask2Q0kRpDA",
"scope": "GOOGLE",
"types": [
"bus_station",
"transit_station",
"point_of_interest",
"establishment"
],
"vicinity": "JL. Doktor Susilo Raya No.16, Grogol - West Jakarta 11460",
"category": "shelter"
}]
}]
}
function initMap() {
// determine current location
lat = -6.174241;
lng = 106.798064;
pyrmont = {
lat: parseFloat(lat),
lng: parseFloat(lng)
};
// end
map = new google.maps.Map($('#map')[0], {
center: pyrmont,
zoom: 16,
scrollwheel: false
});
marker = new google.maps.Marker({
map: map,
position: {
lat: parseFloat(lat),
lng: parseFloat(lng)
}
});
latlngbounds = new google.maps.LatLngBounds();
google.maps.event.addListener(map, 'bounds_changed', function() {
latlngbounds = map.getBounds();
ne = latlngbounds.getNorthEast();
sw = latlngbounds.getSouthWest();
$("#lat-north .value").html(ne.lat());
$("#lng-east .value").html(ne.lng());
$("#lat-south .value").html(sw.lat());
$("#lng-west .value").html(sw.lng());
//var neLat = $("#lat-north .value").html(ne.lat()).text();
$.each(myData.results, function(index, obj) {
$.each(obj, function(idx, arr) {
$.each(arr, function(key, val) {
var myLatlng = new google.maps.LatLng(val.geometry.location);
if (latlngbounds > val.geometry.viewport) {
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: {
url: val.icon,
scaledSize: new google.maps.Size(30, 30)
},
title: val.name
});
return false;
} else {
return false;
}
});
});
});
});
}#map {
width: 400px;
height: 400px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrFkA5CJ2KDHXX_DhTZMlqDAtvocKv3eg&libraries=places,geometry&callback=initMap" async defer></script>
<div id="map">
</div>
<div id="bound">
<div id="lat-north" class="line">
<div class="name">neLat</div>
<div class="value"></div>
</div>
<div id="lng-east" class="line">
<div class="name">neLng</div>
<div class="value"></div>
</div>
<div id="lat-south" class="line">
<div class="name">swLat</div>
<div class="value"></div>
</div>
<div id="lng-west" class="line">
<div class="name">swLng</div>
<div class="value"></div>
</div>
</div>