Posts Tagged: javascript

Scripting — 8 Comments
30
Jan 11

Google Maps Context Menu v2

Not long after my last post about creating a context menu for Google maps, i realized it was a hard process to add new items to the list. Even harder to alter the list after it had been created. So i made the decision to turn all the code into a single class with methods to add/remove items and separators.

I have added the project to Github @ Gmaps Context Menu. So you view the source there.

I do need to write up a nice looking tutorial on how to use it, but untill then iv done my best to add comments and examples to ‘index.html’.

Check it out and let me know what you think.

Scripting — 3 Comments
7
Dec 10

Google Maps API v3 Context Menu

EDIT: I’ve updated the menu code. See HERE

Ever since i started using Google Maps API v3 iv been looking for a easy nice way to add a context menu to my maps. I found several snippets of code around the internet but nothing worked well or the code didn’t look nice (in my coding style). So after alot work i got some working code and i must say it looks nice. Id like to share it with you.

PS. I will add this to my Usermap Fluxbb mod in time.

Continue reading →

Scripting — No Comments
9
Jan 10

Make Icon Function

With ever project there are always helper functions that do simple things. This function is something i created to help make icons for my WoWMap site. All you need to do is pass it an associative array (aka an object in JS) and it will return the google maps GIcon object customed with your options.

function makeIcon(options)
{
	var settings = $.extend({
		'image': 'icons/white.png',
		'shadow': 'shadow.png',
		'iconSize': [24,28],
		'shadowSize': [36,24],
		'iconAnchor': [12,27],
		'infoWindowAnchor': [20,3]
	}, options);

	var base_icon = new GIcon(G_DEFAULT_ICON);
	base_icon.image = 'assets/img/'+settings.image;
	base_icon.shadow = 'assets/img/'+settings.shadow;
	base_icon.iconSize = new GSize(settings.iconSize[0],settings.iconSize[1]);
	base_icon.shadowSize = new GSize(settings.shadowSize[0],settings.shadowSize[1]);
	base_icon.iconAnchor = new GPoint(settings.iconAnchor[0],settings.iconAnchor[1]);
	base_icon.infoWindowAnchor = new GPoint(settings.infoWindowAnchor[0],settings.infoWindowAnchor[1]);

	return base_icon;
}

I use the jQuery extend function to merge the any provided options with the default options.

If you want to use this with your site you will need to change the url for the image and shadow property on line 13 and 14. You can also extend this to edit the other properties of the GIcon object, these are just the basic ones needed to customize (at least for me).