Home/ Questions/Q 6095741
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T12:50:48+00:00

I am having two maps which are overlayed using div. However whenever I pan

  • 0

I am having two maps which are overlayed using div. However whenever I pan the map, only the map above the base map moves and not the base map. Kindly tell if there is some way to let the mouse panning enabled for both the maps simultaneously.
Thanks
Astha

<style type='text/css'>
/*<![CDATA[*/

.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}
.overlay {
    margin: auto;
    text-align: left;
    width: 800px;
    height: 532px;
   position:absolute;
    pointer-events:none;
}

.message {
    width: 800px;
    height: 532px;

    background-color: #fff;
    opacity: .35;
    filter: alpha(opacity=35);
    position:absolute;
     pointer-events:none;
}




    /*]]>*/
</style>
<script type="text/javascript" src="http://nls.tileserver.com/api.js"></script>
<script src="http://maps.google.com/maps?    file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA9pSslyaYyyl6x8HKrHAZvxS4-alJFZ9Cxp3qiYSlGHIYxF9uHhT0NLb9B9BXGUGGDctSO4QVa1jLLA" type="text/javascript">
</script> 
<script src="http://nls.tileserver.com/opacity-control.js" type="text/javascript">       </script> 
<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script language="javascript">

function whereami(lat, lon) {
load(lat,lon);
}
/*
function pull() {
var location=JSON.parse(locater.getLocation());

whereami(location.lat, location.lon);
}*/
function load(latitude,longitude)
{

 if (GBrowserIsCompatible()) {
    //var latitude = 55.96;
    //var longitude = -3.2;
    var MyIcon = new GIcon();
    var zoom = 18;
    var map = new GMap(document.getElementById("map"));
    map.setCenter(new GLatLng(latitude,longitude), zoom);
    var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180),new GLatLng(90, 180)), 1,
    "Historical maps from <a href='http://geo.nls.uk/maps/api/'>NLS Maps API<\/a>");
    var copyrightCollection = new GCopyrightCollection();
    copyrightCollection.addCopyright(copyright);



    var tilelayer = new GTileLayer(copyrightCollection, 1, NLSTileUrlOS('MAXZOOM'));
    tilelayer.getTileUrl = NLSTileUrlOS;
    var nlsmap = new GMapType([tilelayer], G_NORMAL_MAP.getProjection(), "Historical");
    map.addMapType(nlsmap);
    map.setMapType(nlsmap);

    var map1 = new GMap(document.getElementById("map1"));
    map1.setCenter(new GLatLng(latitude,longitude), zoom);
    var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180),new GLatLng(90, 180)), 1,
    "Historical maps from <a href='http://geo.nls.uk/maps/api/'>NLS Maps API<\/a>");
    var copyrightCollection = new GCopyrightCollection();
    copyrightCollection.addCopyright(copyright);

    var tilelayer = new GTileLayer(copyrightCollection, 1, NLSTileUrlOS('MAXZOOM'));
    tilelayer.getTileUrl = NLSTileUrlOS;
    var nlsmap = new GMapType([tilelayer], G_NORMAL_MAP.getProjection(), "Historical");
    map1.addMapType(nlsmap);
    map1.setMapType(nlsmap);
    // put div over map
Position.clone($("map"), $("map1").setStyle({'pointer-events': 'none'}), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});


    var marker = new GMarker( new GLatLng(latitude,longitude));
    var myIcon=new GIcon(marker.getIcon());
    myIcon.image='pushpin.png';
    myIcon.iconSize = new GSize (40,40);
    var marker2 = new GMarker( new GLatLng(latitude,longitude), myIcon);
    map.addOverlay(marker2);




    }
}
</script >
</head>
<body onload = whereami(55.96,-3.2)>
<div class="modal">
    <div class="overlay" id="map">

    </div>
    <div class="message" id="map1"></div>
</div>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Probably u can use getCenter from map 1 and use latlang to setCenter of second on events u are moving mouse

    • 0