Even though we are starting from scratch, a lot of the work that we did in the last recipe is being re-used, so I strongly encourage you to go through the last recipe Adding markers and events before moving into this one.

In this recipe, we will be integrating jQuery into our work as well, to save us time on creating our own animator tool (or re-using the one that we created in the Animating independent layers recipe in Chapter 6, Bringing Static Things to Life), as it would take us away from our main topic.

In this recipe we will be creating two files. An HTML file and a JS file. Let's look into it, starting with the HTML file:

When you load the HTML file, you will find a fullscreen map that cannot be dragged. When you click on a marker, it will fade into the selected area. You can now drag the cursor around the map. The next time you click in the internal map (regular click on any area), the map will fade back to the original upper layer.

Our biggest step is the creation of two maps, one overlapping the other. We did that with some CSS magic by layering the elements and putting our top layer at the last position in the stack (we could probably use the z-index to validate it, but it worked so I didn't add that to the CSS). After that we created our two div layers and set their CSS code. In the JavaScript code, contrary to the way we did in the last recipe, we hardcoded the values that we wanted into both the maps.

In our options for both the maps, we set the default controllers not to take effect by setting the property disableDefaultUI to be true, while in mapIn we set panControl to be true to showcase that the map can be panned through:

var mapOut = new google.maps.Map(document.getElementById("mapOut"),{
  center: BASE_CENTER,
  zoom: 11,
  mapTypeId: google.maps.MapTypeId.SATELLITE,
  disableDefaultUI: true
});
var mapIn = new google.maps.Map(document.getElementById("mapIn"),{
  center: BASE_CENTER,
  zoom: 14,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  disableDefaultUI: true,
  panControl:true
});

We can manually set all the controllers by setting a Boolean value to any of the following options:

Our event logic works in the exact same way that it did in the last recipe. The only change is within the actual listeners where we switch between the maps using jQuery:

function onMarkerClicked(ev){
  mapIn.panTo(ev.latLng);
  $("#mapOut").fadeOut(1000);
}

google.maps.event.addListener(mapIn, 'click', function() {
  mapIn.panTo(BASE_CENTER);
  $("#mapOut").fadeIn(1000);
});

In both the event for the markers and the click event of the map, we are using the fadeIn and fadeOut methods of jQuery to animate our external maps visibility.

When you try to drag around the higher-level map (the first visible map), you will notice that the map cannot move—it's not pannable. Google API v3 doesn't support the capability to disable the panning, but it does support the capability to get updated every time the map center point changes.

As such we listen in to the following change:

google.maps.event.addListener(mapOut, 'center_changed', function() {
        mapOut.panTo(BASE_CENTER); 
});

All we are doing is that each time the map position changes, we force it back to its original position, making it impossible to move our map around.