Loading tweets...
Recently I was working on creating a custom Google Map for my other blog, Travel Jones. The map shown below was not displaying the custom icon in Firefox, but it did work in Internet Explorer and Chrome.
View Barcelona Christmas Markets in a larger map
Credits
After some searching around I found the solution but figure that it may need some explaining to simplify things a little more. I found this information on a forum which linked to another forum on a support site.
It seems the problem is in the way that Firefox access the image files on the server and it is easily solved using a single line in your .htaccess file.
Solution
If you already have a .htaccess file in the same folder as the icons you’re using for your Google Map then you can simply add the line below to that file. If you don’t already have a .htaccess file in the same folder as the icons you’re using, now would be a good time to create one and add this line:
Header set Access-Control-Allow-Origin *
Presto, it works.
Follow Through
If you did create a new .htaccess file, don’t forget to set the permissions for that .htaccess file. Also, if you already had a .htaccess file there, you may want to double check the permission on the file while you’re here. The correct setting should be:
- User – Read/Write
- World – Read
- Nobody needs to execute this file
In Linux, you can use the chmod command as follows:
chmod 644 .htaccess
In Windows or through a Linux GUI, this can also be done by right clicking on the file and changing the settings in the properties menu.
If this tutorial helps you use custom icons on your next Google Map, please share the link to your map in the comments section below.
