YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar y00them3user asked

VOTE: Feature Request (+ new DIY instructions) -> Custom Map Marker (aka map pins, map icons) In Widgetkit Maps

+1 for customizing Widgetkit's map markers from the Widgetkit admin settings.

Want to customize the map markers (aka map icons, map pins) in Widgetkit maps? Sorry, you're out of luck and stuck with Google's default set of map pins ...unless, YooTheme adds the feature to allow you to set your own pin from widgetkit.


+1 for customizing Widgetkit's map markers from the Widgetkit admin settings.

  • DIY Instructions -

Since YooTheme doesn't seem to be moving on this.. here are step-by-step instructions to add custom map markers to Widgetkits map widget:

1) Open the file /public_html/media/widgetkit/widgets/map/js/map.js, copy all the text in the map.js file and paste it into the 'js beautifier' at jsbeautifier.org. Click beautify and paste the result back into your text editor replacing the original js (don't worry, jsbeautifier doesn't strip anything out)

find this section around line 86:

    var i = function () {}, l = !1,  
        m = !1,  
        k = [];  
    window.google && google.maps &&  
        (m = l = !0);  
    f.extend(i.prototype, {  
        name: "googlemaps",  
        options: {  
            lat: 53.553407,  
            lng: 9.992196,  
            marker: !0,  
            popup: !1,  
            text: "",  
            zoom: 13,  
            mapCtrl: 1,  
            zoomWhl: !0,  
            mapTypeId: "roadmap",  
            typeCtrl: !0,  
            directions: !0,  
            directionsDestUpdate: !0,  
            mainIcon: "red-dot",  
            otherIcon: "blue-dot",  
            iconUrl: "http://maps.google.com/mapfiles/ms/micons/",  
            clusterMarker: !1  

...and replace iconUrl: "http://maps.google.com/mapfiles/ms/micons/", with something like iconUrl: "images/icons/",

*note: make sure the folder has a backslash

2) Open the file /public_html/media/widgetkit/widgets/map/styles/default/config.xml, find the option values starting at around line 7:

<?xml version="1.0" encoding="utf-8"?>  
<style name="default" label="Default">  
        <field name="title" label="Title" type="title" description="" />  
        <field name="location" label="Location" type="location" description="" />  
        <field name="icon" label="Marker" type="list" description="Select a marker icon" default="1">  
            <option value="red-dot">Red Dot</option>  
            <option value="orange-dot">Orange Dot</option>  
            <option value="yellow-dot">Yellow Dot</option>  
            <option value="pink-dot">Pink Dot</option>  
            <option value="blue-dot">Blue Dot</option>  
            <option value="ltblue-dot">Lightblue Dot</option>  
            <option value="green-dot">Green Dot</option>  
            <option value="purple-dot">Purple Dot</option>  
            <option value="red-pushpin">Red Pushpin</option>  
            <option value="ylw-pushpin">Yellow Pushpin</option>  
            <option value="pink-pushpin">Pink Pushpin</option>  
            <option value="blue-pushpin">Blue Pushpin</option>  
            <option value="ltblu-pushpin">Lightblue Pushpin</option>  
            <option value="grn-pushpin">Green Pushpin</option>  
            <option value="purple-pushpin">Purple Pushpin</option>  
        <field name="popup" label="Popup" type="html" description="" />  

...to add custom pushpins, add another line between the <field></field> tags similar to this:

<option value="custom-pushpin">Your New Custom Pushpin</option>

...the value= should be set to whatever the name of your new icon is (minus the .png suffix). Eg. value="custom-pushpin" would load an icon named custom-pushpin.png from the folder you set in step (1) above (*do not add the file type suffix. Javascript automatically appends the .png. You have to use .png images 32x32 px ...or edit the file in step 1 around line 155 and change the parameters).

3) Lastly, create a custom 32x32 px .png image that corresponds to the name you set in the option value from step (2) and upload it to the folder set in step (1).

You should now see a new option in the dropdown list in Widgetkit (in this example, it would show up as 'Your New Custom Pushpin'). Select it from the dropdown, click save. Your new custom icon should now show up in the corresponding Widgetkit maps module!

  • ZOO
  • Widgetkit
  • Feature Request


29 Answers


Avatar julienb answered

i second that request. That would be a great attribute to the widgetkit map.
Google markers are just plain ugly and too commun.


Avatar directoweb answered

and will this be available wit maps. I need also to change the marker for a customized marker to the logo of my site.
Thaks for quick add to widgetkit


Avatar hannes.louet.feisser answered

Was looking into the same thing. If you only need it for one location you can hard code the marker/icon in media\widgetkit\widgets\map\js\map.js like google.maps.Marker({position:a,icon:"images/site/icon.png",shadow:c,map:this.map});


Avatar michele.jordan answered

+1, trying to solve a problem where two locations are very close, so you can't see the second marker... a taller image would solve my problem!


Avatar eric.hawkinson answered

I was just looking for this feature in other extensions. There are several I've found already that have this functionality in the extensions directory.


Avatar john.stafford answered

Has there been any progress with this request, or can someone advise on a way to hack the code to the displayed maker?



Avatar alberto.misrachi answered

Did use > Was looking into the same thing. If you only need it for one location you can hard code the marker/icon in media\widgetkit\widgets\map\js\map.js like google.maps.Marker({position:a,icon:"images/site/icon.png",shadow:c,map:this.map});>

But did vote for this to be implemented... hopefully soon.


Avatar james.flaherty answered

This would be a great addition to the map! can we have it
please please please!! ;)


Avatar idk75 answered

+1 would definitely be a brilliant and much needed addition!


Avatar designjoe answered

+1 This would be great! Thanks!?


Avatar thomaage answered

Thanks, this was really helpful :-)

Know someone who can answer? Share a link to this question via email or twitter.