15 Mar 2008 |
|
This tutorial goes through the installation of the "Plugin Googlemaps" extension for Joomla 1.5. Â Plugin GooglemapsPlugin Googlemaps is a free extension available for Joomla (1.0 and 1.5) which makes it really easy to add in a Google Map to your Joomla website. Installation only takes a few minutes and the maps can be easily customised to suit your needs. Here is an example of a typical simple map you can add (sadly we aren't really based in Times Square!).
As you can see it has most the flexibility of the standard google maps, allowing users to zoom in and out and of course to move around the map as needed. Joomla 1.5 Legacy ModeThe first step in the installation process is to enable Legacy Mode in Joomla (you only need to do this is you are using Joomla 1.5, if you are running an older version you can skip to the next step). This can be accessed by going to the 'Plugin Manager' under 'Extensions' in the top navigation bar once you have logged into the backend.
It's as simple as clicking on 'enable' next to 'System - Legacy'. Once this is done you should see 'Legacy 1.0' appear in the top right of your screen.
Plugin InstallationAfter downloading Plugin Googlemaps from here, go to 'Extensions' then 'Install/Uninstall'. In the 'Upload Package File' select the zip file you have just downloaded and then click on 'Upload File and Install'. Once this is done, return to the 'Plugin Manager', and you need to enable the 'Google Maps' plugin. Google Maps API KeyIn order to use Google Maps, you need an API key for each website you intend to publish the map upon. The API key can be obtained from this page once you agree to the terms and conditions and enter the URL of your website. You then need to copy the long string of numbers and paste them into the 'Google API Key' section of the parameters of the plugin. Click on apply and ensure the plugin is enabled. You are now ready to add a map to your site!
Latitude and Longitude CoordinatesThe first step to customising your map is of course to set the geographical location that the map shows. This is done by setting the latitude and longitude coordinates within the code that you paste into your content. This can be obtained through Google Earth, however the quickest way to do this is to visit Google Maps and enter the location you want, through an address, postcode or place name. Once the page has finished loading and the correct location is shown, copy and paste the following into your navigation bar of your menu and press enter. javascript:void(prompt('',gApplication.getMap().getCenter()));
A window will pop up giving you the latitude and longitude of your desired location. These are the coordinates you need to place into the code. Plugin CodeThe map at the top of the page was created by adding in the following code, using the coordinates for Times Square. I have removed the {...} which need to surround the entire section otherwise it would post a map. The paragraphs I have added for formatting reasons also need to be removed. The code can be posted anywhere in the body of your html and once inserted will show up as a map on your page. The whole process is very simple. mosmap width='500'|height='400'|lat='40.75671'|lon='-73.98646'|zoom='3' The code is fairly self explanatory in terms of customisation, but a full breakdown of the different parameters can be found here. The best idea is to play with each of the values and reload the map to see how they effect it. There is alot of detailed information on how to add more features to your map, such as directions and route plans on the developer's site which can be found here. DirectionsHaving generic directions for your customers is great, but it is a lot more useful for them to be able to plan their route door to door. Using the following code, the plugin will enable users to put in their postcode or address and a new page will load up with full directions on Google Map (remember to add in {...} again! mosmap address='street, zipcode place,country'|dir='1|lat='40.75671'|
We have certainly found this tool to be extremely easy to implement within a Joomla site, so a big thanks to the developer Mike Reumer! Please check out the official Google Pluginmaps Website for more examples of the plugin's use, demos and documentation! Comments (80)
...
Hey guys, good site here. David, I'm finally getting around to commenting on your site! Just wanted to share an experience I had with Google maps.
...
thank you for the tool, i will be using this on www.printhouse.ie
...
You're welcome. Another thing to keep in mind is that a lot of Joomla modules/plugins use the Mootools library, and this IE fix uses JQuery. I remember I had to do some messing around with it to get it to work, but I honestly don't remember what I did. I think if you search for JQuery, they have a website that details what to do if you are using multiple libraries like that...
...
Just uploaded the extension. Doesn't work for me.
...
Looking for some geek that would know how to embed Openlayers on Joomla for a google map.
...
No more geeks needed ! I got it ! Soon in www.bactamtam.vn the system shall be implemented as in www.alterunion.com ( other activity of Frédéric SOTTEAU)
...
Hi, i was following all the instructions step by step, but i have 2 problems:
...
These instructions are wonderful! Great for newbies like myself - very step-by-step. Thank you, Alex.
...
Hallo what could i do my live site is www.hmkbilcon.dk, but i have 5 more domains. iam having proplems with the api key on these domains
...
Hi Frnds (Jean),
...
Very easy to follow instructions, worked like a charm on Joomla 1.5.8. Two things I stumbled on may be really obvious to others, but it's good to note:
...
This is the 3rd google map plug-in that I've tried. I did everything exactly as instructed and only the code is showing up. I enabled the plug-in, pasted in an API key, pasted in the lat. and long. and also pasted that into the code that I pasted into an article linked to the Directions menu. Anyone have any ideas? If you look at the page, you will see a residual menu from another google maps plug-in that I don't know how to get rid of. Keep hoping that something will work eventually - teaching myself the basics of CSS & HTML was so much easier than working with Joomla, I hate to admit it... I'm trying to create a new verson of this website: www.greenfrogtn.com - please note how easily the google map comes up on the direction page. I've spend days on this already and I'm ready to tear my hair out.
...
Hi, I installed plugin googlemaps and it work perfectly fine except that I don't see any text in the direction box. I presume its because of my template which has the color white for the text. how do i change the color of the text in the direction box to another color?
...
I just uploaded the extension and does not seem to work for me. I am not that familiar with PHP, however I understand that I could copy and paste the following code in one of the html or PHP files inside the body.
...
I have never used Joomla until two days ago and am not computer literate but I was able to get to the plugin code. I am sorry if this is a stupid question but where do I put the code? Again I am not computer literate so as much detail as possible would be great. Thank you so much for your help.
...
Its great, but I am confused and there no forum I could find for help. The API key and the map work wonderful. But My info bubble is empty and I when I put the code for the directions they show, but then Google is confused and wrong.
...
I was able to make it work fine in an Article, but not in a Module.
...
I am using Joomla 1.5.3 with plugin_googlemap.2.12j.zip
...
hi there, forgive me as a newcomer but i have followed this post re google map in joomla, but i dont understand the bit about navigation bar:
...
Hello!
...
Hello. I' m dealing with a huge problem. It seems that my drop down menus are appearing in the back of the google map api.
...
Hi,
...
Hi guys!
...
I drew some walking trails on "My Maps" with Google. Can you tell me how I can import these trails onto my website - www.hillwalkireland.com - using the above plugin?
...
Hallo and sorry,
...
Hi guys, to all those who are having issues with displaying the map on your site, even when you're just simply using a simple {mosmap} tag, I figured that the google plugin PHP script is conflicting with another plugin you may have.
...
Hmm.. I get the error:
...
@ Joe: How did you get the google map to show up on your contact page? If you enter {mosmap} in the miscellaneous information or anywhere in the Contact form it does not work. I have been able to display a map in an article, but how do you incorporate a contact page & map on the same page? Thanks.
...
Hye nice to see the map but i'm stuck on few points...
...
Once again Google maps crashes and is out of action for 4 hours today (8th April 2010) from 12.32pm to 4.32pm . Why will Google never release or publise this ! This happens every few weeks.
...
Hi,
...
I've made a website called http://www.yourmapmaker.com where you can now do this very easily. Its just a matter of adding your address and copying the code. Its more for non technical people who may have trouble with the way you mentioned. |
Google maps is a fantastic free tool that can have a number of uses for your Joomla website, perhaps most importantly to show your site visitors where you business is located or where local sites of interest might be.
". Here is the URL: 
