Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inset Map in Google Maps API

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.

like image 496
kaoscify Avatar asked Feb 11 '23 04:02

kaoscify


1 Answers

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.

like image 110
kaoscify Avatar answered Jun 06 '23 23:06

kaoscify