rnDesto
Reputation: 259
How to compare geometry viewport from object to map active window
I'm trying to show markers on map, only if geometry.viewport on my object is match to map window.
So, I began to create map bounds and comparing with geometry.viewport when map is drag/zoom to show marker if viewport match on map window, but my marker didn't show.
Is it posible to comparing map bounds to geometry.viewport from my object?
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>Upvotes: 0
Views: 308
Answers (1)
duncan
Reputation: 31912
Yes, you can use the LatLngBounds class, you probably need the intersects method. Something like this:
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());
$.each(myData.results, function(index, obj) {
$.each(obj, function(idx, arr) {
$.each(arr, function(key, val) {
var bounds = new google.maps.LatLngBounds(
val.geometry.viewport.southwest,
val.geometry.viewport.northeast
);
if (latlngbounds.intersects(bounds)) {
var marker = new google.maps.Marker({
position: val.geometry.location,
map: map,
icon: {
url: val.icon,
scaledSize: new google.maps.Size(30, 30)
},
title: val.name
});
}
});
});
});
});
Upvotes: 1
Related Questions
- Get zoom size on Google Map API
- How to check specific place or places are contain in current viewport in google map api?
- How to get current Area, Width and Height (with respect to latitude and longitude) of current map?
- Check if polygon is in viewport
- Google Maps API v3: Getting geometry of a drawn shape
- Google Maps addGeoJson Based on Viewport
- How tweak bounds based on viewport on google maps?
- Google Map API V3 detecting container width/height change
- Check if a point is in the viewport
- How to know the Geometry coordinates for google Maps