Advanced Programming Stories

Το παρών άρθρο είναι ένα guest post απο τον Αλέξη Μπρέσσα. Στο άρθρο προϋποθέτουμε ότι ο αναγνώστης γνωρίζει javascript, και θα βοηθούσε να έχει ασχοληθεί με το Google Maps API στο παρελθόν.

Το Google Maps API έδωσε τη δυνατότητα στους web developers να προσθέτουν χάρτες σε ιστοσελίδες, και να “σημαδεύουν” σημεία με markers.
Έτσι, έχει γίνει standard για πολλές κατηγορίες ιστοσελίδων, όπως μεσητικά, κατάλογοι επιχειρήσεων κ.α. ή για τη σελίδα επικοινωνίας εταιρειών.
Εάν όμως οι καταχωρήσεις μιας ιστοσελίδας αυξηθούν αρκετά, τότε τα πολλά markers μειώνουν τη χρηστικότητα ενός χάρτη, ενώ μπορεί κανείς να φτάσει και σε τραγική
κατάληξη όπως αυτή:

Προς μεγάλη ευκολία όποιου αντιμετωπίσει αυτό το πρόβλημα, έχει αναπτυχθεί ένα εργαλείο το οποίο φαίνεται να μην είναι ευρέως γνωστό: το MarkerClusterer.
To MarkerClusterer λύνει το πρόβλημα με το να φτιάχνει ομάδες από markers, όταν αυτά είναι το ένα πολύ κοντά στο άλλο. Το παραπάνω τραγικό παράδειγμα,
τώρα γίνεται πιο συμμαζεμένο, όμορφο, μέχρι και εντυπωσιακό:

Για να δούμε πώς μπορεί κανείς να χρησιμοποιήσει το MarkerClusterer:

function map_init( mapElement ) {
var greece = new GLatLng( 39.1130, 24.0313 );
var thessaloniki = new GLatLng( 40.5408, 23.0480 );

var gmap = new GMap2( mapElement );
gmap.setUIToDefault();
gmap.setCenter( greece, 7 );

// σε αυτό τον πίνακα θα προσθέσεις τα markers που θέλεις
var markers = [];

// εδώ προσθέτουμε markers σε 20 τυχαία σημεία κοντά στη Θεσσαλονίκη
for ( var i = 0; i < 20; ++i ) {
var latoffset = Math.random() - 0.5;
var lngoffset = Math.random() - 0.5;
var latlng = new GLatLng( thessaloniki.lat() + latoffset, thessaloniki.lng() + lngoffset );
var marker = new GMarker( latlng );

// προσθήκη του marker στον πίνακα
markers.push( marker );
}

// δημιουργία του clusterer και προσθήκη των markers στο χάρτη
var clusterer = new MarkerClusterer( gmap, markers );
}

Αρκεί λοιπόν τώρα κανείς να καλέσει τη συνάρτηση map_init με παράμετρο ένα <div> που θα χρησιμοποιηθεί
για το χάρτη. Συνήθως θα καλείται όταν φορτώσει η ιστοσελίδα. Με jquery, αν το div έχει id=”map_canvas”:

$( document ).ready( function() {
map_init( $( 'map_canvas' )[ 0 ] );
} );

Θα πρέπει επίσης να προσθέσετε το javascript αρχείο του Google Maps (με το απαραίτητο key) και του MarkerClusterer
(και βέβαια το jquery αν χρησιμοποιηθεί αυτό) στον HTML κώδικά σας:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=GOOGLE_MAPS_KEY"></script>
<script type="text/javascript" src="http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer_packed.js" />

Μπορείτε επίσης να δείτε τον MarkerClusterer εν δράσει στο business catalogue.

Ο MarkerClusterer είναι μέρος μιας βιβλιοθήκης πολλών εργαλείων για Google Maps που ονομάζεται “GMaps Utility Library” και μπορεί κανείς να τη βρει εδώ.

