Membuat marker pada saat click map

BrazenElixir Desember 24, 2019
pada kesempatan kali ini saya akan membuat jika google map di klik maka akan membuat marker secara langsung di peta yang kalian buat, pertama tama yang perlu di siapkan adalah API google map, jquery, css, html.

langsung saja. pertama kalian buat script html sebagai berikut :


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Google Maps Add Marker Click Maps</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="map" style="height: 100vh; width: 100%"></div>
            </div>
        </div>
    </div>

</body>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_KALIAN&libraries=drawing"></script>
<script type="text/javascript">
    var map;
    function InitMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: -34.397,
                lng: 150.644
            },
            zoom: 8
        });

        google.maps.event.addListener(map, 'click', function(event) {
            placeMarker(event.latLng);
        });
    }



    function placeMarker(location) {
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
    }

    // A $( document ).ready() block.
    $(document).ready(function() {
        InitMap();
    });
</script></html>

Keterangan script :

 pada text yang berwarna merah isi dengan api key yg kalian buat, selanjut nya agar bisa membuat marker pada saat di click map tersebuat bisa di liat di bagian function InitMap() ada event addlisterner klick  itu berfungsi pada saat map di click akan memberikan kordinat dan menjalankan function placeMarker() di situ memberikan paramerter kordinat map dan akan tercipta marker
mungkin hasil yang saya buat akan tampak sebagai berikut :

kode Lengkap klik di sini. selamat mencoba . . .

Tags
Reactions

Posting Komentar

0 Komentar