Question

I currently have a web app that uses the google maps API, PHP, and MySQL to populate custom map bubbles and markers on a map.

Currently, the app is hosted by us and managed by us and is included as an iframe on a clients page, however this is quite tiresome..

I would like to develop an API/library that can be included on the page and then inject code into a div container (much like Google maps does). However, i have no idea what to search for or what to read up on to learn.

I have a basic rest api that is configured to provide read-only functionality in json/jsonp format to an authorized client. I am using Phil Sturgeon’s REST-SERVER library for CI.

Here is a link to the current format, we pull this page in an iframe with no-scrollbars.
http://fhaz.mapitusa.com

Update: I found a partial solution.. web widgets: http://alexmarandon.com/articles/web_widget_jquery/

i need to develop a web widget.

I need to know:

1. what to learn
2. what types of programming methodologies to know
3. What to look for examples
4. What are some options to get away from the iframe and using a sort of “hard embed”.

Answer 1

You didn’t say it out loud, but because you specifically mention you now have a read-only api i figure you also want to send commands to the (your) server. I would start with looking into authentication methods. And for this, I would go for OAuth. You’ll have to write a basic client class which can connect and authenticate the client to the server. This can be pretty simple and small. Php even has a pecl extension available (see http://nl.php.net/manual/en/book.oauth.php) which is pretty easy to use. If you do not have the possibility of installing pecl extensions curl will also do the trick, and even that isn’t really necessary. Twitter also has a nice explanation of how OAuth works, with links to external resources. Check it out! https://dev.twitter.com/docs/auth/oauth

Note that at the server level you’ll have to implement your own role system, oauth only lets your client connect to the server in a secure manner. Ie. it will let your “users” log in to your application, but will not check if the logged in user is, example given, an admin user with all rights, a read-only user or something in the middle.

If you have OAuth straightened out just write a list of API calls you want to implement. You should namespace them, for example like:

/map/marker/get
/map/marker/set
/map/bubble/get
...

Your client API should be able to make a call like this:

$api = new MyGreatApi();
$params = array('id' => 3, 'color' => 'red', ...);
$response = $api->call('/map/marker/get', $params);
echo $response;

Check out some oauth library implementations like the one Twitter promotes (https://dev.twitter.com/docs/twitter-libraries#php), or in example the really simple one bits on the run uses (http://developer.longtailvideo.com/botr/downloads/php-api-kit.zip)

At server level you catch the api call and route the request to the specific controller (to use some MVC terms). If, eg, you fetch the call ‘/map/marker/get’ you can just explode('/', $call); and search for the right class/function/method/whatever and let it do the magic for you, then send back the output (which can be as simple as to echo $output) and you are up and running! Note that if you have the authentication and role-checking right, the functions which produce the output can be treated as normal, oldschool, php functions. There’s nothing special at them! It’s the authentication and routing of api calls which should be your main concern.

I hope this clarifies some of your questions and give you a direction. If I misunderstood your question, please correct me!