In the previous tutorial about creating marker on Google Maps, we have discussed the procedure / stages of creating a marker and multipler marker at a location on google maps.
But all locations in the form of coordinates (latitude, longtitued), the data have defined in the coding, it's mean the location is static.
In this tutorial,we will create a marker at a location or more, where the location data is taken from the database.
The following is the output that we will create, as shown in Figure 1 below:
(Fig.1)
Step by Step Guide: Create Marker From Database
1. Create database
Database creation aims to store location information (latitude, longitude) as well as information once marker is clicked. In this example,the name of database is googlemaps.
CREATE TABLE IF NOT EXISTS `data_location`(`id`int(11) NOT NULL AUTO_INCREMENT,`desc`varchar(255) NOT NULL,`lat`float(10,6) NOT NULL,`lon`float(10,6) NOT NULL,
PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6;
INSERT INTO `data_location`(`id`,`desc`,`lat`,`lon`) VALUES
(1,'Ibukota Provinsi Aceh',5.550176,95.319260),(2,'Ibukota Kab.Aceh Jaya',4.727890,95.601372),(3,'Ibukota Abdya',3.818570,96.831841),(4,'Ibukota Kotamadya Langsa',4.476020,97.952446),(5,'Ibukota Kotamadya Sabang',5.909284,95.304741);
the above script to create a table named data_location as shown Figure.2:
(Fig.2)
2.Create file connect.php
This file to establish a connection with the database:
In the sensor paremeter , we set false. This is because we will determine the position of the location itself.
4. Define Google Maps Variables
// Variable to store information (taken from field desc)var infoWindow =newgoogle.maps.InfoWindow;// Variable to set map Roadmapvar mapOptions ={
mapTypeId: google.maps.MapTypeId.ROADMAP
}// Create mapvar map =newgoogle.maps.Map(document.getElementById('map-canvas'), mapOptions);// Variable to declare our bounds object.var bounds =newgoogle.maps.LatLngBounds();
In step 4, we need to prepare variables to accommodate:
Var InfoWindow, used to hold information, later we will store data from field "desc" field from database googlemaps.
Var mapOptions, is used to save the map type RoadMap. Other types of maps that can be supported: SATELLITE (photographic map), HYBRID (photographic map + road and city names), TERRAIN (map with mountains, rivers).
In this example, we will retrieve data from the database and create a marker for the cities: Banda Aceh, Sabang, Calang, Langsa and Blangpidie. Each city will display information when one of the markers is clicked.
<?php include "connect.php";?><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Multi Marker Map </title><link rel="stylesheet" href="assets/css/bootstrap.min.css"><link rel="stylesheet" href="assets/css/ilmudetil.css"><script src='assets/js/jquery-1.10.1.min.js'></script><script src="assets/js/bootstrap.min.js"></script><script src="http://maps.google.com/maps/api/js?sensor=false"></script><script>var marker;functioninitialize(){var infoWindow =newgoogle.maps.InfoWindow;var mapOptions ={
mapTypeId: google.maps.MapTypeId.ROADMAP
}var map =newgoogle.maps.Map(document.getElementById('map-canvas'), mapOptions);var bounds =newgoogle.maps.LatLngBounds();// Retrieve data from database<?php
$query =mysqli_query($con,"select * from data_location");while($data =mysqli_fetch_array($query)){
$nama = $data['desc'];
$lat = $data['lat'];
$lon = $data['lon'];
echo ("addMarker($lat, $lon, '<b>$nama</b>');\n");}?>// Proses of making marker functionaddMarker(lat, lng, info){var lokasi =newgoogle.maps.LatLng(lat, lng);
bounds.extend(lokasi);var marker =newgoogle.maps.Marker({
map: map,
position: lokasi
});
map.fitBounds(bounds);bindInfoWindow(marker, map, infoWindow, info);}// Displays information on markers that are clickedfunctionbindInfoWindow(marker, map, infoWindow, html){
google.maps.event.addListener(marker,'click',function(){
infoWindow.setContent(html);
infoWindow.open(map, marker);});}}
google.maps.event.addDomListener(window,'load', initialize);</script></head><body onload="initialize()"><nav class="navbar navbar-default navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button"class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav navbar-left"><li class="clr1 active"><a href="index.html">Home</a></li><li class="clr2"><a href="">Programming</a></li><li class="clr3"><a href="">English</a></li></ul></div></div></nav></br></br></br></br><div class="container" style="margin-top:10px"><div class="row"><div class="col-md-8"><div class="panel panel-default"><div class="panel-heading">Marker Google Maps</div><div class="panel-body"><div id="map-canvas" style="width: 700px; height: 600px;"></div></div></div></div></div></div></body></html>
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.