Snazzy Maps (FREE)

Adendum · Post by **Adendum** » Mon Dec 09, 2013 10:38 pm

This extension is based on the Snazzy Maps repository of styled Google Maps using the Google Maps JavaScript API v3 code.

A simple utility to allow you to style a Google Map to suit your website design and colour scheme or to use any of 24 pre-set styles.

Snazzy_Maps.jpg

Demo.

NOTE:
[a] You are required to set up you own API key via the Google Developers website. It is not difficult and is entirely free - but without your own API key the extension will not work.
This is a simple extension - but read the help PDF before you ask for support and take the time to understand how the wizard works as I will not be giving support on the wizard!

Have fun

zinc · Post by **zinc** » Tue Dec 10, 2013 1:16 pm

Magic Paul !!!! I have been looking for this for a long time!!!! Thank you!!!!

Adendum · Post by **Adendum** » Tue Dec 10, 2013 2:59 pm

Consider it my Christmas present to you and all other WWB users

zinc · Post by **zinc** » Wed Dec 11, 2013 11:53 am

Paul I am unable to locate it in EXT MGR.

Adendum · Post by **Adendum** » Wed Dec 11, 2013 3:26 pm

bendigo wrote:Paul I am unable to locate it in EXT MGR.

Try now. Let me know as I continue to have problems with the extensions uploads.

zinc · Post by **zinc** » Thu Dec 12, 2013 8:18 am

Adendum wrote:
bendigo wrote:Paul I am unable to locate it in EXT MGR.
Try now. Let me know as I continue to have problems with the extensions uploads.

Paul, you seem to have packaged the project file (XWB) instead of the complied extension.

Adendum · Post by **Adendum** » Thu Dec 12, 2013 10:06 am

Geeze...I'm so rusty!

OK, problem fixed - try again!

jordan · Post by **jordan** » Sun Dec 15, 2013 1:48 pm

TNX for your update mail Paul, list is updated:)

zinc · Post by **zinc** » Tue Jan 07, 2014 8:09 am

Paul;

Great stuff! I have now used it for an upcoming site. However the only snag is, unlike BF's version of GMaps, it does not let me add a Pin for the exact location. A very welcomed feature request if at all possible.

Thanks gain.

Adendum · Post by **Adendum** » Tue Jan 07, 2014 1:58 pm

Send me an example of how the code looks for a Google Map with a marker and I'll see what I can do. e.g. the html and/or the JavaScript used.

zinc · Post by **zinc** » Tue Jan 07, 2014 2:55 pm

Adendum wrote:Send me an example of how the code looks for a Google Map with a marker and I'll see what I can do. e.g. the html and/or the JavaScript used.

Just emailed you.

Adendum · Post by **Adendum** » Tue Jan 07, 2014 7:07 pm

Bendigo,

Bacon's extension (if that is what you used in the NLS site) uses an iFrame and I assume embedded code taken from the Google Map site. Snazzy Maps is using API and JavaScript to create the maps. So as far as I can tell it's a quite different approach.

However I'll take a look again at the API documentation and see what I can find in there....must be something.

Anyone else who has been there and done that please feel free to help me shortcut this!!

Adendum · Post by **Adendum** » Tue Jan 07, 2014 8:25 pm

I stand corrected

And I also have made some progress with a standard Marker but I am 100% sure that won't be enough, so I am looking at all the options including custom marker icons, animation and a few other extras!

Blame Bendigo!

zinc · Post by **zinc** » Tue Jan 07, 2014 9:30 pm

Paul, that's great. I look forward to it. Thanks again.

Adendum · Post by **Adendum** » Wed Jan 08, 2014 7:39 pm

v1.0.0.1 released

Aditerum _ Snazzy Maps.jpg

1. Removed width and height setting and replaced size requirements with the size of the drawn extension.
2. Added map marker facility with animated bounce in. Marker image is customisable and I have provided a sample set that can be downloaded from the revised demo page.
3. Added info text box when marker clicked.
4. New demo page.

BEWARE - The new Info Box uses the standard WWB Rich Text editor and the code does not like carriage returns SO DO NOT HIT THE ENTER KEY when entering your Info Box text.

@Bendigo - I expect to see a really sexy NLS page within the week!!!!

zinc · Post by **zinc** » Wed Jan 08, 2014 7:51 pm

I LOVE IT Paul!!! Just what the doctor ordered.

This extension is not for NLS. That site was designed by the client, I only built it for them, that's why you dont see my signature work/style

Will send you a link to the site that does use your extension as soon as it is feature complete.

Thanks once again.

BTW, when you get chance, check out the email I sent you.

zinc · Post by **zinc** » Thu Jan 09, 2014 2:31 pm

Paul;

There seems to be no option to define a font style (Font Family) for the header which is a shame. Could please consider adding this?

Otherwise great stuff!!!!

B

Adendum · Post by **Adendum** » Thu Jan 09, 2014 2:43 pm

It's set to your <h1>.

