Selamat datang kembali di blog Mari belajar coding. Setelah postingan kemarin kita belajar menampilkan peta google maps menggunakan PHP dan database Mysql, pada tutorial kali ini kita akan belajar bagaimana cara mengganti icon marker di google maps api menggunakan PHP dan database Mysql. Dengan mengganti icon marker, kita dapat mengubah setiap icon marker pada titik koordinat tertentu sesuai keinginan kita.
Mengganti Icon Marker di Google Maps API
1. Pastikan teman-teman sudah generate api untuk mengakes google maps menggunakan layanan api. Jika belum generate api, silahkan baca tutorialnya disini.
2. Download plugin Map Icons.
3. Buat folder maps-marker di directory xampp/htdocs. Kemudian extraks plugin map icon di dalam folder maps-marker.
4. buat file bernama latihan1.html di dalam directory xampp/htdocs/maps-marker.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>maribelajarcoding.com</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
<link rel="stylesheet" type="text/css" href="map-icons-master/dist/css/map-icons.css">
<script type="text/javascript" src="map-icons-master/dist/js/map-icons.js"></script>
<style>
html,
body,
#map-canvas {
margin: 0 auto 0 auto;
height: 90%;
width: 80%;
}
.map-icon-label .map-icon {
font-size: 12px;
color: #FFFFFF;
text-align: center;
white-space: nowrap;
}
</style>
</head>
<body>
<h2 align="center">Wisata Semarang</h2>
<div id="map-canvas"></div>
<div align="center">
<a href="https://www.maribelajarcoding.com" target="_blank">maribelajarcoding.com</a>
</div>
<script type="text/javascript">
function initialise() {
var mapCanvas = document.getElementById('map-canvas');
// Center maps
var center = new google.maps.LatLng(-7.0016372,110.4428114);
// Map Options
var mapOptions = {
zoom: 12,
center: center
};
// Create the Map
map = new google.maps.Map(mapCanvas, mapOptions);
var marker1 = new mapIcons.Marker({
map: map,
position: new google.maps.LatLng(-6.9839838, 110.4097825),
icon: {
path: mapIcons.shapes.MAP_PIN,
fillColor: '#ba0000',
fillOpacity: 1,
strokeColor: '',
strokeWeight: 0,
scale: 0.8
},
map_icon_label: '<span class="map-icon map-icon-museum"></span>'
});
var marker2 = new mapIcons.Marker({
map: map,
position: new google.maps.LatLng(-6.9836792,110.443832),
icon: {
path: mapIcons.shapes.MAP_PIN,
fillColor: '#1998F7',
fillOpacity: 1,
strokeColor: '',
strokeWeight: 0,
scale: 0.8
},
map_icon_label: '<span class="map-icon map-icon-mosque"></span>'
});
var marker4 = new mapIcons.Marker({
map: map,
position: new google.maps.LatLng(-6.9682652, 110.4243436),
icon: {
path: mapIcons.shapes.MAP_PIN,
fillColor: '#6331AE',
fillOpacity: 1,
strokeColor: '',
strokeWeight: 0,
scale: 0.8
},
map_icon_label: '<span class="map-icon map-icon-city-hall"></span>'
});
};
google.maps.event.addDomListener(window, 'load', initialise);
</script>
</body>
</html>
Keterangan:
Ganti YOUR_API_KEY dengan api yang telah di generate sebelumnya.
Ganti YOUR_API_KEY dengan api yang telah di generate sebelumnya.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>.map-icon-label .map-icon {
font-size: 12px;
color: #FFFFFF;
text-align: center;
white-space: nowrap;
}Baca Juga Mengganti Icon Marker Google Maps API dengan Gambar
var mapCanvas = document.getElementById('map-canvas');
// Center maps
var center = new google.maps.LatLng(-7.0016372,110.4428114);
// Map Options
var mapOptions = {
zoom: 12,
center: center
};Kode dibawah ini berfungsi untuk membuat marker dan menampilkan icon maps didalamnya.
var marker1 = new mapIcons.Marker({
map: map,
position: new google.maps.LatLng(-6.9839838, 110.4097825),
icon: {
path: mapIcons.shapes.MAP_PIN,
fillColor: '#ba0000',
fillOpacity: 1,
strokeColor: '',
strokeWeight: 0,
scale: 0.8
},
map_icon_label: '<span class="map-icon map-icon-museum"></span>'
});
Position merupakan koordinat marker yang akan di tampilkan.
path merupakan bentuk dari marker. Untuk mengubah bentuk marker bisa di ganti dengan memilih kode berikut ini.
path: mapIcons.shapes.MAP_PIN
path: mapIcons.shapes.ROUTE
path: mapIcons.shapes.SQUARE_ROUNDED
path: mapIcons.shapes.SQUARE
path: mapIcons.shapes.SQUARE_PIN
path: mapIcons.shapes.SHIELD
fillColor, memberi warna pada marker.
scale, mengubah ukuran marker.
map_icon_label, menampilkan icon menggunakan class pada tags span. Untuk mengubah icon, bisa mengganti class pada tags span. Jenis-jenis icon bisa dilihat di dokumentasi Maps Icons.
scale, mengubah ukuran marker.
map_icon_label, menampilkan icon menggunakan class pada tags span. Untuk mengubah icon, bisa mengganti class pada tags span. Jenis-jenis icon bisa dilihat di dokumentasi Maps Icons.
map_icon_label: '<span class="map-icon map-icon-museum"></span>'
5. Untuk menampilkan marker dari database cara nya mudah, buat database terlebih dahulu.
CREATE DATABASE wisata;
USE wisata;
CREATE TABLE `pariwisata` (
`id_pariwisata` int(11) NOT NULL AUTO_INCREMENT,
`nama_pariwisata` varchar(255) DEFAULT NULL,
`alamat` varchar(255) DEFAULT NULL,
`lat` varchar(255) DEFAULT NULL,
`long` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id_pariwisata`)
);
6. Insert data kedalam tabel wisata.
INSERT INTO `pariwisata` VALUES (1, 'Lawang Sewu', 'Jl. Pemuda, Sekayu, Semarang Tengah, Kota Semarang, Jawa Tengah 50132', '-6.9839838', '110.4097825', 'gedung');
INSERT INTO `pariwisata` VALUES (2, 'Masjid Agung Jawa Tengah', 'Jl. Gajah Raya, Sambirejo, Gayamsari, Kota Semarang, Jawa Tengah 50166', '-6.9836792', '110.443832', 'masjid');
INSERT INTO `pariwisata` VALUES (3, 'Kota Lama Semarang', 'Bandarharjo, North Semarang, Semarang City, Central Java 50175', '-6.9682652', '110.4243436', 'gedung');7. Buat file koneksi.php di dalam directory xampp/htdocs/maps-marker.
<?php
mysql_connect("localhost","root","");
mysql_select_db("wisata");
?>
8. Buat file data.php untuk menampilkan data dari database berupa file JSON.
<?php
header('Content-Type: application/json; charset=utf8');
//panggil koneksi.php
include("koneksi.php");
$sql="SELECT * FROM pariwisata";
$query=mysql_query($sql) or die(mysql_error());
$array=array();
while($data=mysql_fetch_assoc($query)) $array[]=$data;
echo json_encode($array);
?>
9. Buat file latihan2.php
<!DOCTYPE html>
<html>
<head>
<title>maribelajarcoding.com</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<link rel="stylesheet" type="text/css" href="map-icons-master/dist/css/map-icons.css">
<script type="text/javascript" src="map-icons-master/dist/js/map-icons.js"></script>
<style>
#map-canvas {
height: 80%;
width: 80%;
margin: 0 auto 0 auto;
}
.map-icon-label .map-icon {
font-size: 12px;
color: #FFFFFF;
text-align: center;
white-space: nowrap;
}
html, body {
height: 100%;
}
</style>
</head>
<body>
<h2 align="center">Wisata Semarang</h2>
<div id="map-canvas"></div>
<div align="center">
<a href="https://www.maribelajarcoding.com" target="_blank">maribelajarcoding.com</a>
</div>
<script>
var customLabel = {
masjid: {
label: '<span class="map-icon map-icon-mosque"></span>'
},
gedung: {
label: '<span class="map-icon map-icon-museum"></span>'
}
};
var customIcon = {
masjid: {
path: mapIcons.shapes.MAP_PIN,
fillColor: '#ba0000',
fillOpacity: 1,
strokeColor: '',
strokeWeight: 0,
scale: 0.8
},
gedung: {
path: mapIcons.shapes.MAP_PIN,
fillColor: '#1998F7',
fillOpacity: 1,
strokeColor: '',
strokeWeight: 0,
scale: 0.8
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-7.0016372,110.4428114),
zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl('http://localhost/maps-marker/data.php', function(data) {
var markers=JSON.parse(data.responseText);
markers.forEach(function(element) {
var id_pariwisata = element.id_pariwisata;
var nama_pariwisata = element.nama_pariwisata;
var alamat = element.alamat;
var point = new google.maps.LatLng(
parseFloat(element.lat),
parseFloat(element.long));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = nama_pariwisata
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = alamat
infowincontent.appendChild(text);
var type=element.tipe;
var icon_label = customLabel[type] || {};
var icon= customIcon[type] || {};
var marker = new mapIcons.Marker({
map: map,
position: point,
icon: icon,
map_icon_label: icon_label.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</body>
</html>
Jalankan file latihan1.php dan latihan2.php menggunakan browser, pastikan services apache dan mysql dalam keadaan start.
Source code:
maps-marker.rar
Related search:
Mengganti icon marker di Google Maps API
Mengubah marker di Google Maps API