The main question about the North Pole on Google Earth has been the one about Google displaying satellite images of the North Pole with sea water. Parents have had a hard time explaining to their kids that Santa is living in the middle of the sea. Google Maps does not even display a graphical representation of the North Pole in any viewing mode. The area above the 85th latitude only shows a grey area. It doesn’t look pretty but there is solution for it:
The Google Maps API provides constructor methods to display circles and rectangles within the Google Map. With “new google.maps.Rectangle” we can create a colored rectangle that fills the grey area of the map and as you zoom in and out and move around the map, the rectangle stays in place.
The following code adds the rectangle to the map:
map: map,fillColor: "#98b2cd", fillOpacity:1.0,strokeWeight:0
});
This code sets the bounds in which the rectangle will be drawn in and where to place it on the map. I have used the latitudes and longitudes from the grey area. I figured them out by placing markers on to the edge of the grey area and got the lat and long from that.
new google.maps.LatLng(85.04593081899449, -180.8),
new google.maps.LatLng(90, 179)
);
rectangle.setBounds(areaBounds);
We also want it to look pretty in satellite mode. The code below listens to any click on the map and checks if the map type has been changed and calls the function to change the color of the rectangle if the map type changed:
google.maps.event.addDomListener(window, ‘click’, function() {
if(mapType != map.mapTypeId) {
mapType = map.mapTypeId;
if(mapType == "hybrid") {
drawRectangle(mapType);
} else {
drawRectangle(mapType);
}
}
});
View the source code and try out the example here!