zinc · Post by **zinc** » Thu Jan 09, 2014 2:51 pm

Adendum wrote:It's set to your <h1>.

I am talking about font name. Can that not be changed?

Adendum · Post by **Adendum** » Thu Jan 09, 2014 2:58 pm

Not following you...

If you set the H1 font in WWB that is what Snazzy Maps is using - so you can have any font you want, as long as you set it within WWB.

zinc · Post by **zinc** » Thu Jan 09, 2014 6:36 pm

Adendum wrote:Not following you...

If you set the H1 font in WWB that is what Snazzy Maps is using - so you can have any font you want, as long as you set it within WWB.

Wouldn't have been easier if you allowed the user to choose font? The size can remain <H1>

Adendum · Post by **Adendum** » Thu Jan 09, 2014 6:56 pm

You'll have to live with it for now - I have a life besides extension building.

zinc · Post by **zinc** » Thu Jan 09, 2014 7:03 pm

LOL

OK Mate.

Adendum · Post by **Adendum** » Sat Jan 11, 2014 12:44 pm

v1.0.0.2 released.

Infobox heading font options added - instead of using your site design's <h1> tag you now have to set font-family, size and color.

zinc · Post by **zinc** » Sat Jan 11, 2014 5:48 pm

Smashing Paul!!!! Thank you so much. Will email you a link to see what I have done with it so far.

Now - This is only a suggestion NOT a request. How about an option to have the map full screen?

stamjoe · Post by **stamjoe** » Tue Jan 14, 2014 5:16 pm

WoW!!!!
Thanks!!!!
Joe

Adendum · Post by **Adendum** » Sat Feb 08, 2014 4:36 pm

v2.0.0.0 released.

Warning - this is a major update with a significant re-write of the extension and code it generates. You are advised to record the content used in earlier versions of the extension before updating as a considerable number of the properties have changed as well as new properties added.

New features:
1. Multiple locations.
2. Link to get directions to location.
3. Info Window Image now a simple property.
4. Info Window text simplified.
5. Full screen or browser width and height capable.
6. Ideally suited for use with the new Breakout extension.

Four new demo pages now available and a new help file written.

There will be NO FURTHER development of this extension other than bug fixing. What you see is what you get, so please do not ask for additional features or options to change the current feature set.

Have fun with it.

zinc · Post by **zinc** » Mon Feb 24, 2014 7:31 am

Paul;

Here is nifty little feature based on the multi location.

Take a look at this site

http://projectfms.co.uk/project/blood/

I have not tried it with other browsers apart from FF and it is where it asks for your current location and returns the nearst addresses in relations to your given location. Something you might consider in the future version.

Z

traco · Post by **traco** » Sun Mar 16, 2014 5:01 pm

Hi,
Why there are 2 white lines between the header and the address?
How can I change only the color of the header? (As in your site demo).

Thanks and compliments for your amazing extension....

Adendum · Post by **Adendum** » Mon Mar 17, 2014 11:41 am

Traco,

1. The heading uses whatever heading tag you have selected to use from your site's design. So if you use <h1> in the extension you need to modify the CSS values for <h1> in your CSS settings.

2. The gaps will only appear if you don't fill out the extension fields correctly - look at page three of the help file and you will see that each line is an individual field. If you don't fill them in you get a blank line also.

traco · Post by **traco** » Mon Mar 17, 2014 5:48 pm

Thanks for the quick reply.

2. The gaps will only appear if you don't fill out the extension fields correctly - look at page three of the help file and you will see that each line is an individual field. If you don't fill them in you get a blank line also.

I did This.

Thanks

Adendum · Post by **Adendum** » Mon Mar 17, 2014 5:55 pm

Not sure what is happening here.

[a] try removing the apostrophe in the location name and see if that does anything.

if not I'd need to see your project to be able to dig deeper.

BaconFries · Post by **BaconFries** » Mon Mar 17, 2014 6:07 pm

Hi Paul not hijacking this butvtry bthe following

Ok to over come this we need to do add this ’ in place of the '
For example:
Mrs. Lewis ' s car is nice.
becomes below but will render/display correctly when published/previewed
Mrs. Lewis’s car is nice.

traco · Post by **traco** » Mon Mar 17, 2014 6:10 pm

[a] try removing the apostrophe in the location name and see if that does anything.

I Tried..

if not I'd need to see your project to be able to dig deeper.

what do you need?
wbs file or generated HTML?

Thanks

Adendum · Post by **Adendum** » Mon Mar 17, 2014 6:17 pm

1. Open your project and SAVE AS a new name.
2. Delete all the pages except for the Snazzy Maps page.
3. Go to assets and delete all the unwanted files.

That will leave you with a nice and small .wbs with the new name and a matching folder that contains only the images used in that page.

4. Zip up the .wbs and folder
5. Email me from this page and I will email you back so we both have email addresses.
6. When you get my email response you can send the zip file.

Adendum · Post by **Adendum** » Mon Mar 17, 2014 9:35 pm

