Google Map with custom draggable pointer

Hi,

I have been planning to upload this from a long time, but made it finally now. This possibly is one of my favorite codes to make life easy for programmers. In this, by using a single function you can perform various tasks in a google map. Tasks such as multiple pointers in one map, change the look and feel of pointers, drag and drop pointers and fetch their new coordinates etc.

I have compiled all this functionality in one function in a .php file, "gmap.php". With very slight alterations you can achieve any of the above functionality.

Before going to the details of how to use the function, here is how my web page looks like:

In my application, what I have done is, I have compiled all the various possibilities of my code in 1 web page for better understanding. Now before I start explaining it download the source code from here.

Code & Explanation:

First of you need to include the "gmap.php" file in your PHP page as:

<?php @include("gmap.php"); ?>

Now I am assuming you already have the latitude and longitude of the various points. If you just have the address without the latitude and longitude, check out my article of location to latitude/longitude conversion. The function that I am talking about takes just three parameters:

Save image in database(MySQL & Blob datatype)

Hi,

This is rather interesting topic, but is among the simpler one's. In this I will show how to save an image in its actual format in the database as data and fetching it as an image to the web page. First of all create a database table and assign "blob" data type to the fields that will hold the image. Here is the schema for the database table that I am using:

CREATE TABLE `employees` (
`id` INT(10) NOT NULL AUTO_INCREMENT,
`empname` VARCHAR(50) NULL DEFAULT NULL COLLATE 'latin1_general_ci',
`profile_pic` LONGBLOB NULL,
`ext` VARCHAR(5) NULL DEFAULT NULL COLLATE 'latin1_general_ci',
PRIMARY KEY (`id`)
)

[You can find the entire source code here]

Now that my table is ready lets move on to the HTML. It is a pretty simple one just a form with couple of fields as follows:

<form method="post" action="" enctype="multipart/form-data">
Enter Name:<br/><input type="text" name="emp_name" /><br/><br/>
Profile Pic:
<input type="file" name="pic" /><br/><br/>
<input type="submit" value="Save Image" />
</form>

The page looks something like:

After saving the data, this is what I get:

Code and Explanation:

When the form is submitted here is what I have done:


$content=file_get_contents($_FILES['pic']['tmp_name']);
$content=mysql_escape_string($content);

@list(, , $imtype, ) = getimagesize($_FILES['pic']['tmp_name']);

if ($imtype == 3){
$ext="png";
}elseif ($imtype == 2){
$ext="jpeg";
}elseif ($imtype == 1){
$ext="gif";
}

Google Rich Snippet

Hi,

In this I will be discussing about rich snippets, what they are and how can they be useful in SEO. One of my colleague was working on the same, and decided to share with me so I am posting it in. Rich snippets are simply few predefined attributes in HTML tags, which are treated in a special way by Google. Have a look at the following. This will make it simpler to understand what they are:

The above is screen shot from Google search results when I search by "yelp" keyword. In the above we see a star rating and total reviews received for that App. These information are not present in Google search results by default. To make this happen we need to use rich snippets. Rich snippets can be used to representing the following:

1. Reviews (as given above)
2. People
3. Product
4. Business
5. Recipe
6. Events

The rich snippets can be implemented in 3 ways:

1. Microdata
2. Microformat
3. RDF

Use(Code) & Explanation:

Simple javascript tooltip or help text

Hi,

In this post I will discuss of a custom made tooltip which you can implement in your HTML, without breaking a sweat. As usual, in this also, I am using jQuery as my Javascript framework. I have used the basic concept of generating lightbox to generate the tooltips. So lets see how it looks in the front end:

Before we go into the explanation you can download the source code from here.

Code and Explanation:

First let us see the basic HTML structure as:

<div style="float:left;margin-right:5px">This is text 1 </div><div class="tooltip">This is tooltip 1...</div><br/>

<div style="float:left;margin-right:5px">This is text 2 </div><div class="tooltip">This is tooltip 2...</div><br/>

<div style="float:left;margin-right:5px">This is text 3 </div><div class="tooltip">This is tooltip 3...</div><br/>

<div style="float:left;margin-right:5px">This is text 4 </div><div class="tooltip">This is tooltip 4...</div><br/>