md5 digunakan lebih dari 1 juta script engine situs untuk melindungi
password user dalam sebuah hash yang berbentu md5. Dengan adanya md5,
dapat mengurangi kecurangan pengambilan password atau dari hacker yang
ingin mengambil password. Maka dari itu md5 ini sangat cocok untuk
memprotect setiap karakter dari besar hingga kecil dengan hasil hash
yang berbeda.
Banyak situs md5 decrypt/decode yang memungkinkan dapat mengetahui
hash yang telah menjadi md5, tapi mengetahui hash itu tidak selalu
benar, karena jika user itu membuat password yang sulit maka akan sulit
juga didecode dari situs md5decrypt. Sistem yang digunakan pada situs
md5decrypt adalah menyimpan setiap karakter yang ada hingga bermilyar
kata yang telah tersimpan pada database.
Banyak hash yang dapat digunakan di PHP. Seperti sha1, tiger,
dan lain-lain, tapi tidak semua situs membuat hash tersebut menggunakan
itu tetapi masih menggunakan md5 :D. Silahkan lihat script dibawah ini. Encrypt md5
Dari kedua kode diatas adalah gabungan. Jadi untuk yang pertama adalah encrypt nama Paijo dan hasil dari md5 hash tersebut dipakai untuk fungsi if pada kode kedua. Cara ini dapat digunakan untuk form POST dan kamu dapat mencoba-nya seperti ini.
Copy Code
<?php
$nama= $_POST['nama'];
$hash= '2e01ac45aa40e6ae26bda0db858f89b1';
if(($nama) && (md5($nama) === "$hash")){
echo'Halo Paijo apa kabar..?';
}else{
echo'<form method="POST"action="?">
<b>Nama:</b><br/>
<input type="text"name="nama">
<input type="submit"value="SUBMIT">';
}
?>
Sederhana dan sangat simple, diatas adalah gabungan dari kode kesatu dan kedua yang disatukan menjadi form input nama. Silahkan pelajari kode ketiga diatas dan praktekan. Pada form input nama masih default yaitu Paijo, untuk mengubahnya silahkan gunakan kode kesatu dan ubah pada string $hash.
Fungsi Hash merupakan sebuah algoritma yang mengubah
text atau message menjadi sederetan karakter acak yang memiliki jumlah
karakter yang sama. Hash juga termasuk salah satu bentuk teknik kriptografi dan dikategorikan sebagai kriptografi tanpa key (unkeyed cryptosystem). Selain itu hash memiliki nama lain yang juga dikenal luas yaitu “one-way function”.
Kita sering sekali menjumpai hash di website-website yang menyediakan
layanan untuk download file ataupun program secara resmi. Hash memang
umumnya digunakan untuk mengecek integritas dari sebuah pesan atau file.
File atau pesan yang sudah berubah akan memiliki nilai hash yang
berbeda. Sebagai contoh, dengan sebuah algoritma hash, pesan'hello' akan memberikan nilai hash 12345 sedangkan pesan 'hallo' memiliki nilai hash83746. Dengan kata lain output hash dari kata 'hello' tidak akan sama dengan 'hallo'.
Bahkan sekalipun dalam kacamata kita kedua pesan tersebut terlihat
hanya memiliki perbedaan sedikit saja, namun nilai hash yang dimiliki
oleh kedua pesan tersebut sangat jauh berbeda.
Berbeda dengan teknik enkripsi dalam kriptografi, tujuan hash memang
mengubah sebuah pesan yang dapat dibaca (readable text) menjadi pesan
acak (unreadable text) sama seperti enkripsi, namun hal mendasar yang
menjadi perbedaan dari hash adalah pesan yang telah acak tadi tidak
dapat diubah kembali menjadi pesan yang seharusnya. Inilah mengapa hash
disebut juga sebagai “one-way function“.
Ketika pertama kali belajar konsep hash, enkripsi, dan dekripsi, saya
mencoba bersikap kritis dengan mengambil hipotesis bahwa dengan
algoritma yang tepat, hash pasti dapat dibalikkan (reverse). Dengan kata
lain keyakinan saya terhadap dekripsi sebuah fungsi hash sangat besar.
Namun, jreng-jreng… keyakinan saya tidak terbukti setelah Lecture Security Technology saya menjelaskan hal ini dengan baik sekali. Penjelasannya seperti ini:
Misalkan ada pesan ‘Hello’, pesan ini akan kita hash dengan algortima
yang sederhana, yaitu pertama-tama huruf-huruf tersebut akan kita ubah
kedalam bilangan angka.
a menjadi 1
b menjadi 2
c menjadi 3
dst…
Sehingga pesan 'hello' akan menjadi '8.5.12.12.15'. Kemudian kita jumlahkan bilangan-bilangan tersebut sehingga kata 'hello' akan menghasilkan jumlah 52.
h
e
l
l
o
8
+
5
+
12
+
12
+
15
=
52
Kemudian langkah terakhir adalah kita ambil satu digit yang paling
belakang sebagai nilai hashnya, yaitu 2. Nah nilai hash 2 ini bukankah
bisa dibuat dari banyak kombinasi huruf? jumlah huruf pun juga bisa
bervariasi, tidak harus 5 seperti 'hello'. Berikut beberapa text yang memiliki hash 2.
Text
Integer
Sum
Hash
bye
2.25.5
32
2
confidential
3.15.14.6.9.4.5.14.20.9.1.12
112
2
enemy
5.14.5.13.25
62
2
dlsb…
Perlu dicatat disini, bahwa tabulasi diatas adalah ilustrasi
bagaimana hash dikatakan sebagai sebuah fungsi yang tidak dapat di
dekripsi. Dalam contoh diatas hasil hash sudah sangat acak sehingga kita
tidak dapat mengetahui lagi apakah sebuah hash yang ingin kita dekripsi
memiliki kandungan huruf e atau z atau m atau lainnya.
Kegunaan
Menurut Kaufman et. al. (2002), Fungsi hash dapat digunakan sebagai:
Password didalam sebuah sistem dianjurkan untuk disimpan dengan
menggunakan fungsi hash. Dengan demikian administrator sistem tersebut
sekalipun tidak akan dapat melihat atau menggunakan password user yang
telah menjadi membernya. Hal ini akan memberikan impact yang baik kepada
user bahwa baik sistem maupun administrator sangat menghargai privasi
dari anggotanya.
Selain itu pula, jika database password pengguna, dengan cara tertentu dapat diakses oleh publik, maka siapapun tetap tidak langsung dapat menggunakan password tersebut. Untuk menggunakan password yang telah publicly accessible terlebih dahulu seorang hacker harus melakukan buteforce terhadap kumpulan password-password teresbut.
Message Integrity
Andaikata Alice ingin mengirimkan pesan kepada Bob. Untuk mencegah
ada seseorang ditengah perjalanan yang ingin mengganti pesan tersebut,
Alice melakukan hash terhadap pesannya sendiri yang kemudian dikirim
bersama dengan pesannya yang asli. Namun, ternyata apa yang Alice
lakukan tidak menjamin integritas keamanan pesan miliknya. Seseorang
tetap dapat mengubahnya dan menyediakan fungsi hash dari pesan tersebut
Alice bermaksud mengirimkan pesan ‘Hello Bob’ kepada Bob. Alice
kemudian mengirimkan pesan tersebut bersama dengan fungsi hash MD5 dari
pesannya, yaitu b4c9c3086946666f7ec8014629e105f7. Alice mengirimkan
pesan dan hash MD5 nya melalui jasa pengantar barang, TIKI. Ditengah
perjalanan, Eve berhasil mencuri pesan Alice untuk Bob dari sang kurir
TIKI. Eve membuat pesan baru yang berbunyi ‘Hello Honey’, membuat hash
MD5 dari pesannya tersebut, dan mengembalikannya kedalam tas sang Kurir
tanpa sepengetahuan sang Kurir.
Kurir yang baik hati tersebut memberikan pesan Alice tadi kepada Bob.
Ketika Bob membacanya, Bob merasakan ada yang aneh terhadap pesan
tersebut. Bob mengecek hash MD5 dari pesan yang dibacanya, namun
pengecekan MD5 pesan yang diterima Bob dengan MD5 yang dikirim bersama
paket tersebut cocok. Tapi apakah Bob tahu pesan yang bertuliskan ‘Hello
Honey’ tersebut memang berasal dari Alice?
Dalam kasus ini tentu saja Bob tidak memiliki cara untuk mengetahui
keabsahan pesan tersebut hanya dari paket yang berisi pesan dan MD5 yang
katanya dikirim oleh Alice. Hal ini tidak akan terjadi jika Alice dan
Bob menggunakan sejumlah karakter rahasia yang hanya diketahui oleh
kedua orang tersebut. Karakter-karakter rahasia ini disebut juga dengan
nama keyed hash. Penggunan karakter ini disebut sebagai message
integrity, dimana cara pengunaannya adalah sebelum dilakukannya hash,
Alice terlebih dahulu menggabungkan pesannya dengan karakter rahasia
tersebut.
Jika pesan Alice adalah ‘Hello Bob’ dan karakter rahasia
Alice dan Bob adalah 1234, maka hasil hash yang dibuat oleh Alice akan
bernilai 508e1ae04417ccb03953aa2a320d1714. Jika Eve berhasil mencuri
pesan Alice tersebut dan menggantinya dengan pesan miliknya sendiri, dan
karena Eve tidak mengetahui karakter rahasia milik Alice dan Bob, Eve
berasumsi bahwa MD5 yang dikirim oleh Alice tidak mengikutsertakan keyed
hash sehingga ia hanya melakukan MD5 terhadap pesannya ‘Hello honey’ tersebut.
Bob yang kemudian menerima pesan yang kata sang kurir berasal dari
Alice mengecek integritas dari pesan yang katanya dari Alice tersebut
dengan cara menambahkan keyed hash miliknya kedalam pesan yang diterima
tersebut. Setelah dilakukan hash terhadap pesan 'Hello Honey1234' Bob dengan yakin dapat mengatakan bahwa pesan tersebut bukan berasal dari Alice.
Pesan
Keyed Hash
MD5
‘Hello Bob’
b4c9c3086946666f7ec8014629e105f7
‘Hello Honey’
e42afb241fceefa05e3e897fa0686f14
‘Hello Bob’
1234
508e1ae04417ccb03953aa2a320d1714
‘Hello Honey’
1234
7dc14667a10ce5116b50f4d8a7e1ad9c
Message Fingerprint
Penggunaan Hash sebagai sidik jari pesan (message fingerprint)
digunakan untuk mengecek apakah file yang kita simpan masih sesuai
dengan file asli ketika hash file tersebut dibuat dan belum berubah.
Jika terdeteksi adanya file yang tidak memiliki hash yang sama dengan
yang telah dibuat sebelumnya, maka dapat dipastikan bahwa file tersebut
telah berubah. Contoh: Pada bulan Januari 2008 Alice memiliki file
Bob.txt yang berisi profil mengenai Bob. Alice mengkomputasi hash dari
file tersebut sehingga diperoleh:
MD5(Bob.txt) --> f06defdef28e15706f974f6d080b57fe
Dua tahun kemudian Alice membuka kembali file Bob.txt tersebut dan
mencurigai ada yang tidak lazim dari isi file tersebut. Alice kemudian
membuat hash dari file Bob.txt tersebut dan mendapatkan nilai hashnya.
MD5(Bob.txt) --> 5f3b147ae863e541701d7011e597e98b
Alice kemudian menyadari bahwa hash file Bob.txt pada Januari 2010
berbeda dengan hash pada bulan Januari 2008. Dengan demikian, dapat
dipastikan bahwa seseorang telah mengubah file tersebut antara Bulan
Januari 2008 hingga Januari 2010.
Ketidak cocokan message fingerprint tidak selama disebabkan karena
ada manusia yang mengubah file ataupun pesan tersebut. Terkadang message
fingerprint tidak cocok antara 2 waktu dapat disebabkan oleh transfer
file yang gagal, sektor pada hardisk dimana sebuah file disimpan rusak,
dan lain sebagainya. Jadi, tidak selamanya manusia dapat disalahkan
juga..
Karakteristik
Dobbertin (1996) dalam artikelnya menyebutkan bahwa dalam membuat fungsi hash harus memenuhi beberapa kriteria berikut:
Relative cepat dalam melakukan komputasi
2 buah pesan yang berbeda tidak boleh memiliki nilai hash yang sama
Bebas dari serangan Birthday Attack (dari sebanyak 264 atau ~18 446 744 073 709 551 616 pesan kemungkinan besar didapat 2 pesan yang memiliki nilai hash yang sama)
2 Pesan yang memiliki sangat sedikit perbedaan harus memiliki nilai hash yang sangat berbeda (Kaufman et. al., 2002).
Algortima
Hash umumnya disajikan dalam bentuk bilangan hexadecimal, yaitu
kombinasi antara angka 0-9 dengan huruf a hingga f. Beberapa algoritma
hash yang terkenal dan masih sering digunakan hingga saat ini yaitu:
md5 (Message Digest 5)
SHA-1 (Secure Hash Algortihm 1)
SHA-2 (Secure Hash Algorithm 2), yang meliputi 4 fungsi hash:
SHA-224
SHA-256
SHA-384
SHA-512
Algoritma MD5 dikembangkan oleh seorang Professor MIT yang bernama
Ronald L. Rivest. Istilah “MD” yang digunakan merupakan abrieviation
dari Message Digest. Perkembangan MD5 telah melalui 5 kali revisi, dimana MD generasi pertama dan kedua di desain untuk membantu algoritma RSA dalam melakukan komputasi signature dari pesan rahasia yang akan dikirim dan dienkripsi oleh RSA.
Generasi ke tiga dan empat MD hadir karena adanya persaingan dari
algortima hash lain yang bernama SNEFRU, yang memiliki keunggulan
kecepatan pada proses komputasinya dibandingkan MD2. Ketika ditemukan
adanya celah keamanan dari SNEFRU pada tahun 1992, ditahun yang sama
ditemukan pula kelemahan MD4, yang kemudian Profesor Rivest segera
menambal kelemahan tersebut dan menggantinya menjadi generasi ke lima
Message Digest, yaitu MD5. Dari kelima generasi ini, MD generasi pertama
dan ketiga merupakan algoritma yang tidak dipublikasikan. Sementara
spesifikasi algoritma MD2, MD4, dan MD5 terdapat dalam RFC1319, RFC1320, dan RFC1321.
Secure Hash Algoritm (SHA) dikembangkan oleh National Institute and
Standard Technology (NIST) pertama kali pada tahun 1993. Generasi
pertama SHA diberi nama SHA-0. Kemudian pada tahun 1995, generasi kedua SHA, SHA-1,
muncul dan dipublikasikan oleh NIST dengan kode publikasi FIPS PUB
180-1. Generasi kedua SHA ini muncul dalam waktu 12 jam dari setelah
dilaporkannya terdapat kelemahan dalam algoritma SHA-0. Generasi ketiga
algortima SHA, SHA-2, dipublikasikan pada tahun 2001
dengan berbagai pilihan jumlah bit yang digunakan, yaitu: 224, 256, 384,
dan 512. Baik SHA-1 dan SHA-2 pada dasarnya memiliki algortima yang
serupa, hanya berbeda di jumlah karakter outputnya saja. SHA-1, SHA-256,
dan SHA-516 memiliki jumlah karakter output masing-masing secara
berurutan adalah 40, 32, dan 64.
Sumber:
Dobbertin, H., 1996, The Status of MD5 After a Recent Attack, Cryptobytes: Volume 2, Number 2.
Kaufman, C., Perlman, R., and Speciner, M., 2002, Network Security: Private Communication in a Public World (2nd Edition), Prentice Hall: USA.
Menezes, A., Oorschot, P.V., and Vanstone, S., 1997, Handbook of Applied Cryptography, CRC Press: USA.
Oppliger, R., 2005, Contemporary Cryptography, Artech House, Inc., Norwood, Massachusetts.
Stevens, M., Sotirov, A., Applebaum, J., Lenstra, A., Molnar, D., Osvik, D.A., and Weger, B.D., 2009, Short Chosen-Prefix Collisions for MD5 and the Creation of a Rogue CA Certificate, Crypto 2009, LNCS 5667: pp 55-69.
Wang, X. and Yu, H., 2005, How to break MD5 and other hash functions, EUROCRYPT.
Anda tentu pernah melihat suatu website dimana satu atau lebih
elementnya dapat dipindah-pindah dengan metode drag. Apa itu drag?
menarik objek? Kurang lebih artinya seperti itu, dengan “draggable
object”, kita dapat memindahkan sebuah objek di halaman website (bahkan
pada windows, tapi kita batasi pada halaman web saja) hanya dengan
menekan mouse, tahan, dan gerakkan mouse tersebut menuju lokasi baru
yang diinginkan, kemudian lepaskan mouse. Objek pun berpindah tempat.
Salah
satu sifat pemrograman Javascript adalah event-based. Artinya,
Javascript dapat “listen” pada event atau kejadian tertentu yang terjadi
pada halaman webnya. Event atau kejadian ini bisa berupa misalnya, user
mengetik, user fokus pada textbox, user klik tombol, user menekan
tombol, dan user melepaskan tekanan tombol.
Draggable,
sebenarnya hanya memanipulasi posisi objek (left dan top) agar selalu
berubah mengikuti posisi mouse ketika bergerak. Perubahan posisi ini
terjadi ketika mouse bergerak. Tapi tentu saja, tidak setiap pergerakan
mouse akan merubah posisi. Karena kita tentu tidak mau, objek terus
bergerak hanya gara-gara kita menggerakkan mouse, bukan?
Drag,
adalah ketika tombol mouse (kiri) ditekan, kemudian bergerak, dan ketika
selesai, tombol dilepas. Dengan demikian, secara konsep awal, kita akan
membuat Javascript menghitung ulang dan menempatkan objek pada posisi
tertentu ketika mouse bergerak (onmousemove), namun setelah diawali dengan menekan mouse (onmousedown) pada objek tersebut. Dan setelah tombol dilepas (onmouseup), jangan lagi menghitung atau “menggerakkan” objek.
Berikut
adalah contoh implementasi dari konsep draggable diatas. Tentu saja,
dengan bantuan framework jQuery (termasuk jQuery UI), dojo, EXTJs, atau
lainnya, akan jauh lebih mudah untuk membuat sebuah objek dapat di-drag.
Kode html, css, dan javascript yang saya lampirkan dibawah bertujuan
untuk (supaya dapat) menjelaskan konsep tentang bagaimana membuat sebuah
objek dapat di drag.
A marker identifies a location on a map. By default, a marker uses a standard
image. Markers can display custom images, in which case they are usually
referred to as "icons." Markers and icons are objects of type
Marker. You can set a custom icon within the marker's
constructor, or by calling setIcon() on the marker. See more
about customizing the marker image below.
Broadly speaking, markers are a type of overlay. For information on other
types of overlay, see
Drawing on the map.
Markers are designed to be interactive. For example, by default they receive
'click' events, so you can add an event listener to bring up an
info window
displaying custom information. You can allow users to move a marker on the map
by setting the marker's draggable property to true.
For more information about draggable markers, see
below.
Add a marker
The google.maps.Marker constructor takes a single
Marker options object literal, specifying the initial
properties of the marker.
The following fields are particularly important and commonly set when
constructing a marker:
position (required) specifies a LatLng
identifying the initial location of the marker.
map (optional) specifies the Map
on which to place the marker. If you do not specify the map on construction
of the marker, the marker is created but is not attached to
(or displayed on) the map. You may add the marker later by calling the
marker's setMap() method.
The following example adds a simple marker to a map at Uluru, in the center
of Australia:
In the above example, the marker is placed on the map at construction of the
marker using the map property in the marker options.
Alternatively, you can add the marker to the map directly by using the
marker's setMap() method, as shown in the example below:
var myLatlng =new google.maps.LatLng(-25.363882,131.044922);var mapOptions ={
zoom:4,
center: myLatlng}var map =new google.maps.Map(document.getElementById("map"), mapOptions);var marker =new google.maps.Marker({
position: myLatlng,
title:"Hello World!"});// To add the marker to the map, call setMap();
marker.setMap(map);
The marker's title will appear as a tooltip.
If you do not wish to pass any Marker options in the
marker's constructor, instead pass an empty object {} in the
last argument of the constructor. View example
(marker-simple.html).
Remove a marker
To remove a marker from the map, call the setMap() method
passing null as the argument.
marker.setMap(null);
Note that the above method does not delete the marker. It simply removes
the marker from the map. If instead you wish to delete the marker,
you should remove it from the map, and then set the
marker itself to null.
If you wish to manage a set of markers, you should create
an array to hold the markers. Using this array, you can then call
setMap() on each marker in the array in turn when you need to
remove the markers. You can delete
the markers by removing them from the map and then setting the
array's length to 0, which removes all
references to the markers. View example
(marker-remove.html).
Animate a marker
You can animate markers so that they exhibit dynamic movement in a
variety of different circumstances. To specify the way a marker is animated,
use the marker's animation property, of type
google.maps.Animation. The following Animation
values are supported:
DROP indicates that the marker
should drop from the top of the map to its final location when first
placed on the map. Animation will cease once the marker comes to rest
and animation will revert to null.
This type of animation is usually specified during creation of the
Marker.
BOUNCE indicates that the marker
should bounce in place. A bouncing marker will continue bouncing until
its animation property is explicitly set to
null.
You may initiate an animation on an existing marker by calling
setAnimation() on the Marker object.
// The following example creates a marker in Stockholm, Sweden using a DROP// animation. Clicking on the marker will toggle the animation between a BOUNCE// animation and no animation.var marker;function initMap(){var map =new google.maps.Map(document.getElementById('map'),{
zoom:13,
center:{lat:59.325, lng:18.070}});
marker =new google.maps.Marker({
map: map,
draggable:true,
animation: google.maps.Animation.DROP,
position:{lat:59.327, lng:18.067}});
marker.addListener('click', toggleBounce);}function toggleBounce(){if(marker.getAnimation()!==null){
marker.setAnimation(null);}else{
marker.setAnimation(google.maps.Animation.BOUNCE);}}
View
example (marker-animations.html).
If you have many markers, you might not want to drop them on the map
all at once. You can make use of setTimeout() to space your
markers' animations using a pattern like that shown below:
function drop(){for(var i =0; i <markerArray.length; i++){
setTimeout(function(){addMarkerMethod();}, i *200);}}
If you want to display a single textual character on a marker, you can use a
marker label. If you need greater customization, you can define an icon to
show instead of the default marker image. Defining an icon involves setting a
number of properties that determine the visual behavior of the marker.
The sections below describe marker labels, simple icons, complex icons, and
symbols (vector icons).
Marker labels
A marker label is a single textual character that appears inside a marker.
You can specify a marker label as either a string or a
MarkerLabel
object that includes a string and other label properties. In both cases,
only the first character of the specified string is displayed on the marker.
When creating a marker, you can specify a label property in the
MarkerOptions
object. Alternatively, you can call setLabel() on the
Marker
object to set the label on an existing marker.
The following example displays labeled markers when the user clicks on the
map:
// In the following example, markers appear when the user clicks on the map.// Each marker is labeled with a single alphabetical character.var labels ='ABCDEFGHIJKLMNOPQRSTUVWXYZ';var labelIndex =0;function initialize(){var bangalore ={ lat:12.97, lng:77.59};var map =new google.maps.Map(document.getElementById('map'),{
zoom:12,
center: bangalore
});// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map,'click',function(event){
addMarker(event.latLng, map);});// Add a marker at the center of the map.
addMarker(bangalore, map);}// Adds a marker to the map.function addMarker(location, map){// Add the marker at the clicked location, and add the next-available label// from the array of alphabetical characters.var marker =new google.maps.Marker({
position: location,
label: labels[labelIndex++% labels.length],
map: map
});}
google.maps.event.addDomListener(window,'load', initialize);
In the most basic case, an icon can simply indicate an image to
use instead of the default Google Maps pushpin icon. To specify such an icon,
set the marker's icon property to the URL of an image.
The Google Maps API will size the icon automatically.
// This example adds a marker to indicate the position of Bondi Beach in Sydney,// Australia.function initMap(){var map =new google.maps.Map(document.getElementById('map'),{
zoom:4,
center:{lat:-33, lng:151}});var image ='images/beachflag.png';var beachMarker =new google.maps.Marker({
position:{lat:-33.890, lng:151.274},
map: map,
icon: image
});}
You may want to specify complex shapes to indicate regions that are
clickable, and specify how the icons should appear relative to
other overlays (their "stack order"). Icons specified in this manner should
set their icon properties to an object of type
Icon.
Icon
objects define an image. They also define the size of the icon,
the origin of the icon (if the image you want is part of a larger
image in a sprite, for example), and the anchor where the icon's
hotspot should be located (which is based on the origin).
If you are using a label with a custom marker,
you can position the label with the labelOrigin property in the
Icon
object.
// The following example creates complex markers to indicate beaches near// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond// to the base of the flagpole.function initMap(){var map =new google.maps.Map(document.getElementById('map'),{
zoom:10,
center:{lat:-33.9, lng:151.2}});
setMarkers(map);}// Data for the markers consisting of a name, a LatLng and a zIndex for the// order in which these markers should display on top of each other.var beaches =[['Bondi Beach',-33.890542,151.274856,4],['Coogee Beach',-33.923036,151.259052,5],['Cronulla Beach',-34.028249,151.157507,3],['Manly Beach',-33.80010128657071,151.28747820854187,2],['Maroubra Beach',-33.950198,151.259302,1]];function setMarkers(map){// Adds markers to the map.// Marker sizes are expressed as a Size of X,Y where the origin of the image// (0,0) is located in the top left of the image.// Origins, anchor positions and coordinates of the marker increase in the X// direction to the right and in the Y direction down.var image ={
url:'images/beachflag.png',// This marker is 20 pixels wide by 32 pixels high.
size:new google.maps.Size(20,32),// The origin for this image is (0, 0).
origin:new google.maps.Point(0,0),// The anchor for this image is the base of the flagpole at (0, 32).
anchor:new google.maps.Point(0,32)};// Shapes define the clickable region of the icon. The type defines an HTML// <area> element 'poly' which traces out a polygon as a series of X,Y points.// The final coordinate closes the poly by connecting to the first coordinate.var shape ={
coords:[1,1,1,20,18,20,18,1],
type:'poly'};for(var i =0; i < beaches.length; i++){var beach = beaches[i];var marker =new google.maps.Marker({
position:{lat: beach[1], lng: beach[2]},
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]});}}
Until version 3.10 of the Google Maps JavaScript API, complex icons were
defined as MarkerImage objects. The Icon object
literal was added in version 3.10, and replaces MarkerImage from
version 3.11 onwards. Icon object literals support the same
parameters as MarkerImage, allowing you to easily convert a
MarkerImage to an Icon by removing the
constructor, wrapping the previous parameters in {}'s,
and adding the names of each parameter. For example:
var image =new google.maps.MarkerImage(
place.icon,new google.maps.Size(71,71),new google.maps.Point(0,0),new google.maps.Point(17,34),new google.maps.Size(25,25));
In addition to raster images, a marker supports the display of vector paths
called Symbols. To display a vector
path, pass a Symbol object literal with the desired path to the
marker's icon property. You can use one of the predefined paths
in
google.maps.SymbolPath
or define a custom path using
SVG path notation.
For more information, see the
documentation for symbols.
Make a marker draggable
To allow users to drag a marker to a different location on the map, set
draggable to true in the marker options.
var myLatlng =new google.maps.LatLng(-25.363882,131.044922);var mapOptions ={
zoom:4,
center: myLatlng}var map =new google.maps.Map(document.getElementById("map"), mapOptions);// Place a draggable marker on the mapvar marker =new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true,
title:"Drag me!"});
