MooGooMaps = MooTools + GoogleMaps javascript API

[Ciul]

Hi pals.

This time I introduce you another script I've made to easy the use of
GoogleMaps javascript API.

It also has some mini applications (widgets) that run over the map
that I've added.

It is posted at forums:
http://www.mooforum.net/script-showcase-f25/google-maps-api-mootools-class-t3676.html

Read earliers posts to see how it has evolved and see what classes and
methods it contains but check at the last posts to download it's last
versions.

It has the most used (by me at least) classes and methods when talking
about creating maps, maps markers, information, and funny things.

Enjoy it! :D

Best regards,
Ciul

[Slik]

As I see, you are implementing Events into your GoogleMapCreator.
So, would be better to use this.fireEvent instead this.click|dblClick|drag|etc()

[Arian Stolwijk]

Have you added it to the forge already? Makes it easier for other people to find ;)

If you need any help with adding your plugin you can always ask here or on IRC!

[Kelvin]

Again, awesome script!

I've almost did the same thing, but without the event handling. I
wanted to integrate Google Maps Directions into one of my company's
website. My class looks like this:
http://pastebin.com/gijCfDZz

and the HTML example:
http://pastebin.com/KyZ0Z5WF

Maybe you can combine some stuff :) I just don't have the time to make
things Forge-worthy, but i wanted to share this seeing your class has
so much in common.

On 28 dec, 15:38, Arian Stolwijk <ar...@aryweb.nl> wrote:
> Have you added it to the forge already? Makes it easier for other people to
> find ;)
> If you need any help with adding your plugin you can always ask here or on
> IRC!
>

> On Tue, Dec 28, 2010 at 3:32 PM, Ciul <luiscarlosj...@gmail.com> wrote:
> > Hi pals.
>
> > This time I introduce you another script I've made to easy the use of
> > GoogleMaps javascript API.
>
> > It also has some mini applications (widgets) that run over the map
> > that I've added.
>
> > It is posted at forums:
>

> >http://www.mooforum.net/script-showcase-f25/google-maps-api-mootools-...

[Kelvin]

Oh and the domready:

var GMapDirections = new Bekent.Google.Maps.Directions({
'lat': 52.957464,
'lng': 5.9377274,
'marker': true,
'onComplete': function(){
//i used scroll to scroll to the directions panel
}
});

//used formvalidator, im too lazy ;-) but it shows how to call the
navigate method
new Form.Validator.Inline($('directions-form'),{
evaluateFieldsOnBlur: false,
onFormValidate: function(result, form, event){
event.stop();
GMapDirections.navigate($('routestreet-input').value + ', ' + $
('routetown-input').value);
}
});

[Ciul]

Hi Arian.

I don't know how to use github and since that's a need to upload it to
the forge, I haven't

If you or someone could help me, I'd appreaciate it.

Best regards,
Ciul

On 28 dic, 09:38, Arian Stolwijk <ar...@aryweb.nl> wrote:
> Have you added it to the forge already? Makes it easier for other people to
> find ;)
> If you need any help with adding your plugin you can always ask here or on
> IRC!
>
>
>
>
>
>
>
> On Tue, Dec 28, 2010 at 3:32 PM, Ciul <luiscarlosj...@gmail.com> wrote:
> > Hi pals.
>
> > This time I introduce you another script I've made to easy the use of
> > GoogleMaps javascript API.
>
> > It also has some mini applications (widgets) that run over the map
> > that I've added.
>
> > It is posted at forums:
>

> >http://www.mooforum.net/script-showcase-f25/google-maps-api-mootools-...

[Ciul]

Hi SIlk.

That could be easily changed and yes you are right.
I did it that way because I liked it to be organized for me when
writing it and I don't know, I find it that way easier to maintain.
Sorry for that.

Best regards,
Ciul.