I am going to need someone else's thoughts on this one because I am now officially confused.

Traco has sent me his project. Nice and simple, one address in the extension. When I preview it I get the same results as he does - extra lines after the location heading.

When I copy the extension from HIS project into MY project and then preview it is perfect - no line spacing.

SM-Preview1.jpg

When I copy MY extension from the demo project and preview in HIS project I get the two extra lines.

SM-Preview2.jpg

So clearly there is something different in the settings of his project compared to mine. It can't be different settings in WWB otherwise I would be getting good and bad results. And here's why I am confused.......I have replicated all the page settings used in my demo in his project page but it makes no difference.

So what else could cause this kind of discrepancy?

Oh and for the record if I create a new project and manually enter all the same data as Traco's and preview I see everything as I would expect.

BaconFries · Post by **BaconFries** » Mon Mar 17, 2014 10:49 pm

With permission of course (traco) if you want to send it to me Paul and I will take a look...

traco · Post by **traco** » Tue Mar 18, 2014 2:50 am

With permission of course (traco) if you want to send it to me Paul and I will take a look...

No problem for me if it can 'help solve the issue.. Thanks

Adendum · Post by **Adendum** » Tue Mar 18, 2014 11:20 am

@Bacon,

Glad to have you on board fella. I'm lost for a cause let alone a solution.

BaconFries · Post by **BaconFries** » Tue Mar 18, 2014 4:05 pm

Ok not hijacking here... One issue or explanation to why the map may not display is this it uses javascript, now if you do not have javascript enabled in your browser then it will fail to open as it is ment. If you cannot preview in WB then you may ticked the checkbox Disable IE security warning during preview. You will find this setting in Tools->Options->Publish&Preview->Preview simply uncheck this and try again. If it still doesnt display then you will need to enable javascript to run on your PC, if you are not using IE, then you will again need to allow javascript to run in what ever browser you use, note this is nothing to do with the extension in anyway it is a PC or browser setting required to run the script...

Adendum · Post by **Adendum** » Tue Mar 18, 2014 4:38 pm

Wow!

traco · Post by **traco** » Wed Mar 19, 2014 8:49 pm

@Adendum and @ Bacon

After dozens of attempts I solved it this way:
I created a new project
I imported the old project into the new project (import page from a other project)without the extension I added snazzy and put all settings
The problem is' solved ..! I'm confused but happy .. thanks for your support ...

Ps
The same page in old project stil has the problem

supersonictt · Post by **supersonictt** » Fri Dec 12, 2014 8:01 pm

Adendum,

Thanks a lot for this extension! Really great

I have a question please: in your demo page, the info window appears different than the extension generates:
1. There is a space from the top of the window to the heading text, and a big space between the heading text and the address.
2. The heading text in your demo has a different color. I know it is all about styling, but could you please provide a sample project just like the one in your demo site? Or maybe some hints?

Thank you

p.s.: I included a link of an image of how the info window is generated by the extension.

---------EDIT---------
Ok I got it

Thanks a lot

Adendum · Post by **Adendum** » Sat Dec 13, 2014 12:24 pm

lol, glad I could 'help'.

supersonictt · Post by **supersonictt** » Sat Dec 13, 2014 8:32 pm

Hehe

Well, I have a suggestion, and I believe it will be very useful:
In the Map Options -> Heading Size, if this option can be editable it will give the flexibility for users to style the header the way they want. In Style Manager, I had to change the font, color, size and other stuff to make it appear the way I want, AND I had to make a copy of H4 (as an example) to save it as a backup so I don't lose its original values. So, if this option is editable, I can put H4_map, and in the Style manager I can make this H4_map and style it the way I want.

Hope I made sense in my suggestion

Thanks Adendum

maxam · Post by **maxam** » Thu Oct 01, 2015 1:10 pm

sorry for the dum question but how can I download the extention?

Adendum · Post by **Adendum** » Thu Oct 01, 2015 2:14 pm

Same as any other extension - in WWB Tools>Extension Manager and install from there

Sergio Morais · Post by **Sergio Morais** » Wed Oct 07, 2015 9:47 am

Hi,

Snazzy Maps extension has stopped working.
Most of my published sites return the following error when consulting the page containing the map:

"This page was unable to display a Google Maps element. The provided Google API key is invalid or this site is not authorised to use it. Error Code: InvalidKeyOrUnathorisedURLMapError"

API code maybe?
Apparently mine is still valid as oddly enough one site's map still works.

Referrers?
Added the domain names (and its derivatives) to Google Developers Console. To no avail...

WWB version?
Also been checked. It's not that.

What could this be?
Anyone come across this yet?

Thanks.

aml02873 · Post by **aml02873** » Wed Oct 07, 2015 9:56 am

Had the same problem a while ago. Applied for a new API key and it worked again.

Sergio Morais · Post by **Sergio Morais** » Wed Oct 07, 2015 10:00 am

Thanks.
I will do the same.

You obviously had to go through all your sites, fill in the new API and republish them, right?

Regards.