Monday, November 6, 2017

Android Displaying Multiple Markers From Database

This article will share you how to displaying multiple markers from database. Like the title data latitude and longitude will get from server (Server created with PHP and MySQL).

What is marker means?

Marker on Maps is a mark of a place on Google Maps. The main requirement in order to able to show the marker on Google maps are data latitude and longitude.

For example :

The coordinates of Badung Regency are -8.58193 (Latitude) and 115.177059 (Longitude). You also can check coordinates of your location on this web : Distancesto.

Ok, that's a short description about markers and its requirements, now i will share about creating the project.

To achieve the goal of this project, i create 2 projects, that are : 1 PHP project (for creating server) and 1 Android project (for client).

Creating Server

In this article i will create a simple server just for learning and not recommend to implementing in production project.

First you have to create your database structure and second create the php to connecting your project to your database.


I only use one table. And inside the table i have inserted the data of latitude and longitude. Take a look at the following image

Data LatLng

PHP Project

There are two files in php project. First class for connect to database and the second class for displaying data location in JSON.


Please adjust your username, password and your database name.


The above class will displaying data in json. Here is the output of the above class :

See also : Create file Json Object and Array Using PHP

Android Project

I will create the project by using the default template of Android Studio. Fyi, i use Android Studio Versi 2.2.2, not the latest version.

First, click start a new android project

Create New Project
Second, name your project by filling field Application name and Company domain.

Name the project

Third, select your platform, in this case just check the phone and tablet.

Select the platform

Fourth, select the template that you want to use. Related with this project, just select Google Maps Activity.


Fifth, give name your activity, layout and title by filling the field Activity name, Layout name, Title.

Attribute name

After that, click button finish.

Library Gradle

I have added some libraries. Modify your gradle to be the same as bellow :

Generate API_KEY

In order to able to display Google Maps in your project, you have to generate the API_KEY in Google Developer Console. You can user the existing project, or create new project.

First, generate API_KEY by clicking button GET A KEY

image via

Second, you can use the existing project or create new project.

image via

Third, copy your API_KEY and place in meta-data androidManifest.

image via

Confuse? Take a look at the following meta-data in AndroidManifest file :


Please adjust your AndroidManifest to be same as below :

Okay, until here, you have done preparing your requirement for creating Google Maps in your application. Next we will create several java classes.

Create two classes as model to handle the data from json

This class used to handle one object data from json. The code look like the follows :

Because json that we will receive is an array, means more than one object, then one object in class LocationModel will created as list with class ListLocationModel.

If you confuse with json format array and json format object, please continue read here : Create file json format array and json format object using PHP MySQL.

Class Client and Interface

The following are two classes that define the main URL (client) and its part (endpoint).

if you clearly see the URL, it contains digits, right? These digits is the IP of my computer that connected with my local internet (Tethering from my phone).

Class Logging Interceptors

Class MainActivity

This class is the main class that used to displaying all data makers on Google Maps. The full code is show as bellow :

Okay, that's all. Running your project and hope works well.

Download project by clicking the following image

Related Posts

6 komentar