I haven't been able to find this answer in the Maps API documentation, but is it possible to have an "inset" map using the Google Maps API?
It seems like it is doable with the Maps Embed API (see lower left corner), but you can't customize the map with this API.
I ended up making my own. I don't know why this question was downvoted. Anyway, check out my JSFiddle here: http://jsfiddle.net/wLuhktu4/1/
function initialize() {
var mapOptions = {
zoom: 17,
center: {
lat: -33.8666,
lng: 151.1958
},
disableDefaultUI: true
};
var overviewMapOptions = {
zoom: 17,
mapTypeId: google.maps.MapTypeId.SATELLITE,
center: {
lat: -33.8666,
lng: 151.1958
},
disableDefaultUI: true
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var overviewMap = new google.maps.Map(document.getElementById('overview-map'), overviewMapOptions);
google.maps.event.addListener(map, 'bounds_changed', (function () {
overviewMap.setCenter(map.getCenter());
overviewMap.setZoom(map.getZoom());
}));
}
google.maps.event.addDomListener(window, 'load', initialize);
The problem (although minor) is that because this is not officially supported, the watermark and terms of use take up a lot of space on this inset map.
I hope this helps someone in the future.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With