jQuery, javascript google, google maps, javascript

Ένα απο τα θέματα που μας ενδιαφέρουν σχετικά με το search engine optimization, είναι το κάθε πότε κάνει crawl το google το site μας. Ειδικότερα θέλουμε να δούμε – κυρίως για εγκυκλοπαιδικούς λόγους – πόσος καιρός μεσολαβεί απο ένα crawl μέχρι την παρουσία μιας σελίδας στο index.

Με αυτές τις απορίες κατά νου αποφασίσαμε να δημιουργήσουμε ένα απλό scriptάκι το οποίο απλά καταγράφει κάθε valid request του google. To script είναι πάρα πολύ απλό, ωστόσο ελπίζω να σας χρησιμέψει.

Το Google script

Καταρχήν χρειαζόμαστε ένα mysql database που θα κρατάει τα δεδομένα μας. Στην προκειμένη περίπτωση δημιουργήσαμε ένα database με όνομα “google_spy” και τρέξαμε το παρακάτω SQL για να δημιουργηθεί ο πίνακας που θα κρατάει τα δεδομένα:

CREATE TABLE IF NOT EXISTS `trace` (
  `TraceID` int(10) unsigned NOT NULL auto_increment,
  `Domain` varchar(100) NOT NULL default '',
  `Time` datetime NOT NULL default '0000-00-00 00:00:00',
  `Bot` varchar(100) NOT NULL default '',
  `Url` text NOT NULL,
  PRIMARY KEY  (`TraceID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Παρακάτω είναι το php script που κάνει την δουλειά:

<?
php
define ('GOOGLE_AGENT','Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)');

//A few settings for the script:

$db_host = 'localhost';

$db_user = 'user';

$db_pass = 'password';

function googlebot($ip)  {

  $bot = 'googlebot.com';

  $name = gethostbyaddr($ip);

  if ($name == $ip) return false;

  return (strpos($name, $bot) !== false and gethostbyname($name) == $ip) ? true : false;

}

if ($_SERVER['HTTP_USER_AGENT']==GOOGLE_AGENT &amp;amp;amp;&amp;amp;amp; googlebot($_SERVER['REMOTE_ADDR'])) 

{

	$url='http://'.$_SERVER['HTTP_HOST'];

	if ($_SERVER['REQUEST_URI']) $url.=$_SERVER['REQUEST_URI'];

	$url_u8=iconv('Windows-1253','UTF-8',$url);

	if (crc32($url)==crc32(iconv('UTF-8','Windows-1253',$url_u8))) $url=$url_u8;

	$url=urldecode($url);

	$sql ="INSERT LOW_PRIORITY INTO `google_spy`.`trace` SET `Domain`='".$_SERVER['HTTP_HOST']."',`Time`='".date('Y-m-d H:i:s')."',";

	$sql.="`Bot`='".gethostbyaddr($_SERVER['REMOTE_ADDR'])."',`Port`='".$_SERVER['REMOTE_PORT']."',`Url`='$url'";

	$con=mysql_connect($db_host,$db_user,$db_pass);

	mysql_query("SET NAMES 'utf8'",$con);

	mysql_query($sql,$con);

	mysql_close($con);

}

?>

Για να το χρησιμοποιείσετε απλώς αλλάξτε τα settings στην αρχή ($db_host, $db_user, $db_pass) και κάντε include το script σε οποιοδήποτε site θέλετε να κρατάτε logs. Σημειώστε οτι το script κρατάει μία εγγραφή ανα visit (που προέρχεται απο το google) οπότε καλό θα είναι να σβήνετε τα δεδομένα ανα τακτά χρονικά διαστήματα.

Αν κάνετε κάποια μετατροπή ή δημιουργήσετε ένα όμορφο interface για το scriptάκι μήν διστάσετε να το μοιραστείτε μαζί μας

nuSOAP, php, seo google, search engine optimization, seo