On 28 dic, 09:36, Slik <slik....@gmail.com> wrote:
> As I see, you are implementing Events into your GoogleMapCreator.
> So, would be better to use this.fireEvent instead this.click|dblClick|drag|etc()
>
>
>
>
>
>
>
> On Tue, Dec 28, 2010 at 4:32 PM, Ciul <luiscarlosj...@gmail.com> wrote:
> > Hi pals.
>
> > This time I introduce you another script I've made to easy the use of
> > GoogleMaps javascript API.
>
> > It also has some mini applications (widgets) that run over the map
> > that I've added.
>
> > It is posted at forums:

> >http://www.mooforum.net/script-showcase-f25/google-maps-api-mootools-...

[Ciul]

Hi Kelvin.

Nice class you got, seems cleaner than mine LOL, and also, what is
that pastebin site? I didn't know it :P

I added those classes I was needing more at the moment I started to
write them.

I have added a few more things but haven't updated the file at forums.

Google directions, hehehe, since that doesn't work very well in my
country (not enough maps information from google) I didn't write it
but I could, yeah, it is always possible to improve ourselves and make
things better :D

Best regards,
Ciul.

[Ciul]

Hi everyone :D

Please check for widgets, which are mini applications I've did,
running inside the map.

Distance widget: http://map.quillamwa.com/distancewidget/
Around widget: http://map.quillamwa.com/aroundwidget/
Find me widget: http://map.quillamwa.com/findmewidget/

They can be activated/descativated at a control button made for them
to the left of the map's type, top right corner.

To resume what do they do:

Distance widget:
let's you click on the map and then add markers and measure distance
along the whole path. Note: the markers are draggable.

Around widget:
it makes markers you pass to it invisible. It creates a "person"
marker and a search scope around him (a circle), then you can move the
"person" marker since it is draggable and also increase or reduce the
search scope with that "arrow" marker. And then, only those markers
inside the search scope that were invisible will be visible.

Find me widget:
Basically it uses what W3C explains on how to get a location from the
user, it gets the lat,lng coordinates and then locates a marker at
that position. This one is buggy, well not buggy, it is that since it
depends the browser it doesn't always find the correct position. But I
followed W3C instructions so that's not my fault.
Lately I made a script apart for this so this one should be rewritten
but I am writing other scripts right now :P

Best regards,
Ciul.

[Ciul]

I forgot to say:

Right click on markers from the Distance widget to delete them in
order (from the last to the first).

[Arian Stolwijk]

You should really try to learn git and use github, once you did that you can't live without anymore! Get started with git at: http://www.git-scm.com/ and this is a very good read: http://progit.org/book/ besides that there's plenty information on github how to setup git and work with github: http://help.github.com/

Once you have that, it isn't very difficult to put your plugin on github.

[Ciul]

Thanks Arian. I will see it when have some free time. I'm currently
busy with another script I'm writing.

You may see it at forums, it is called MooKrpano

Best regards,
Ciul

On 28 dic, 12:35, Arian Stolwijk <ar...@aryweb.nl> wrote:
> You should really try to learn git and use github, once you did that you

> can't live without anymore! Get started with git at:http://www.git-scm.com/andthis is a very good read:http://progit.org/book/besides that there's plenty information on github

[Ryan Florence]

http://ryanflorence.com/git-for-beginners/

[Ciul]

Hey pals.

Did you tried the widgets?

Any opinion about them?

I'd appreaciate opinions. My favorite one is the Around widget :P

[Trevor Orr]

I think the around widget is pretty cool and the most useful.

[Ciul]

Hi pals and happy new year.

By a requirement of a possible job to be hired.

I will be adding it an Overlay Class to put HTML elements inside the
map as an overlay object. So images and a few more things could be
easily displayed over the map :D

Best regards,
Ciul.

[Ciul]

Hi pals.

Happy new year :D

I was finishid last details of the class (it already works really
nice :P ) and then I said, let's test it on IE, why not?

and then...crash!, but with something that shouldn't has to crash, the
Element.grab method from MooTools.

Kinda found a solution, it displays the overlay on IE but still says
there's an error.

