logo   Om Google Maps




Google Maps-kort er meget anvendte til indsættelse i HTML-sider.


Goggle Maps er kodet med javaScript. Det giver på den ene side en stor værktøjskasse at arbejde med. På den anden side kan individuel kode kun anvendes indenfor de rammer der er givet / de funktionaliteter, der er til rådighed. Tilgængelige kodeeksempler (se menupunktet 'Kodeeksempler') vil derfor være gode inspiratorer og indikatorer for 'det muliges kunst'.


Der er så megen funktionalitet til rådighed i APIen til Google Maps, så det mest af alt minder om et programmeringssprog. Den bedste vej til at få en fornemmelse af mulighederne er at gennemgå kodeeksemplerne.


Den kodemæssige håndtering af de knapper etc. der udgør især brugerinterfacet til kortene kan tilpasses med parametre som angivet i menupunktet 'Parametre'.


Med udgangspunkt i det nedenfor viste basiskort kan der foretages tilpasning af visning og anvendelsen af GM-kort med parametre og ved direkte kode i det 'styrescript' der hører til ethvert kort.


Den lokation (længde- og breddegrad) der skal anvendes til centrering af et GM-kort og i mange andre sammenhænge i GM-kort kan bl.a. findes her: Ved hjælp af adresse: . Her er jeg: .


Et basiskort som det nedenfor viste (incl. default parametre) indsættes v.h.a. de nedenunder viste 4 kodebidder.



Til indsættelse af kortet er benyttet følgende tre stykker kode:


  • API-link
    Kald af det API-bibliotek, der indeholder den funktionalitet GM skal bruge.
    <script
    src="http://maps.googleapis.com/maps/api/js">
    </script&gr;


  • CSS
    Styring af størrelsen på det aktuelle kort.
    <style>
    #canvas{
       width: 500px;
       height: 380px;
    }
    </style>


  • Vis kort
    Kode indsættes der hvor kortet skal vises i body-delen.
    'id="googleMap'-selektoren starter styrescriptet.
    <div id="googleMap canvas" ></div>


  • Styrescript
    Det lokale minimum script, der med hjælp fra API-bioliteket understøtter, at kortet bliver vist og fungerer.

    Scriptet består af 2 dele:
    - initialize-funktionen der indeholder de nødvindige lokale parametre.
    - Google.maps eventet, der startes fra HTML-koden - og derefter starter opbygningen af kortet med assistance fra parametrene indeholdt i initialize-funktionen.

    Initialize-funktionen består igen af 2 dele:
    - en variabel med de absolut nødvendige paramentre.
    - instans af google.maps.MAP-objektet. Navnedelen er det navn kortet aktuelt tildeles og hvormed der refereres til det.

    Både 'mapProp' og 'map' er valgfrie navne.
    <script>
    function initialize() {
        var mapProp = {
           center: new google.maps.LatLng(55.733544,12.078236),
           zoom: 10,
           mapTypeId :google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    'center'-paraeteret angiver positionen for kortets midte.
    'zoom'-parameteret styrer det målestoksforhold kortet skal vises i.
    'mapTypeId'-parameteret styrer hvilken korttype, der skal vises.


6 artikler om 'Programming With Google Maps APIs':





















x
x