Google Maps i journalistikken
InnholdIndeksHjem
ForrigeOppNeste
Kildekode
function main()
{
    // Konstruer kart (bundet til div-element med id "map")
    var map = new google.maps.Map2( document.getElementById( "map" ) );
    map.setCenter( new google.maps.LatLng( 63.43, 10.42 ), 13 );

    // Initialiser kartvisning: Kartkontroller og utsnitt
    var omc = new google.maps.OverviewMapControl( new google.maps.Size( 250, 250 ) );
    map.addControl( new google.maps.SmallMapControl() );
    map.addControl( new google.maps.MapTypeControl() );
    map.addControl( omc );

    // Konstruer ikon (til egendefinerte kartmarkører)
    var icon = new google.maps.Icon( google.maps.DEFAULT_ICON );
    icon.image = "img/ulykkes_ikon.png";
    icon.iconSize = new google.maps.Size( 26, 26 );
    icon.shadow = null;
    icon.iconAnchor = new google.maps.Point( 13, 13 );
    icon.infoWindowAnchor = new google.maps.Point( 26, 0 );

    // Konstruer kartmarkør og legg inn i kartet
    var marker = new google.maps.Marker( new google.maps.LatLng( 63.4176078, 10.3970961 ), { icon: icon, title: "Påkjørselen" } );
    map.addOverlay( marker );

    // Legg til klikk-håndtering av markører og rutevisning
    google.maps.Event.addListener( marker, "click", function() { showInfo( marker, map ) } );
}

function initMap2()
{
    var map2 = new google.maps.Map2( document.getElementById( "map2" ) );
    map2.setCenter( new google.maps.LatLng( 63.4176078, 10.3970961 ), 16 );

    // Sett opp WMS-tjenesten til Kartverket: Raster
    var tileLayerRaster2 = new google.maps.TileLayer( new google.maps.CopyrightCollection( "Statens Kartverk" ), 0, 19 );
    tileLayerRaster2.getTileUrl = function( t, z ) { return getTileUrl( 'toporaster2', t, z ); }
    tileLayerRaster2.isPng = function() { return true; }
    var mapTypeRaster2 = new google.maps.MapType( [ tileLayerRaster2 ], google.maps.PHYSICAL_MAP.getProjection(), "Raster" );
    map2.addMapType( mapTypeRaster2 );
    map2.setMapType( mapTypeRaster2 );

    // Konstruer ikon (til egendefinerte kartmarkører)
    var icon = new google.maps.Icon( google.maps.DEFAULT_ICON );
    icon.image = "img/ulykkes_ikon.png";
    icon.iconSize = new google.maps.Size( 26, 26 );
    icon.shadow = null;
    icon.iconAnchor = new google.maps.Point( 13, 13 );
    icon.infoWindowAnchor = new google.maps.Point( 26, 0 );

    // Konstruer kartmarkør og legg inn i kartet
    var marker2 = new google.maps.Marker( new google.maps.LatLng( 63.4176078, 10.3970961 ), { icon: icon, title: "Påkjørselen" } );
    map2.addOverlay( marker2 );
}

function showInfo( marker, map )
{
    marker.openInfoWindowHtml( '<div class="info"><h2>Påkjørselen i Trondheim</h2><div id="map2"></div><p>Eksempel på nært utstnitt av gateskisse. Veldig bra for å beskrive et hendelsesforløp innenfor et kvartal eller to.</p></div>' );
    initMap2();
}

// Returnerer korrekt URL til etterspurt kartutsnitt mot WMS-tjener
function getTileUrl( type, tile, zoom )
{
    switch( type )
    {
        case 'toporaster2':
            return 'http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=' + type + '&zoom=' + zoom + '&x=' + tile.x + '&y=' + tile.y;
    }
}

google.load( "maps", 2, { "other_params" : "sensor=false&hl=no" } );

$( document ).ready( main );
Copyright (c) 2010: Espen Andersen
Hva synes du om dette temaet? Send tilbakemelding!