// IE throws an error on grab. [This object doesn't support this
property or method]
if(Browser.ie) {
panes[this.options.mapPane].appendChild(this._wrapper);
// IE will still show an error message but at least the overlay
will be displayed anyway.
}
else {
panes[this.options.mapPane].grab(this._wrapper);
}

/* Possible Map Panes string values:
floatPane (Pane 6)
This pane contains the info window. It is above all map overlays.
overlayMouseTarget (Pane 5)
This pane contains transparent elements that receive DOM mouse
events for the markers.
It is above the floatShadow, so that markers in the shadow of the
info window can be clickable.
floatShadow (Pane 4)
This pane contains the info window shadow. It is above the
overlayImage,
so that markers can be in the shadow of the info window.
overlayImage (Pane 3)
This pane contains the marker foreground images.
overlayShadow (Pane 2)
This pane contains the marker shadows.
overlayLayer (Pane 1) chosen by Default
This pane contains polylines, polygons, ground overlays and tile
layer overlays.
mapPane (Pane 0)
This pane is the lowes pane and is above the tiles.
*/


Any idea why's that or how to solve it?

Best regards,
Ciul.

[Ryan Florence]

Create test case outside of your class that shows the alleged error, put it on jsfiddle.

My first guess is, you're trying to 'grab' on an element that isn't extended with $.

[Ciul]

Thanks for the fast reply Ryan.

hmm I added the moogoomaps.js file at resources but it seems not
working.

Look: http://jsfiddle.net/Ciul/YZUq6/

The next code should be displaying the map...

var map = new Map($('map_canvas'), {
streetViewControl: false,
center: {
lat: 10.98,
lng: -74.79
},
zoom: 10
});

[Ciul]

While got some help with resources at jsfiddle...

I changed the code to this:

...
var panes = this.getPanes(); // This is a google maps API function.

var pane = panes[this.options.mapPane];
pane = $(pane);
pane.grab(this._wrapper);
...

And although it displays on IE, it shows the next error:

no valid argument
mootools-core.js Line 329 - Character 126

Any idea?

Note: If someone could show me some example of how to correctly use
resources I'd apreaciate it.
The actual location of moogoomaps.js is http://map.quillamwa.com/js/moogoomaps.js
although it may change in future.

it must display a map with this simple code line: var map = new
Map('mapDIV');

Best regards,
Ciul.

[Ciul]

Hi MooTools pals.

New Classes added:
- Polygon Class
- Overlay Class

Basically, the Polygon class will let you create polygons in the map,
you can pass a multidimensional array of Mx2 length with pair of
latitude, longitude coordinates e.g. [[lat,lng],[lat,lng],
[lat,lng], ...and so on] just pass this to the paths option from the
Polygon Class.

and the Overlay Class will let you put HTML content inside your maps,
like, if you want to put and image at a given position and bind it to
one of the 6 posible layers that compound a Google Map. This is an
option from the Overlay Class, by default it will use the
overlayLayer.

floatPane (Pane 6)
This pane contains the info window. It is above all map
overlays.
overlayMouseTarget (Pane 5)
This pane contains transparent elements that receive DOM
mouse events for the markers.
It is above the floatShadow, so that markers in the shadow
of the info window can be clickable.
floatShadow (Pane 4)
This pane contains the info window shadow. It is above the
overlayImage,
so that markers can be in the shadow of the info window.
overlayImage (Pane 3)
This pane contains the marker foreground images.
overlayShadow (Pane 2)
This pane contains the marker shadows.
overlayLayer (Pane 1)

This pane contains polylines, polygons, ground overlays
and tile layer overlays.
mapPane (Pane 0)
This pane is the lowes pane and is above the tiles.

Code posted and uploaded at Forums:

http://www.mooforum.net/script-showcase-f25/google-maps-api-mootools-class-t3676-20.html#p14638

If someone could help to make this reach the Forge, I'd appreciate
that.

Best regards,
Ciul.

[Kevin]

Ciul,

