Cara Menampilkan marker ke Peta Google dengan PHP dan MySQL

Cara Menampilkan marker ke Peta Google dengan PHP dan MySQL

Cara Menampilkan marker ke Peta Google dengan PHP dan MySQL

Cara Menampilkan marker ke Peta Google dengan PHP dan MySQL, Untuk menyimpan informasi lokasi dinamis dan gambar penanda, diperlukan tabel dalam database. SQL berikut membuat tabel lokasi dengan beberapa bidang dasar dalam database MySQL.

Buat tabel locations

CREATE TABLE `locations` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`latitude` varchar(20) COLLATE utf8_unicode_ci NOT NULL,

`longitude` varchar(20) COLLATE utf8_unicode_ci NOT NULL,

`name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,

`info` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

`icon` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT 'Marker icon',

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Konfigurasi Database (dbConfig.php)

<?php

/* Database configuration */

$dbHost = "localhost";

$dbUsername = "root";

$dbPassword = "";

$dbName = "gmaps";




/* Create database connection */

$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);




/* Check connection */

if ($db->connect_error) {

die("Connection failed: " . $db->connect_error);

}

 

 

File dbConfig.php digunakan untuk menghubungkan dan memilih database. Tentukan host database ($ dbHost) , nama pengguna ($ dbUsername) , kata sandi ($ dbPassword) , dan nama ($ dbName) sesuai dengan kredensial database MySQL Anda.

<html>

<head>

<title>Gmaps Dengan PHP Mysql</title>

</head>

<body>

<a href=”<?php echo $instURL; ?>”>Gmaps Dengan PHP Mysql</a>

</body>

</html>

Ambil Lokasi dan Info Gambar Penanda dari Database

Lintang dan bujur diambil dari database menggunakan PHP dan MySQL.

  • Kumpulan hasil pertama digunakan untuk menghasilkan banyak penanda dan informasi ikon ubahsuaian (lokasi, lintang, bujur, dan sumber gambar ikon).
  • Kumpulan hasil kedua digunakan untuk menghasilkan konten jendela info.

Tampilkan Marker dari mysql dengan php

<?php

/* Include the database configuration file */

require_once 'dbConfig.php';




/* Fetch the marker info from the database */

$result = $db->query("SELECT * FROM locations");




/* Fetch the info-window data from the database */

$result2 = $db->query("SELECT * FROM locations");

?>

Muat fungsi initMap () untuk menginisialisasi Google Map.

<script src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY"></script>

Tambahkan Beberapa Penanda dengan Gambar Kustom

Muat API JavaScript Google Map dan tentukan kunci API di parameter kunci.

<script>

function initMap() {

var map;

var bounds = new google.maps.LatLngBounds();

var mapOptions = {

mapTypeId: 'roadmap'

};




/* Display a map on the web page */

map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);

map.setTilt(100);




/* Multiple markers location, latitude, and longitude */

var markers = [

<?php if($result->num_rows > 0){

while($row = $result->fetch_assoc()){

echo '["'.$row['name'].'", '.$row['latitude'].', '.$row['longitude'].', "'.$row['icon'].'"],';

}

}

?>

];




/* Info window content */

var infoWindowContent = [

<?php if($result2->num_rows > 0){

while($row = $result2->fetch_assoc()){ ?>

['<div class="info_content">' +

'<h3><?php echo $row['name']; ?></h3>' +

'<p><?php echo $row['info']; ?></p>' + '</div>'],

<?php }

}

?>

];




/* Add multiple markers to map */

var infoWindow = new google.maps.InfoWindow(), marker, i;




/* Place each marker on the map */

for( i = 0; i < markers.length; i++ ) {

var position = new google.maps.LatLng(markers[i][1], markers[i][2]);

bounds.extend(position);

marker = new google.maps.Marker({

position: position,

map: map,

icon: markers[i][3],

title: markers[i][0]

});




/* Add info window to marker */

google.maps.event.addListener(marker, 'click', (function(marker, i) {

return function() {

infoWindow.setContent(infoWindowContent[i][0]);

infoWindow.open(map, marker);

}

})(marker, i));

/* Center the map to fit all markers on the screen */

map.fitBounds(bounds);

}

/* Set zoom level */

var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {

this.setZoom(14);

google.maps.event.removeListener(boundsListener);

});

}

/* Load initialize function */

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

</script>

 

Baca Juga  Cara memasukkan data massal dengan PHP dan MySQL

Sematkan Google Map dengan Ikon Penanda Kustom

Tentukan elemen HTML untuk menyematkan Google Map dengan banyak penanda dan Info Windows di halaman web. Tentukan ID elemen (mapCanvas) di objek Google Map.

<div id="mapCanvas"></div>

 

Kode CSS

Gunakan CSS untuk mengatur tinggi dan berat wadah peta Google.

Sematkan Google Map dengan Ikon Penanda Kustom

Tentukan elemen HTML untuk menyematkan Google Map dengan banyak penanda dan Info Windows di halaman web. Tentukan ID elemen (mapCanvas) di objek Google Map.

#mapCanvas {

width: 100%;

height: 650px;

}

 

 

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Need Help? Chat with us