Mapstars -kaarten - maps - 2travel2

The maps developed by www.mapstars.com moved to this section 2travel2.nl. Some maps are based on the fantastic Joomla plugin developed by Mike Reumer. There are also maps developed by the traditional html and javascripts. Ideas en examples are always welcome.
De kaarten van www.mapstars.com zijn verhuisd naar deze sectie van 2travel2.nl. Een aantal kaarten is gebaseerd op de fraaie Joomla Google Maps plugin van Mike Reumer. Er zijn ook kaarten die gemaakt zijn met de traditionele html en javascripts. Voorbeelden en suggesties zijn altijd welkom.

Dual map

maandag, 08 maart 2010 21:40

Full screen dual map means that you have a map all over the window/ Bij een full screen dual map krijg een kaart over het hele scherm - onafhankelijk van de resolutie.

Voorbeeld van een Full screen map/example of a full screen map

How to make a full screen map / Hoe maak ik een full screen map - see code below the line:
-----------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Google Dual Maps by 2travel2</title>
    <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAaaOoFGMhLS5vZLoMjU5M0hQBGtmNlmg7gXyX7JJfMurUFJWz5xRSXUMhUoJdG_7WPwtXtqetRjvKeA" type="text/javascript"></script>
</head>
<body onunload="GUnload()">

    

    <div id="map" style="position:absolute;top:0px;left:5px;width:100%; height: 100%"></div>
    <div id="minimap" style="position:absolute;top:0px;left:70px;width:190px; height: 190px"></div>
    <div style="position:absolute;top:200px;left:70px;width:200px; height: 50px"><a href="http://2travel2.nl/Kaarten/Geografie-algemeen/" target="_blank">More maps/meer kaarten</a></div>

    
    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
      However, it seems JavaScript is either disabled or not supported by your browser.
      To view Google Maps, enable JavaScript by changing your browser options, and then
      try again.
    </noscript>

    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {

      function createMarker(point) {
        map.addOverlay(new GMarker(point));
      }

      // ===== Setup The Maps =====

      // Display the main map, with some controls and set the initial location
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(52.1,4.9), 9);

      // Set up three markers on the main map

      createMarker(new GLatLng(52.1,4.9));

      // create the crosshair icon, which will indicate where we are on the minimap
      // Lets not bother with a shadow
      var Icon = new GIcon();
      Icon.image = "xhair.png";
      Icon.iconSize = new GSize(21, 21);
      Icon.shadowSize = new GSize(0,0);
      Icon.iconAnchor = new GPoint(11, 11);
      Icon.infoWindowAnchor = new GPoint(11, 11);
      Icon.infoShadowAnchor = new GPoint(11, 11);

      // Create the minimap
      var minimap = new GMap2(document.getElementById("minimap"));
      minimap.setCenter(new GLatLng(52.1,4.9), 5);

      // Add the crosshair marker at the centre of teh minimap and keep a reference to it

      var xhair = new GMarker(minimap.getCenter(), Icon);
      minimap.addOverlay(xhair);


      // ====== Handle the Map movements ======

      // Variables that log whether we are currently causing the maps to be moved

      var map_moving = 0;
      var minimap_moving = 0;

      // This function handles what happens when the main map moves
      // If we arent moving it (i.e. if the user is moving it) move the minimap to match
      // and reposition the crosshair back to the centre
      function Move(){
        minimap_moving = true;
    if (map_moving == false) {
    minimap.setCenter(map.getCenter());
    xhair.setPoint(map.getCenter());
    xhair.redraw(true);
    }
    minimap_moving = false;
      }
      // This function handles what happens when the mini map moves
      // If we arent moving it (i.e. if the user is moving it) move the main map to match
      // and reposition the crosshair back to the centre
      function MMove(){
        map_moving = true;
    if (minimap_moving == false) {
    map.setCenter(minimap.getCenter());
    xhair.setPoint(minimap.getCenter());
    xhair.redraw(true);
    }
    map_moving = false;
      }

      // Listen for when the user moves either map
      GEvent.addListener(map, 'move', Move);
      GEvent.addListener(minimap, 'moveend', MMove);
    }

    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    </script>

</body>

</html>

Booking.com.....Meer dan 88.000 hotels in meerdan 81 landen
Nederland	Frankrijk	Duitsland
Italië	Spanje	België
UK	USA	Portugal
Zwitserland	Oostenrijk	Griekenland
Denemarken	86.000 hotels in 81 landen

Mapstars -kaarten - maps - 2travel2

Voorbeeld van een Full screen map/example of a full screen map

Archief

Sitemap en glossary

2travel2 - Reisnieuws - Travel news

Luxe & Comfort

Statistics

RSS - 2travel2 - Laatste nieuws

Hotels van Booking.com