- Beranda
- Komunitas
- Tech
- Programmer Forum
[ASK] Google API membuat event click di marker
TS
Azzz...
[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 :
yang ane Bold itu ane sudah coba pake code itu cuma masih belum bisa munculin mohon bantuannya T_T
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>
<!--
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</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>
<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>
<!--
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</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
1
1K
Kutip
7
Balasan
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Urutan
Terbaru
Terlama
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Komunitas Pilihan