Selamat datang kembali di blog Mari belajar coding. Jika tutorial sebelumnya kita pernah belajar mengganti icon marker Google Maps API menggunakan plugin Maps Icon, kali ini kita akan belajar mengganti icon marker dengan gambar yang telah kita siapkan terlebih dahulu. Penggunaan plugin maps icon sebenarnya lebih efisien karena tidak perlu menyiapkan gambar untuk mengganti icon marker, tetapi penggunaan gambar juga lebih bisa di sesuaikan sesuai kebutuhan. Kita juga bisa mendesain sendiri gambar atau icon apa yang akan di gunakan sebagai marker maps.
Untuk mengganti icon marker dengan gambar sebenarnya hanya menambah variabel icon. Lihat baris yang diberi highlight. Teman-teman bisa mengganti url atau alamat icon.
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: myLatlng,
icon: 'https://img.icons8.com/officel/40/000000/marker.png'
});
Contoh lengkapnya seperti di bawah ini, ganti api key dengan api key teman-teman.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var mapCanvas = document.getElementById('map');
// Center maps
var myLatlng = new google.maps.LatLng(-6.9902658,110.4229144);
// Map Options
var mapOptions = {
zoom: 12,
center: myLatlng
};
// Create the Map
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: myLatlng,
icon: 'https://img.icons8.com/officel/40/000000/marker.png'
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
Untuk menampilkan marker dari database, kita perlu menyiapkan database nya terlebih dahulu. Buat database db_maps, selanjutnya buat tabel Tempat untuk menyimpan data tempat dan koordinat lokasi. Buat satu tabel lagi untuk menyimpan data Tipe tempat. Tipe tempat ini yang akan menentukan icon apa yang akan ditampilkan sebagai marker.
CREATE DATABASE `db_maps`;
USE `db_maps`;
CREATE TABLE `tempat` (
`Id_Tempat` int(11) PRIMARY KEY NOT NULL,
`Nama_Tempat` varchar(255),
`Alamat` varchar(255),
`Id_Tipe` int(11),
`Lat` varchar(50),
`Lng` varchar(50)
);
CREATE TABLE `tipe` (
`Id_Tipe` int(11) PRIMARY KEY NOT NULL,
`Tipe` varchar(50),
`Image_Path` varchar(255)
);
Insert data kedalam tabel tempat dan tipe.
INSERT INTO `tempat` (`Id_Tempat`, `Nama_Tempat`, `Alamat`, `Id_Tipe`, `Lat`, `Lng`) VALUES
(1, 'Paragon City Mall Semarang', 'Jl. Pemuda No.118, Sekayu, Kec. Semarang Tengah, Kota Semarang, Jawa Tengah 50132', 1, '-6.9788825', '110.4136937'),
(2, 'Achmad Yani International Airport', 'Tambakharjo, Kec. Semarang Bar., Kota Semarang, Jawa Tengah 50149', 2, '-6.9663401', '110.3728004'),
(3, 'Lawang Sewu', 'Jl. Pemuda, Sekayu, Kec. Semarang Tengah, Kota Semarang, Jawa Tengah 50132', 3, '-6.9839838', '110.4097825');
INSERT INTO `tipe` (`Id_Tipe`, `Tipe`, `Image_Path`) VALUES
(1, 'Shop', 'icon/shopping-pin.png'),
(2, 'Airport', 'icon/airport-pin.png'),
(3, 'Building', 'icon/building-pin.png');
Setelah database dibuat dan insert data kedalam tabel. Selanjutnya kita akan membuat sebuah JSON data tempat dengan PHP. data-maps.php
<?php
header('Content-Type: application/json; charset=utf8');
$con = mysqli_connect("localhost","root","","db_maps");
//query untuk menampilkan data maps dan icon image
$sql="SELECT
tempat.Id_Tempat,
tempat.Nama_Tempat,
tempat.Alamat,
tempat.Lat,
tempat.Lng,
tipe.Tipe,
tipe.Image_Path
FROM
tempat
LEFT JOIN tipe ON tempat.Id_Tipe=tipe.Id_Tipe";
$query=mysqli_query($con, $sql);
$array=array();
while($data=mysqli_fetch_assoc($query)) $array[]=$data;
echo json_encode($array);
?>
Buat file latihan.php untuk menampikan maps beserta markernya.
<!DOCTYPE html>
<html>
<head>
<title>maribelajarcoding.com</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<div align="center">
<a href="https://www.maribelajarcoding.com" target="_blank">maribelajarcoding.com</a>
</div>
<script>
function initMap() {
var mapCanvas = document.getElementById('map');
// Center maps
var myLatlng = new google.maps.LatLng(-6.9902658,110.4229144);
// Map Options
var mapOptions = {
zoom: 12,
center: myLatlng
};
// Create the Map
map = new google.maps.Map(mapCanvas, mapOptions);
var infoWindow = new google.maps.InfoWindow;
//request data from data-maps.php
$.getJSON( "data-maps.php", function( data ) {
//parsing data json
$.each( data, function( i, item ) {
//set point marker
var point = new google.maps.LatLng(
parseFloat(item.Lat),
parseFloat(item.Lng));
//create pop up info header
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = item.Nama_Tempat;
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
//create pop up info content
var text = document.createElement('text');
text.textContent = item.Alamat
infowincontent.appendChild(text);
//marker option
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: point,
icon: item.Image_Path
});
//popup info
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
</script>
</body>
</html>
Ganti your api key dengan api google maps teman-teman, pastikan terkoneksi dengan internet untuk request data Google Maps.
Source Code:
MapsIconImage.zip
Source Code: