Google Maps integrálása ASP.NET-tel

Meglepően egyszerű a Google térkép szolgáltatásának integrálása egy weboldalba, mindössze egy iframe elemre van szükségünk, aminek code behindból ügyesen beállítjuk az src attribútumát. Nem is értem, miért nem használják ezt több helyen.

Történetesen az a feladatom, hogy egy GridView-ban lévő Contact rekordok Address mezőjében lévő címet a grid alatt egy térképen jelenítsem meg. A kérképet egy iframefogja tartalmazni, amihez odacsaptam a runat=”server” attribútumot, hogy kódból el tudjam érni:

  <iframe runat="server" id="ifMap" width="500" height="300"></iframe>

Ezt a trükköt egyébként bármelyik HTML elemmel el lehet játszani, szerver oldalon HtmlGenericControl lesz belőle.

Ezért a GridView kapott egy gombot, ami ráadásul a CommandArgument segítségével viszi magával a címet is az eseménykezelőbe:

  <asp:Button runat="server" 
CommandArgument='<%# Eval( "Address" ) %>'
CommandName="ShowMap"
Text="Térképre" />

A gomb kattintást a RowCommand eseménykor lehet kezelni:

    if( e.CommandName == "ShowMap" )
    {
        this.ifMap.Attributes[ "src" ] = String.Format(
            CultureInfo.InvariantCulture,
            @"http://maps.google.com/maps?q={0}&output=embed",
            e.CommandArgument );
    }

A dolognak tehát az az érdekessége, hogy egy sima URL-be be tudok fűzni egy teljes címet, például “Budapest, Magyar Tudósok krt. 2.” és Google Maps rátalál a helyre. Sőt, rátalál olyan földrajzi nevekre is, amiket magyarul és angolul máshogy hívunk: Magyarország, Brazília, Peking.

Persze a térkép adatbázisa nem tökéletes, rólunk például azt hiszi, hogy itt tanyázunk, pedig valójában ebben az épületben lehet minket megtalálni (a Live Space nem engedi, hogy iframe-et szúrjak be ide😦 ).

Technorati Tags: ,,,

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s