Google Maps JavaScript API v3

Visa Grön rutt på en större karta

Full kontroll med API
Jag berättade i ett tidigare inlägg, Digital fiskekarta med Google maps, att jag använde mig av Google maps för att underlätta mitt fiskande. Kartan gjordes enkelt i Googles vanliga interface. I och med att ett nytt projekt startades på Luleå Renhållning fick jag möjlighet att utveckla en karta ytterligare fast utan att använda Googles vanliga interface.

Projektet heter Grön rutt och är ett samarbete mellan Luleå renhållning, Posten, Tidningstjänst och Luleå kommun. Grön rutt handlar om att boende på vissa ställen i kommunen skall ställa sina soptunnor och påstlådor på en sida av vägen. Detta ska man göra för att sopbilen och postbilen inte ska behöva backa och vända i trånga slingor/områden. Detta minskar risken för olyckor men även utsläppen av avgaser minskas. För att visa vilka gator som berörs behövde vi peka ut det på en karta. I tryck är det enkelt, där var det bara att markera gatorna på en bifntlig karta i Adobe Illustrator. Men på webben är det enligt mig inte lika tillgänligt med en pdf. Att behöva zooma på en stor pdf-karta i mobilen alstrar onödigt mycket negativ energi.

När jag fick höra om Grön rutt tänkte jag direkt på att jag kunde göra en karta i Google maps. Men det fanns ett problem, i och med att invånarna skulle placera sina kärl och tunnor på en sida av vägen behövde det framgå vilken sida det skulle ske på. Det går inte med Google maps vanliga interface. Det går att göra streck men det säger inte mer än vilka vägar det handlar om. Jag fick då användning för Google Maps JavaScript API v3 eftersom att det då går att lägga till pilar längs vägmarkeringarna och då gestalta färdriktningen på våra rundor. Tillvägagångssättet för att skapa utmarkerade kartor skiljer sig en aning från Google maps vanliga tjänst, det blir lite mer manuellt arbete. Google har bra exempelkoder som jag utgick ifrån. Du hittar koderna på Google developers.

För att markera vägarna var jag tvungen att skriva in latitude- och longitudvärden. Jag hittade en bra webbsida där jag kunde peka ut på en karta och automatiskt få dessa värden samlade. Sedan var det bara att lägga in dessa i koden till kartan. Jag laddade upp kartan och bäddade in den på sidan.

Responsiv karta
Det är allt viktigare att det man gör på webben nu är responsivt. Därför är kartan för Grön rutt också det. För att få den responsiv lägger du först in en CSS-kod (som jag hittat på Niklaus Gerbers blogg någonstans mellan Head-taggarna ).

/* Responsive iFrame */
 
.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Sedan bäddar du in kartan med följande kod på sidan där den ska synas:

<!-- Responsive iFrame -->
<div class="responsive-iframe-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="<strong>adressen till din karta</strong>"></iframe>
</div>