I'm REALLY liking your Google maps classes. Nice work!

One thing I noticed with your various overlays (polygons, polylines,
markers, . . .): in Google Maps API V3, the way to "hide" an overlay
object is to call setMap(null). But in your classes, you are
preventing that, because of this line:

var map = [map, this.getMap()].pick();

I had to comment out that line in each of the overlay classes, then I
was able to remove overlays from the map. Perhaps you could add
methods like hide(), show(), and destroy().

-- Kevin

>  http://www.mooforum.net/script-showcase-f25/google-maps-api-mootools-...

[Ciul]

Hi Kevin.

Thanks :D

this makes the effort to share worths it :D

About the Overlay issue you mention, those methods are there, it is
just that I forgot to mention them.
Overlay custom methods:
- hide ()
- show()
- toggle()
- toggleDOM()

Excuse me for that.

Best regards,
Ciul.

[Ciul]

Hi everyone.

New Classes added:
- CustomControl Class

CustomControl(tag, options)

This class will make an Element this way:
this.element = new Element(tag, this.options.properties);

so you can make a Map Control that will be an Element, and just pass
the properties in an object inside the options. That way you could use
Events easily.


Posted at forums:
http://www.mooforum.net/script-showcase-f25/google-maps-api-mootools-class-t3676-20.html#p14690


@ Kevin and everyone else interested:

By the way, check that all classes have custom methods I've added them
(not all of them have a hide,show method but after your suggestion I
will be adding them).
Also, notice that the Map Class has custom methods as well, start
reading them from line 415, so there are methods like:
- createMarker method
- createInfomarker
- createPolygon
- createCircle
- createRectangle
- createPolyLine
- createOverlay
- createControl

End of [@ Kevin and everyone else interested]

Best regards,
Ciul.

[Ciul]

Due to Kevin suggestions:

[Quote Kevin]

I'm REALLY liking your Google maps classes. Nice work!
One thing I noticed with your various overlays (polygons, polylines,
markers, . . .): in Google Maps API V3, the way to "hide" an overlay
object is to call setMap(null). But in your classes, you are
preventing that, because of this line:
var map = [map, this.getMap()].pick();
I had to comment out that line in each of the overlay classes, then I
was able to remove overlays from the map. Perhaps you could add
methods like hide(), show(), and destroy().

-- Kevin

[/Quote]

Some custom methods such like:

show,hide,destroy

added to classes such like:

Marker, Polygon, Rectangle, Circle, PolyLine


Note:
I hadn't test them working on all classes, just in some of them.

Any error please advise me to fix it as quicly as possible.

Posted and uploaded to forums:
http://www.mooforum.net/script-showcase-f25/google-maps-api-mootools-class-t3676-20.html#p14695

Best regards,
Ciul.

[אריה גלזר‎]

any advancement on bringing this one into the forge? It seems like putting the class on a forum/googlegroup is not a good way to post code. It seems like a very useful Class but I doubt I will find it in a few months if it's not on the forge

As a side note - Ciul - I'm not sure the googlegroup is a good place for updating on your Class's status. This isn't a forum, so everytime you post a new message it pops up in the email. Again - this is another good reason for putting your code on github+forge - you get an update mechanism, a tag system, a ticket system and a discussion platform (most of these from github offcourse)

--

Arieh Glazer
אריה גלזר
052-5348-561
http://www.arieh.co.il
http://www.link-wd.co.il

[Kevin]

Ciul,

Yes, I saw those methods on the Overlay class, but not on the classes
for the other overlay objects (Marker, Polygon, . . .).

-- Kevin

On Jan 8, 10:38 am, Ciul <luiscarlosj...@gmail.com> wrote:
> Hi Kevin.
>
> Thanks :D
>
> this makes the effort to share worths it :D
>
> About the Overlay issue you mention, those methods are there, it is
> just that I forgot to mention them.
> Overlay custom methods:
> - hide ()
> - show()
> - toggle()
> - toggleDOM()
>
> Excuse me for that.
>
> Best regards,
> Ciul.
>
> On 8 ene, 10:26, Kevin <kevinil...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Ciul,
>

