google-mapsgoogle-maps-api-3
Add day/night overlay to google maps with MVC framework
I'm trying to add the day/night overlay from this github:https://github.com/rossengeorgiev/nite-overlay to my google maps view with MVC5 Framework. I've found some solutions on stackoverflow but these are for different Frameworks and work quite differently.
So my question is: how to add a day/night overview to my code? My attempt:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.map {
width: 100vw;
height:100vh;
}
</style>
</head>
<body>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<div class="map" id="map"></div>
<script>
var nite = {
map: null,
date: null,
sun_position: null,
earth_radius_meters: 6371008,
marker_twilight_civil: null,
marker_twilight_nautical: null,
marker_twilight_astronomical: null,
marker_night: null,
init: function(map) {
if(typeof google === 'undefined'
|| typeof google.maps === 'undefined') throw "Nite Overlay: no google.maps detected";
this.map = map;
this.sun_position = this.calculatePositionOfSun();
this.marker_twilight_civil = new google.maps.Circle({
map: this.map,
center: this.getShadowPosition(),
radius: this.getShadowRadiusFromAngle(0.566666),
fillColor: "#000",
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false,
editable: false
});
this.marker_twilight_nautical = new google.maps.Circle({
map: this.map,
center: this.getShadowPosition(),
radius: this.getShadowRadiusFromAngle(6),
fillColor: "#000",
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false,
editable: false
});
this.marker_twilight_astronomical = new google.maps.Circle({
map: this.map,
center: this.getShadowPosition(),
radius: this.getShadowRadiusFromAngle(12),
fillColor: "#000",
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false,
editable: false
});
this.marker_night = new google.maps.Circle({
map: this.map,
center: this.getShadowPosition(),
radius: this.getShadowRadiusFromAngle(18),
fillColor: "#000",
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false,
editable: false
});
},
getShadowRadiusFromAngle: function(angle) {
var shadow_radius = this.earth_radius_meters * Math.PI * 0.5;
var twilight_dist = ((this.earth_radius_meters * 2 * Math.PI) / 360) * angle;
return shadow_radius - twilight_dist;
},
getSunPosition: function() {
return this.sun_position;
},
getShadowPosition: function() {
return (this.sun_position) ? new google.maps.LatLng(-this.sun_position.lat(), this.sun_position.lng() + 180) : null;
},
refresh: function() {
if(!this.isVisible()) return;
this.sun_position = this.calculatePositionOfSun(this.date);
var shadow_position = this.getShadowPosition();
this.marker_twilight_civil.setCenter(shadow_position);
this.marker_twilight_nautical.setCenter(shadow_position);
this.marker_twilight_astronomical.setCenter(shadow_position);
this.marker_night.setCenter(shadow_position);
},
jday: function(date) {
return (date.getTime() / 86400000.0) + 2440587.5;
},
calculatePositionOfSun: function(date) {
date = (date instanceof Date) ? date : new Date();
var rad = 0.017453292519943295;
// based on NOAA solar calculations
var ms_past_midnight = ((date.getUTCHours() * 60 + date.getUTCMinutes()) * 60 + date.getUTCSeconds()) * 1000 + date.getUTCMilliseconds();
var jc = (this.jday(date) - 2451545)/36525;
var mean_long_sun = (280.46646+jc*(36000.76983+jc*0.0003032)) % 360;
var mean_anom_sun = 357.52911+jc*(35999.05029-0.0001537*jc);
var sun_eq = Math.sin(rad*mean_anom_sun)*(1.914602-jc*(0.004817+0.000014*jc))+Math.sin(rad*2*mean_anom_sun)*(0.019993-0.000101*jc)+Math.sin(rad*3*mean_anom_sun)*0.000289;
var sun_true_long = mean_long_sun + sun_eq;
var sun_app_long = sun_true_long - 0.00569 - 0.00478*Math.sin(rad*125.04-1934.136*jc);
var mean_obliq_ecliptic = 23+(26+((21.448-jc*(46.815+jc*(0.00059-jc*0.001813))))/60)/60;
var obliq_corr = mean_obliq_ecliptic + 0.00256*Math.cos(rad*125.04-1934.136*jc);
var lat = Math.asin(Math.sin(rad*obliq_corr)*Math.sin(rad*sun_app_long)) / rad;
var eccent = 0.016708634-jc*(0.000042037+0.0000001267*jc);
var y = Math.tan(rad*(obliq_corr/2))*Math.tan(rad*(obliq_corr/2));
var rq_of_time = 4*((y*Math.sin(2*rad*mean_long_sun)-2*eccent*Math.sin(rad*mean_anom_sun)+4*eccent*y*Math.sin(rad*mean_anom_sun)*Math.cos(2*rad*mean_long_sun)-0.5*y*y*Math.sin(4*rad*mean_long_sun)-1.25*eccent*eccent*Math.sin(2*rad*mean_anom_sun))/rad);
var true_solar_time_in_deg = ((ms_past_midnight+rq_of_time*60000) % 86400000) / 240000;
var lng = -((true_solar_time_in_deg < 0) ? true_solar_time_in_deg + 180 : true_solar_time_in_deg - 180);
return new google.maps.LatLng(lat, lng);
},
setDate: function(date) {
this.date = date;
this.refresh();
},
setMap: function(map) {
this.map = map;
this.marker_twilight_civil.setMap(this.map);
this.marker_twilight_nautical.setMap(this.map);
this.marker_twilight_astronomical.setMap(this.map);
this.marker_night.setMap(this.map);
},
show: function() {
this.marker_twilight_civil.setVisible(true);
this.marker_twilight_nautical.setVisible(true);
this.marker_twilight_astronomical.setVisible(true);
this.marker_night.setVisible(true);
this.refresh();
},
hide: function() {
this.marker_twilight_civil.setVisible(false);
this.marker_twilight_nautical.setVisible(false);
this.marker_twilight_astronomical.setVisible(false);
this.marker_night.setVisible(false);
},
isVisible: function() {
return this.marker_night.getVisible();
}
}
var googleMap;
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
googleMap = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
(() => {
var nightMap = initMap()
nite.init(googleMap);
})();
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=p"></script>
</body>
</html>
The errors I get: In webconsole:
- Uncaught ReferenceError: google is not defined
- InvalidValueError: setMap not an instance of map; and not an instance of streetviewpanorama
In visualstudio I don't get any errors but var nightmap is greyed out(Value is declared but never read). Which seems pretty crucial to me.
EDIT: Once this works I want to add it in my code that looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Optional: Makes the sample page fill the window. */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
}
table {
width: 75%;
border-collapse: collapse;
border-spacing: 0;
}
hr {
margin-top: 0px;
margin-bottom: 0px;
}
h3, .h3 {
margin-top: 0;
margin-bottom: -12px;
font-size: 19pt;
font-weight: 100;
}
h5 {
margin-top: 3px;
margin-bottom: 3px;
color: grey;
font-weight: 100;
font-size:10pt;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key="></script>
</head>
<body>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<div class="map"id="map"></div>
<script>
//Code for day/night overlay starts here-----------------
var nite = {
map: null,
date: null,
sun_position: null,
earth_radius_meters: 6371008,
marker_twilight_civil: null,
marker_twilight_nautical: null,
marker_twilight_astronomical: null,
marker_night: null,
init: function (map) {
if (typeof google === 'undefined' ||
typeof google.maps === 'undefined') throw "Nite Overlay: no google.maps detected";
this.map = map;
this.sun_position = this.calculatePositionOfSun();
this.marker_twilight_civil = new google.maps.Circle({
map: this.map,
center: this.getShadowPosition(),
radius: this.getShadowRadiusFromAngle(0.566666),
fillColor: "#000",
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false,
editable: false
});
this.marker_twilight_nautical = new google.maps.Circle({
map: this.map,
center: this.getShadowPosition(),
radius: this.getShadowRadiusFromAngle(6),
fillColor: "#000",
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false,
editable: false
});
this.marker_twilight_astronomical = new google.maps.Circle({
map: this.map,
center: this.getShadowPosition(),
radius: this.getShadowRadiusFromAngle(12),
fillColor: "#000",
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false,
editable: false
});
this.marker_night = new google.maps.Circle({
map: this.map,
center: this.getShadowPosition(),
radius: this.getShadowRadiusFromAngle(18),
fillColor: "#000",
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false,
editable: false
});
},
getShadowRadiusFromAngle: function (angle) {
var shadow_radius = this.earth_radius_meters * Math.PI * 0.5;
var twilight_dist = ((this.earth_radius_meters * 2 * Math.PI) / 360) * angle;
return shadow_radius - twilight_dist;
},
getSunPosition: function () {
return this.sun_position;
},
getShadowPosition: function () {
return (this.sun_position) ? new google.maps.LatLng(-this.sun_position.lat(), this.sun_position.lng() + 180) : null;
},
refresh: function () {
if (!this.isVisible()) return;
this.sun_position = this.calculatePositionOfSun(this.date);
var shadow_position = this.getShadowPosition();
this.marker_twilight_civil.setCenter(shadow_position);
this.marker_twilight_nautical.setCenter(shadow_position);
this.marker_twilight_astronomical.setCenter(shadow_position);
this.marker_night.setCenter(shadow_position);
},
jday: function (date) {
return (date.getTime() / 86400000.0) + 2440587.5;
},
calculatePositionOfSun: function (date) {
date = (date instanceof Date) ? date : new Date();
var rad = 0.017453292519943295;
// based on NOAA solar calculations
var ms_past_midnight = ((date.getUTCHours() * 60 + date.getUTCMinutes()) * 60 + date.getUTCSeconds()) * 1000 + date.getUTCMilliseconds();
var jc = (this.jday(date) - 2451545) / 36525;
var mean_long_sun = (280.46646 + jc * (36000.76983 + jc * 0.0003032)) % 360;
var mean_anom_sun = 357.52911 + jc * (35999.05029 - 0.0001537 * jc);
var sun_eq = Math.sin(rad * mean_anom_sun) * (1.914602 - jc * (0.004817 + 0.000014 * jc)) + Math.sin(rad * 2 * mean_anom_sun) * (0.019993 - 0.000101 * jc) + Math.sin(rad * 3 * mean_anom_sun) * 0.000289;
var sun_true_long = mean_long_sun + sun_eq;
var sun_app_long = sun_true_long - 0.00569 - 0.00478 * Math.sin(rad * 125.04 - 1934.136 * jc);
var mean_obliq_ecliptic = 23 + (26 + ((21.448 - jc * (46.815 + jc * (0.00059 - jc * 0.001813)))) / 60) / 60;
var obliq_corr = mean_obliq_ecliptic + 0.00256 * Math.cos(rad * 125.04 - 1934.136 * jc);
var lat = Math.asin(Math.sin(rad * obliq_corr) * Math.sin(rad * sun_app_long)) / rad;
var eccent = 0.016708634 - jc * (0.000042037 + 0.0000001267 * jc);
var y = Math.tan(rad * (obliq_corr / 2)) * Math.tan(rad * (obliq_corr / 2));
var rq_of_time = 4 * ((y * Math.sin(2 * rad * mean_long_sun) - 2 * eccent * Math.sin(rad * mean_anom_sun) + 4 * eccent * y * Math.sin(rad * mean_anom_sun) * Math.cos(2 * rad * mean_long_sun) - 0.5 * y * y * Math.sin(4 * rad * mean_long_sun) - 1.25 * eccent * eccent * Math.sin(2 * rad * mean_anom_sun)) / rad);
var true_solar_time_in_deg = ((ms_past_midnight + rq_of_time * 60000) % 86400000) / 240000;
var lng = -((true_solar_time_in_deg < 0) ? true_solar_time_in_deg + 180 : true_solar_time_in_deg - 180);
return new google.maps.LatLng(lat, lng);
},
setDate: function (date) {
this.date = date;
this.refresh();
},
setMap: function (map) {
this.map = map;
this.marker_twilight_civil.setMap(this.map);
this.marker_twilight_nautical.setMap(this.map);
this.marker_twilight_astronomical.setMap(this.map);
this.marker_night.setMap(this.map);
},
show: function () {
this.marker_twilight_civil.setVisible(true);
this.marker_twilight_nautical.setVisible(true);
this.marker_twilight_astronomical.setVisible(true);
this.marker_night.setVisible(true);
this.refresh();
},
hide: function () {
this.marker_twilight_civil.setVisible(false);
this.marker_twilight_nautical.setVisible(false);
this.marker_twilight_astronomical.setVisible(false);
this.marker_night.setVisible(false);
},
isVisible: function () {
return this.marker_night.getVisible();
}
}
var googleMap;
// this is double
//function initMap() {
// var uluru = {
// lat: -25.363,
// lng: 131.044
// };
// googleMap = new google.maps.Map(document.getElementById('map'), {
// zoom: 2,
// center: uluru
// });
// var marker = new google.maps.Marker({
// position: uluru,
// map: googleMap
// });
//}
(() => {
var nightMap = initMap()
nite.init(googleMap);
})();
//Code for my existing worldmap starts here----------------------
var map;
function initMap() {
google.maps.event.addDomListener(window, 'load', initMap);
//Create locations
var Isfanbul = { lat: 41.009633, lng: 28.965165 };
var Miami = { lat: 25.774266, lng: -80.193659 };
var NewHaven = { lat: 41.308214, lng: -72.925052 };
var JejuIsland = { lat: 33.393992, lng: 126.562665 };
var Encore = { lat: 50.896560, lng: 6.069610 };
//Marker images
var GreenStatus = "@ViewBag.GreenStatus";
var OrangeStatus = "@ViewBag.OrangeStatus";
var RedStatus = "@ViewBag.RedStatus";
//Default map settings, map settings can be changed here
map = new google.maps.Map(document.getElementById('map'),
{
center: { lat: 51.34, lng: 5.53 },
disableDefaultUI: true,
zoom: 3,
//Create marker
var MiamiMarker = new google.maps.Marker
({
position: Miami,
map: map,
icon: GreenStatus
});
//HTML for info windows
var MiamiContent ="test"
//This is a function that pops up the right infowindow when a marker is clicked
MiamiMarker.addListener('click', function () {
MiamiInfoCard.open(map, MiamiMarker);
});
</script>
<script type="text/javascript" src="~/Scripts/SwipeDetection.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript" src="~/signalr/hubs"></script>
<script type="text/javascript">
</script>
</body>
</html>For my attempt I was following this example: https://codepen.io/josephdburdick/pen/gGbLrV
But even copy/pasting this in the right places doesn't work for me. Seems like I'm missing something
Solution
Your code works for me if I remove the &callback=initMap from the API include and move the include into the <head> of the document. The Google Maps Javascript API v3 needs to be loaded before it is referenced in the code.
You also had a typo here:
var marker = new google.maps.Marker({
position: uluru,
map: map
});
Your map variable is googleMap, so that should be:
var marker = new google.maps.Marker({
position: uluru,
map: googleMap
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.map {
width: 100vw;
height: 100vh;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
</head>
<body>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<div class="map" id="map"></div>
<script>
var nite = {
map: null,
date: null,
sun_position: null,
earth_radius_meters: 6371008,
marker_twilight_civil: null,
marker_twilight_nautical: null,
marker_twilight_astronomical: null,
marker_night: null,
init: function(map) {
if (typeof google === 'undefined' ||
typeof google.maps === 'undefined') throw "Nite Overlay: no google.maps detected";
this.map = map;
this.sun_position = this.calculatePositionOfSun();
this.marker_twilight_civil = new google.maps.Circle({
map: this.map,
center: this.getShadowPosition(),
radius: this.getShadowRadiusFromAngle(0.566666),
fillColor: "#000",
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false,
editable: false
});
this.marker_twilight_nautical = new google.maps.Circle({
map: this.map,
center: this.getShadowPosition(),
radius: this.getShadowRadiusFromAngle(6),
fillColor: "#000",
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false,
editable: false
});
this.marker_twilight_astronomical = new google.maps.Circle({
map: this.map,
center: this.getShadowPosition(),
radius: this.getShadowRadiusFromAngle(12),
fillColor: "#000",
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false,
editable: false
});
this.marker_night = new google.maps.Circle({
map: this.map,
center: this.getShadowPosition(),
radius: this.getShadowRadiusFromAngle(18),
fillColor: "#000",
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false,
editable: false
});
},
getShadowRadiusFromAngle: function(angle) {
var shadow_radius = this.earth_radius_meters * Math.PI * 0.5;
var twilight_dist = ((this.earth_radius_meters * 2 * Math.PI) / 360) * angle;
return shadow_radius - twilight_dist;
},
getSunPosition: function() {
return this.sun_position;
},
getShadowPosition: function() {
return (this.sun_position) ? new google.maps.LatLng(-this.sun_position.lat(), this.sun_position.lng() + 180) : null;
},
refresh: function() {
if (!this.isVisible()) return;
this.sun_position = this.calculatePositionOfSun(this.date);
var shadow_position = this.getShadowPosition();
this.marker_twilight_civil.setCenter(shadow_position);
this.marker_twilight_nautical.setCenter(shadow_position);
this.marker_twilight_astronomical.setCenter(shadow_position);
this.marker_night.setCenter(shadow_position);
},
jday: function(date) {
return (date.getTime() / 86400000.0) + 2440587.5;
},
calculatePositionOfSun: function(date) {
date = (date instanceof Date) ? date : new Date();
var rad = 0.017453292519943295;
// based on NOAA solar calculations
var ms_past_midnight = ((date.getUTCHours() * 60 + date.getUTCMinutes()) * 60 + date.getUTCSeconds()) * 1000 + date.getUTCMilliseconds();
var jc = (this.jday(date) - 2451545) / 36525;
var mean_long_sun = (280.46646 + jc * (36000.76983 + jc * 0.0003032)) % 360;
var mean_anom_sun = 357.52911 + jc * (35999.05029 - 0.0001537 * jc);
var sun_eq = Math.sin(rad * mean_anom_sun) * (1.914602 - jc * (0.004817 + 0.000014 * jc)) + Math.sin(rad * 2 * mean_anom_sun) * (0.019993 - 0.000101 * jc) + Math.sin(rad * 3 * mean_anom_sun) * 0.000289;
var sun_true_long = mean_long_sun + sun_eq;
var sun_app_long = sun_true_long - 0.00569 - 0.00478 * Math.sin(rad * 125.04 - 1934.136 * jc);
var mean_obliq_ecliptic = 23 + (26 + ((21.448 - jc * (46.815 + jc * (0.00059 - jc * 0.001813)))) / 60) / 60;
var obliq_corr = mean_obliq_ecliptic + 0.00256 * Math.cos(rad * 125.04 - 1934.136 * jc);
var lat = Math.asin(Math.sin(rad * obliq_corr) * Math.sin(rad * sun_app_long)) / rad;
var eccent = 0.016708634 - jc * (0.000042037 + 0.0000001267 * jc);
var y = Math.tan(rad * (obliq_corr / 2)) * Math.tan(rad * (obliq_corr / 2));
var rq_of_time = 4 * ((y * Math.sin(2 * rad * mean_long_sun) - 2 * eccent * Math.sin(rad * mean_anom_sun) + 4 * eccent * y * Math.sin(rad * mean_anom_sun) * Math.cos(2 * rad * mean_long_sun) - 0.5 * y * y * Math.sin(4 * rad * mean_long_sun) - 1.25 * eccent * eccent * Math.sin(2 * rad * mean_anom_sun)) / rad);
var true_solar_time_in_deg = ((ms_past_midnight + rq_of_time * 60000) % 86400000) / 240000;
var lng = -((true_solar_time_in_deg < 0) ? true_solar_time_in_deg + 180 : true_solar_time_in_deg - 180);
return new google.maps.LatLng(lat, lng);
},
setDate: function(date) {
this.date = date;
this.refresh();
},
setMap: function(map) {
this.map = map;
this.marker_twilight_civil.setMap(this.map);
this.marker_twilight_nautical.setMap(this.map);
this.marker_twilight_astronomical.setMap(this.map);
this.marker_night.setMap(this.map);
},
show: function() {
this.marker_twilight_civil.setVisible(true);
this.marker_twilight_nautical.setVisible(true);
this.marker_twilight_astronomical.setVisible(true);
this.marker_night.setVisible(true);
this.refresh();
},
hide: function() {
this.marker_twilight_civil.setVisible(false);
this.marker_twilight_nautical.setVisible(false);
this.marker_twilight_astronomical.setVisible(false);
this.marker_night.setVisible(false);
},
isVisible: function() {
return this.marker_night.getVisible();
}
}
var googleMap;
function initMap() {
var uluru = {
lat: -25.363,
lng: 131.044
};
googleMap = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: googleMap
});
}
(() => {
var nightMap = initMap()
nite.init(googleMap);
})();
</script>
</body>
</html>- How to store geocoded address information into the database
- Ionic Capacitor Google Maps error (@capacitor/google-maps)
- Not able to get Google Map API response to parse
- Change UISearchBar textColor not working
- Using initMap and initAutocomplete on same html page google maps
- Google Maps AdvancedMarker hover listener function not working
- Google Maps Api :set the center of map to different coordinates after rendering
- Google map API route from current location to marker
- How to listen for user generated zoom in Google Maps?
- How to get Lat Long of moving object on google maps?
- How do I make an image pin in google maps center align with the location rather than bottom align in Android
- Google places api only include results that have postal_code
- Google Maps API: No 'Access-Control-Allow-Origin' header is present on the requested resource
- How to get the SHA-1 fingerprint certificate in Android Studio for debug mode?
- Flutter: how to get the name of place from google map
- Convert Place Name & Address to Google Maps URL And iFrame
- Live data updates (vehicle tracking)
- Flutter Google Maps, Trying to create an already created platform view, view id: 0
- Google Maps InfoWindow Not Showing on Marker Tap in Flutter
- Android Auto MapWithContentTemplate showing content but no map
- SHA-1 fingerprint of keystore certificate
- How to avoid getting a 404 Error on Google Maps Routes API
- React-native-maps Blank page Only google logo
- Submitting a form with ajax within infowindow GoogleMaps API
- Google Maps change content of infowindow
- How can I able to display latitude and longitude obtained by json data on google map by using modal for each of the search results in vue js?
- How to add map listeners onto map page
- How does Google Maps secure their API Key? How to make something similar?
- Google Map Directions API Optimize Waypoint and Force Waypoint Order
- Google MarkerClusterer: decluster markers below a certain zoom level?