[ASK] Google API membuat event click di marker

Beranda

...

Programmer Forum
[ASK] Google API membuat event click di marker

Azzz...

20-05-2018 11:32

[ASK] Google API membuat event click di marker

Permisi agan-agan, ane lagi buat web tentang Sistem Informasi Geografis, nah ada di suatu halaman ane mau dalam radius tertentu menampilkan tempat-tempat yang ane udah mark, nah ane mau tambahin event click di tempat-tempat yang ane buat itu tapi gagal terus mohon bantuannya gan

Code :

Quote:

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
[removed][removed]
[removed][removed]
[removed][removed]
<title>Lokasi Wisata Religi</title>
<style type='text/css'>
body{
background-color:#ffd76c;
}

#peta {
width: 100%;
height: 400px;
background: red;

}

#info {
width: 100%;
background-color:#fff;
height: 400px;

}
#info p{
padding:10px;
text-align:justify;
font-family:arial;
font-size:0.8em;
}
</style>

[removed][removed]
[removed][removed]
[removed]
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -2.548926, lng: 118.0148634},
zoom: 13
});

// Menggunakan fungsi HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};

marker = new google.maps.Marker({
position: pos,
map: map,
icon: 'location.png',
title: 'Posisi Kamu',
animation: google.maps.Animation.DROP,
});

map.setCenter(pos);

var user_location = position.coords.latitude+","+position.coords.longitude;
var url = "tampil.php";
var jarak = 1;
var info = [];
$.ajax({
url: url,
data: "position="+encodeURI(user_location)+"&jarak="+jarak,
dataType: 'json',
cache: true,
success: function(msg){
for(i=0; i < msg.data.lokasi.length;i++){
var point = new google.maps.LatLng(parseFloat(msg.data.lokasi[i].latitude),parseFloat(msg.data.lokasi[i].longitude));
tanda = new google.maps.Marker({
position: point,
map: map,
icon: "place.png",
animation: google.maps.Animation.DROP,
title: msg.data.lokasi[i].nama_lokasi
});
}
}
});

}, function() {
handleLocationError(true, map.getCenter());
});
} else {
handleLocationError(false, map.getCenter());
}
}

function showPlaces() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -2.548926, lng: 118.0148634},
zoom: 13
});

// Menggunakan fungsi HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};

marker = new google.maps.Marker({
position: pos,
map: map,
icon: 'location.png',
title: 'Posisi Kamu',
animation: google.maps.Animation.DROP,
});

map.setCenter(pos);
var user_location = position.coords.latitude+","+position.coords.longitude;
var url = "tampil.php";
var jarak = document.getElementById("jarak").value;

$.ajax({
url: url,
data: "position="+encodeURI(user_location)+"&jarak="+jarak,
dataType: 'json',
cache: true,
success: function(msg){
for(i=0; i < msg.data.lokasi.length;i++){
var point = new google.maps.LatLng(parseFloat(msg.data.lokasi[i].latitude),parseFloat(msg.data.lokasi[i].longitude));
tanda = new google.maps.Marker({
position: point,
map: map,
icon: "place.png",
animation: google.maps.Animation.DROP,
title: msg.data.lokasi[i].nama_lokasi
});

//nampilin deskripsi
google.maps.event.addListener(tanda, 'click', (function(tanda, i) {
return function() {
var id= locations[i][0];

$.ajax({
url : "get_info.php",
data : "id=" +id ,
success : function(data) {

$("#info").html(data);
}
});
}
})(tanda, i));
//batas nampilini deskripsi

}
}
});

}, function() {
handleLocationError(true, map.getCenter());
});
} else {
handleLocationError(false, map.getCenter());
}
}


function handleLocationError(browserHasGeolocation, pos) {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -2.548926, lng: 118.0148634},
zoom: 13
});
var infoWindow = new google.maps.InfoWindow({map: map});
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}

google.maps.event.addDomListener(window, 'load', initMap);
[removed]

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Lokasi Wisata<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Rekomendasi Kuliner</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin_login.php">Admin Login</a>
</li>

</ul>
</div>
</nav>
</head>
<body>
<div id="main" class="container">
<div class="row">
<div class="col-lg-9">
<div id="map" style="width:100%; height:600px;"></div>
</div>

<div class="col-lg-3">
<form class="form-vertical" method="post" action="#">
<div class="form-group">
<label>Radius / Jarak</label>
<select id="jarak" name="jarak" class="form-control">
<option value="">-- Silahkan Pilih Radius / Jarak --</option>
<option value="1">1 KM</option>
<option value="2">2 KM</option>
<option value="3">3 KM</option>
<option value="4">4 KM</option>
<option value="5">5 KM</option>
<option value="6">6 KM</option>
<option value="7">7 KM</option>
<option value="8">8 KM</option>
<option value="9">9 KM</option>
<option value="10">10 KM</option>
<option value="11">11 KM</option>
<option value="12">12 KM</option>
<option value="13">13 KM</option>
<option value="14">14 KM</option>
<option value="15">15 KM</option>
<option value="16">16 KM</option>
<option value="17">17 KM</option>
<option value="18">18 KM</option>
<option value="19">19 KM</option>
<option value="20">20 KM</option>
<option value="21">21 KM</option>
<option value="22">22 KM</option>
<option value="23">23 KM</option>
<option value="24">24 KM</option>
<option value="25">25 KM</option>
<option value="26">26 KM</option>
<option value="27">27 KM</option>
<option value="28">28 KM</option>
<option value="29">29 KM</option>
<option value="30">30 KM</option>
</select>
</div>

<div class="form-group">
<button id="cari" type="button" class="btn btn-primary">Cari Tempat</button>
</div>
</form>
</div>
</div>

</div>
[removed]
[removed]
</body>
</html>

yang ane Bold itu ane sudah coba pake code itu cuma masih belum bisa munculin mohon bantuannya T_T

nona212 memberi reputasi

Kutip

Balasan

Komentar yang asik ya

Mari bergabung, dapatkan informasi dan teman baru!

Programmer Forum

20.2KThread•5KAnggota

Urutkan

Terlama

Komentar yang asik ya