> > I'm REALLY liking your Googlemapsclasses.  Nice work!

>
> > One thing I noticed with your various overlays (polygons, polylines,

> > markers, . . .): in GoogleMapsAPI V3, the way to "hide" an overlay

[Ciul]

Thanks to all those who asked for uploading this to the Forge, this
made me effort more to try Git and GitHub.

I finally could upload something to GitHub (with some command lines, I
don't like command lines but they seem easy to use :D )

Now I have to learn it a bit more and hopefully soon MooGooMaps will
be on the Forge :)

Thanks agains all you.

Best regards,
Ciul

[Kevin]

Some bugs in the Marker class:

1. The setIcon() method checks the provided argument but refers to it
as "icon" instead of "iconUrl" and this throws an error.

2. When you create the Marker, you ignore the raiseOnDrag option that
was provided, and so all markers have this as "true"

3. Your using camelCase naming for the fired events -- to be more
compatible with MooTools / JavaScript, could you throw all events in
lower case (mouseover, mouseout, etc.)? (This actually applies to all
of the classes, not just the Marker class)

[Kevin]

Another little bug in the Marker class . . . the setVisible() method
is not passing a parameter to the Google maps method. So, it always
has the effect of setting visibility to false.

[Ciul]

Hi MooTools pals.

I'm working on a XMLMap class, basically it implements my XML 2 Js
Object converter script and then creates a google maps accordingly the
XML file nodes (which syntax I've defined accordingly to MooGooMaps
classes arguments/options).

By example,
right now I've just achieved it creating the map from a pretty simple
XML file like this:

[code]
<Map container="map_canvas" width="200px" height="400px" lat="45.8"
lng="54">
</Map>
[/code]

Incoming adds: creating markers,polylines,circles,rectangles and else
from marker nodes, polygons nodes and all other nodes; stuff from
google maps API that MooGooMaps is capable to do.

Hope you will enjoy this.

This way, even non-programmers could have their own customized google
maps through MooGooMaps :D

Best regards,
Ciul

[Ciul]

A live site using MooGooMaps

www.quillamwa.com/tour/monteria

the map is created from a simple XML map, with a really easy syntax :D
it implements the XML to Js Object converter I wrote.

Click on the Map icon (top) to toggle to the map, this site will work
as a 360º touristic directory.

Hope you enjoy it.

Best regards,
Ciul

[Philip Thompson]

It's neat... but it makes my CPU sit at 120+%! I don't even know how that's possible. But it does! =|

~Philip

http://lonestarlightandsound.com/

[Ciul]

Hi Philip.

It is because of the 360º Flash tour.

Thanks for your comment :D

Best regards,
Ciul

[Ciul]

I finally learnt how to upload stuff to GitHub :D

MooGooMaps reached the Forge: http://mootools.net/forge/p/moogoomaps

Enjoy it :3

Best regards,
Ciul

[Olivier Girardot]

And nice stuff indeed :)

2011/4/5 Ciul <luiscar...@gmail.com>

[Ciul]

Please see this new Plugin that I'm working on. It is explained at
Forum: http://www.mooforum.net/script-showcase-f25/google-maps-api-mootools-class-t3676-30.html#p16163

I bet you will find it very very usefull, it is a Marker Filter
Plugin. What it does?
Let's say you have restaurant markers, hotel markers, bar markers,
school markers, and else. Then, the plugin creates Checkboxes to check/
show and uncheck/hide markers according any marker option you decide.
Let's say that markers have a "type" option, you pass that to the
Plugin and an Array with strings to compare with and that's it.
It also creates a form with a legend which is customizable through the
plugin's options, even, you can say the id_prefix to use in your css
rules.

So it is totally customizable.

I strongly ask for someone who collaborate on the styling of the
plugin. I am not so good to draw and choose colors as I'd wish. Please
anyone.

Best regards,
Ciul