Scribd Logo
Upload

Welcome to Scribd!

  • P9 WebGis2

    Uploaded by

    Adi Ferdi
    10 views3 pages
    Membuat Web GIS

    Original Title

    P9-WebGis2

    Copyright

    © © All Rights Reserved

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Membuat Web GIS

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views3 pages

    P9 WebGis2

    Uploaded by

    Adi Ferdi
    Membuat Web GIS

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    BEKERJA DENGAN GOOGLE MAPS API

    Objektif :
    1. Membuat lembar kerja menggunakan Google Maps API
    2. Menambah marker
    3. Menambah info window

    Alat dan bahan yang diperlukan :


    1. Web Server (XAMPP, WAMPP, dll)
    2. Text Editor (Notepad++, Sublime, Dreamweaver, dll)
    3. Koneksi internet

    Part 1 : Membuat Tampilan Web Menggunakan Google Maps API


    1. Buat file kosong baru mengunakan text editor (Blank Page)
    2. Copy dan Paste sourcecode di bawah ini :

    <!DOCTYPEhtml>
    <html>
    <head>
    <metaname="viewport"content="initialscale=1.0,user
    scalable=no"/>
    <styletype="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #map_canvas{height:100%}
    </style>
    <scripttype="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <scripttype="text/javascript">
    functioninitialize(){
    varlatlng=new
    google.maps.LatLng(0.4047738,123.7189253);
    varmyOptions={
    zoom:5,
    center:latlng,
    mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    varmap=new
    google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
    }

    </script>
    </head>
    <bodyonload="initialize()">
    <divid="map_canvas"style="width:100%;height:100%"></div>
    </body>
    </html>
    3. Simpan dengan nama index.html di dalam folder gis pada web server, buatlah
    terlebih dahulu jika folder belum ada.
    4. Buka web browser, akses ke folder gis (http://localhost/gis/), amati halaman
    yang ditampilkan.
    5. Merubah default location :
    a. Cari baris yang berisikan code berikut :
    varlatlng=newgoogle.maps.LatLng(0.4047738,123.7189253);
    b. Ganti menjadi :
    varlatlng=newgoogle.maps.LatLng(0.9170618,104.4494918);
    c. Amati perubahan yang terjadi
    6. Untuk mencari koordinat lokasi lain, bisa menggunakan google maps. Cari
    sebuah lokasi tertentu dan catat koordinat yang tampil di url seperti berikut :

    7. Merubah level zoom


    a. cari baris berikut :
    zoom:5,
    b. udah nilai tersebut, kemudian refresh web browser, amati perubahan yag
    terjadi
    c. lakukan perubahan beberapa kali dengan nilai yang berbeda
    8. Merubah basemap
    a. Cari baris berikut :
    mapTypeId:google.maps.MapTypeId.ROADMAP
    b. Ganti ROADMAP dengan beberapa tipe basemap berikut (Case Sensitive
    ):
    - SATELLITE
    - HYBRID
    - TERRAIN
    c. Amati perubahan yang terjadi

    Part 2 : Menambahkan Point Marker


    1. Copy dan Paste code di bawah ini di bagian paling bawah fungsi initialize () :

    varmarker_latlng=newgoogle.maps.LatLng(0.4047738,123.7189253);
    varmarker=newgoogle.maps.Marker({
    position:marker_latlng,
    map:map,
    title:"HelloWorld!"
    });
    2. Simpan file, kemudian refresh web browser, dan amati perubahan

    Part 3 : Menambahkan Info Window


    1. Tambahkan baris code berikut tepat di bawah marker code yang telah dibuat
    sebelumnya :

    varcontentString='Myinfowindowcontent';
    varinfowindow=newgoogle.maps.InfoWindow({
    content:contentString
    });

    google.maps.event.addListener(marker,'click',function(){
    infowindow.open(map,marker);
    });

    2. Refresh web browser, klik pada marker. Amati info window yang muncul.

    You might also like