In a recent tutorial I showed you [how to integrate Google Maps into an Ionic application][1], if you haven’t already read that tutorial I would recommend doing so now because we will be building on top of that in this tutorial.

We’ve already created a simple Google Maps display with a single marker and info window which is created wherever the users current position is. That in itself maybe useful in some cases: some applications may just be trying to show the location of a single event or business on a map for example.

A lot of applications that use Google Maps will be dynamic though, we might be mapping user submitted locations for example, and if we don’t know where all the markers go when we create our application then the app we created in the last tutorial will not be suitable. Another issue is that if we have lots of markers, it’s bad for performance to try and load them all at once (and the user doesn’t need markers loaded in for London if they’re only looking in Adelaide).

We’ll be exploring how to deal with these two issues over a two part tutorial series. This tutorial will focus on loading in Google Maps markers dynamically using the $http service in Ionic, and in Part 2 we will create a way to only load markers for the area the user is currently looking at.

This tutorial will assume you have a database and server set up somewhere already that you can pull the markers from.

Fetching Google Maps Markers from a Database

In this scenario we are going to try loading some markers from a server, this means that you will need a server set up which can respond with the markers you wish to load. I’ll be showing you how to do this specifically with PHP, but you could use anything you like as long as you can output some JSON data representing the markers you want to load.

Create a file called markers.php and save it somewhere accessible via http

Again, feel free to use something other than PHP if you like. You could either set this up on an actual server on the Internet, or simply through a local webserver like [XAMPP][2]. However you choose to host it, it should be accessible by going to a URL like http://example.com/markers.php or http://localhost/markers.php .

Now we’re going to query a database to return the set of markers we wish to add to the map, and then output that result set to the browser.

Modify your markers.php file to reflect the following