Google Maps overlays with mouseOver hover events

So, I've now created a map, with overlays. Now the need to create mouse over events so that people can interact with them.

Here's some places I've found information:
How to make a map with overlays
How to create an event on mouseOver -> with reference to this post
A similar post, but different solution
Not sure if relevent, but a mouseover tooltip for markers


Some docuemtnation on overlay types and Map Type registry

adding javascript to a template

Whilst making templates in Joomla I am always wanting to add a little javascript here and there but always hitting a brick wall. What usually seems to happen is that the script, or another on the page doesn't seem to run.

Looking into it it looks like it is to do with how it is loaded. It looks like you cannot have mutliple scripts using the on page load command. It only runs once and probably on the first occurance, maybe the last?

Looking at Joomla specifically, I found the official article on how to add inline and external javascripts. I'm going to try this out before investingating anything else.

Adding Google street view to Joomla Estate Agencie JEA

So, even though I have only edited the code in minor ways, it actually took me a long time to do it, but here is the final result! Posted here on JEA forums

Hi, I've had a go at this myself, and finally came up with a solution.

The first thing I did was to go into my template and create an override for JEA Property.

I then edited the "default_googlemap.php" file. From line 44 to the bottom, replace the script with this script:

$script = <<

 

function initMap(mapOptions, panoOptions, MarkerLatlng) {

    map = new google.maps.Map(document.id('jea_property_map'), mapOptions);

    var marker = new google.maps.Marker({

        position: MarkerLatlng, 

        map: map, 

        title: '{$this->row->ref}'

    });

    var panorama = new google.maps.StreetViewPanorama(document.getElementById('jea_property_map_pano'), panoOptions);

  map.setStreetView(panorama);

}

 

window.addEvent("domready", function(){

    var longitude  = {$longitude};

    var latitude   = {$latitude};

 

    if (longitude && latitude) {

        var myLatlng = new google.maps.LatLng(latitude, longitude);

        var options = {

          zoom : 15,

          center : myLatlng,

          mapTypeId : google.maps.MapTypeId.ROADMAP

        };

        var panoramaOptions = {

    position: myLatlng,

  };

        initMap(options, panoramaOptions, myLatlng);

 

    } else {

        var geocoder = new google.maps.Geocoder();

        var opts = {'address':'$address', 'language':'$lang', 'region':'$region'};

        geocoder.geocode(opts, function(results, status) {

            if (status == google.maps.GeocoderStatus.OK) {

                var myLatlng = results[0].geometry.location;

                var options = {

                  center : myLatlng,

                  mapTypeId : google.maps.MapTypeId.ROADMAP

                };

                var panoramaOptions = {

    position: myLatlng,

  };

                initMap(options, panoramaOptions, myLatlng);

                map.fitBounds(results[0].geometry.viewport);

             }

        });

    }

});

 

EOD;

 

$this->document->addScriptDeclaration($script);

?>

 

I've only modified the original code to add panoramaOptions variable, and pass it to the initMap function. I then added the panorama variable.

 

At the bottom I also added a div tag called "jea_property_map_pano", but you have to give it a height property otherwise you won't be able to see it. The street view loads up in this div tag.

Creating a Back Button in Joomla

So, I wanted to create a back button, as one of my articles did not provide an adequate link to the previous item. I found this article which describes a simple a tag which calls javascript. Heres the example:

Go back

for none javascript browsers he proposes this:

Go back

I then created a module called "Back Button" with this link, and made it appear only on the pages I wanted. It nearly worked but unfortunately I couldn't get the WYSYWIG editor to let me put the javascript entry in, it always wiped it out!!

Ended up going into the database and pasting it in myself! If someone could please let me know for next time how I get TINYMCE to let me put this code in to a customHTML module in Joomla!!

after comingback to this some time later, i accidentally saved it and it deleted the code! But now, if I want code I install flexi custom code, which lets you add javascript, php etc. to modules!

Finding Prime Numbers

Thought I'd test out some programming I'd learnt so I'm now writing a program to find large prime numbers. Here's the basic program which I'll improve over time:


main()
function main () {
    print ("hello");
    printPrimeNumbers (1, 100);
    return 0;
    }

function printPrimeNumbers (startNumber, maxNumber) {
    var counter = startNumber;
    while (counter < maxNumber){
        if (isPrime(counter)) {
            print (counter);
            }
        counter++;
        }
    return 0;
    }

function isPrime (number) {
    var prime = true;
    if (number > 3){
        if (number !== 0){
            var i = (number-1)/2;
            while (i>1) {
                if (number % i == 0) {
                    prime = false;
                    return prime;
                    }
                    i--;
            }
        }
         else {
                prime = false;
                }
    }
    return prime;
    }

Basically, isPrime (number) is the function which is doing all the work at the moment. If the number is greater then 3 and not divisible by 2 then: see if it can be divided by any number smaller then itself. This number starts from itself divided by two to reduce the number.

Found this little site which gives nice little examples of small C programs

So far this works. It is in fact already optimised slightly with the:
 if (number !== 0)
and
var i = (number-1)/2;

I havent actually read up on any optimisations anyone else has done. I think I'll carry on and when I get stuck I'll do some research.

My next main idea is to record all prime numbers starting from one up to the maxNumber. Then, to find out if the next one is a prime, just divide by all other primes before it. Should then not have to do as much work, perhaps by 3/4? The two down sides are that:

1. I'd have to store these numbers somewhere
2. I'd have to have all the primes up to the number you want to know whether is a prime or not.

Heres the script I came up with in C:

#include

#define true 1

#define false 0

#define STARTNUM 1

#define ENDNUM 100000000

int printPrimes (int startNumber, int maxNumber);

int isPrime (int number, int primesArray[], int numberOfPrimes);

int main (int argc, const char * argv[]) {

    printf ("hello \n");

printPrimes (STARTNUM, ENDNUM);

    return 0;

}

int printPrimes (int startNumber, int maxNumber) {

    int counter = startNumber;

int numberOfPrimes = 0;

int primesArray [100000];

    while (counter < maxNumber){

        if (isPrime(counter, primesArray, numberOfPrimes)) {

            printf ("%d\n" , counter);

primesArray[numberOfPrimes] = counter;

numberOfPrimes++;

}

        counter++;

}

/*printf("Printing the Array of Primes\n");

for (int c = 0; c < numberOfPrimes; c++) {

printf("%d\n", primesArray[c]);

}*/

    return 0;

}

int isPrime (int number, int primesArray[], int numberOfPrimes) {

    int prime = true;

    if (number <= 3){

            for (int i=1; i

if (number % primesArray[i] == 0) {

                    prime = false;

                    return prime;

}

}

    }

    return prime;

}

Works pretty well.

A future idea is to find the frequency of primes and find a relationship. Perhaps taking it one step further and finding the frequency of frequencies. I'm not sure how to represent frequencies though?

JQuery sliders to control image sizes on a webpage

I'm currently making a web gallery and want users to be able to resize the gallery to their needs. I did a quick search on Google and found this:

http://webdesignledger.com/tutorials/create-a-resizable-image-grid-with-jquery which has this as a demo:

• http://demos.webdesignledger.com/jquery_image_grid/example2.htm

Looks quite good, although I noticed it also increases the gaps between the images which I would prefer to control. But might be worth tweaking!

I've had another look and also found this which looks remarkably similar:

http://agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-javascript/

It gives a nice little tutorial on what you have to do.