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: ,,,

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s