Archive for the ‘HTML’ Category

Google Maps API part 2: Retrieving Postcodes from your database

googlemaps part2

OK, this is a simple way to get your postcode/ address location returned and displayed via the Google Maps API on your own website. I’ll cover the ‘nearest store locator’ scenario in another post where you want places with a certain radius of an inputted postcode/ town returned.

First of all we need to retrieve our results which should already be stored with a geocoded result using the previous tutorial here. remember that in order for this to work you need an API key from google – again check the previous tutorial for more info on this.

We’re going to need to pass the geocoded values retrieved from the database into javascript and there are a few ways of doing this. This is really the hardest part and the only work you really need to do to display your result on a map as the Google maps API does the rest of the work for you. So we can either do this via something like an AJAX request whereby you build your returned data into an XML file and then use javascript to read that. Or you can write your php inline inside the javascript, which is messy for multiple results but in the singular it should be fine.

First lets start with the chunk of javascript on the page that will display our map etc… This method just calls up a map from the API and then zooms, centers and adds a marker to a specified co-ordinate. This singular display is useful if you want to, for instance, display the location of a result in a popup/ overlay.

// your API key here.



To see the map just add in a HTML element and set an onload event assigned to your body tag as thus

So now we just need to pass in our result from the database. Starting with passing it inline to javascript variable we can do the following, first connect and get your results from your database, very basically as below.

 LIMIT 1");

// assign the results to variables something like:
while ($row = @mysql_fetch_assoc($result)){
$lat = $row['lat'];
$lng = $row['lng'];
}
?>

Ok, so in javascript we can then put in our php values:


// declare variable to store co-ordinates - fetch these from your database

// var coords = new GLatLng(51, -1);
// or you can do this:
// var coords = new GLatLng(, );

So all together the php page will look something like this:

 LIMIT 1");

// assign the results to variables something like:
while ($row = @mysql_fetch_assoc($result)){
$lat = $row['lat'];
$lng = $row['lng'];
}
?>



For retrieving the results via an XML file instead I’ll cover that in part 3 as its much more applicable there.

Quick popup/overlay show and hide a layer with Javascript and CSS

css popup

Really quick and simple code in order to show or hide a layer on your webpage using Javascript.

Effectively what we do is define a layer in CSS and then write a couple of functions, one to set the visibility and position of the layer and the other to find the position on the page that it should appear. You can then add whatever you want inside the layer ready to be shown or hidden when a user clicks a link, or anyother way to activate the function.

Typically when we create a layer in CSS/ HTML it will appear inline in the page much like any other HTML element. We can position layers to be positioned either static, fixed, relative or absolute. This bit is important to know for our popup layer/ overlay and how to position it.

Static is where the layer appears in the page as it normally would where ever it’s placed in the code, much like an image in a page.

Fixed will allow a layer to stay in the same place in the browser window despite scrolling.

Relative is normally done with co-ordinates set from the layer’s original position on the page.

Absolute will mean the layer is positioned in relation to the parent element that it appears in or another given element in our case.

So first we declare our CSS.
We create a layer id using # and assign width, height, position, display and index parameters

	

Next we write our Javascript functions
We write a function to hide the layer, a function to show the layer and position it and a function to find the position of a given object to work out where to display the layer.

	

Finally we create our HTML
Here we create our layer and a couple of links, one to close the layer and one to open the layer, the function to open the layer needs the id of the layer to open and the object from which to position itself, in this case we use the link (this).

		
		
		Open

And here’s the final code:


	
	LUCKYLARRY.CO.UK - basic overlay, show/ hide a layer popup
	

	

	
	
		
		
		Open