World Offices Map Information Display

 


World Office Locations
Click on the markers for more information

With the Interactive World Maps plugin you can create a World Map and display markers wherever you want. In this Example I created markers in different locations of the world, with custom colors, and I created a custom javascript action to display information about each office on click.

—————————–

UPDATE: From version 3.2.2 of the map, released on January 2013, it is not necessary to create a custom javascript action, the plugin already has a built-in option to display information below the map. You don’t need programing skills to achieve this.

The information below is obsolete, but still serves as an example on how custom actions work with this plugin.

——————————

The map is very easy to build. Check out the screenshot  of the administration panel, with the configurations of this map.

(click to see it bigger)

I choose to create a ‘Custom Action’ in the Active Region Action option and placed this in the custom action field:

document.getElementById('imap29message').innerHTML = ivalue_29[selectedRegion];

This javascript snippet basically says to place inside the div ‘imap29message’ the action value of the clicked region.

On the post/page where I placed the shortcode for the map, I also created a div where the information will display. In this case, in the post, after the map shortcode, I placed:

<div id='imap29message'>Click for more information</div>

To enhance the visual of the maps further, I added some CSS to my theme, to control some aspects of the map. In this case, just a simple rule, for the mouse to turn into the pointer, when hovering the makers.

#map_canvas_29 circle {
cursor:pointer;
}

Get some tips on how to customize the maps further here.

GET THE PLUGIN, and build you own world map!

 

FAQ

Will this work in regions mode?

Yes. If you want to use this custom action in regions mode, where you color full regions instead of placing markers, it is possible. It’s the same procedure.

My map doesn’t display when I put that custom action!

Usually, when this happens, it’s a sintax problem. Make sure you’ve placed the correct code. A common mistake is the ‘quotes’, they often get replaced by invalid quotes in the copy/paste process. Re-write the quotes. Check this image for reference.

The map displays, but nothing happens when I click!

Make sure you are using the correct ID for you map. In the example above i used 29, but you should use you’re map’s ID. If your id=”1″, then the code would be:

document.getElementById('imap1message').innerHTML = ivalue_1[selectedRegion];

and

<div id='imap1message'>Click for more information</div>


70 Comments

  1. Joe   •  

    Hey Carlos,
    Great plugin! This plugin is exactly what my client is looking for! It helps a great deal. I’m not super tech savy so bear with my questions if they seem dumb. Two things I need to inquire about:

    I’m trying this technique where I have placed info after the map once the user clicks the marker. The same as the example on this post. It doesn’t seem to work.

    my post looks like:
    [show-map id='1']
    Click on the markers for more information

    and my custom java action in the map looks like:
    document.getElementByld(‘imap1message’).innerHTML = ivalue_1[selectedRegion];

    my action value is:
    bla bla bla

    The map id is 1 so I don’t know why it’s not working. Could it be a theme issue? I don’t know.

    Please help

    • Carlos Moreira   •     Author

      Hello Joe!
      Glad you like the plugin!
      I think you did everything right, you might just be missing the

      to display the content in the post/page where you want to place the map.

      On the post or page where you are displaying the map, when editing, change to html mode and after the shortcode for the map, add a div. It will look like this:

      [show-map id='1']
      <div id=”imap1message”>Click for more information</div>

      (i had a typo on the div explanation, might have been that also, in case you copied it)

      Let me know if it works! Cheers

  2. Joe   •  

    Tried that. Here are some screen shots of my workflow

    • Carlos Moreira   •     Author

      Sent you an email. Cheers

  3. Joe   •  

    Thanks Carlos,
    It helped me a lot. Again, great plugin!

    Cheers

  4. Carlos Eduardo   •  

    Hi Carlos,

    Thanks for this charm plugin. I just purchased one for a client of mine. I was very excited until I got blocked in one point the map creation.

    I’ve created a map Brazil-Procinces following your tutorial. Heres what happens.
    Everything works fine with the shortcode. I can see the maps and the marks, just fine.

    But once I put the custom javascript to the custom field the map no longer shows up at the page.

    Custom Javascript field empty = maps on
    Custom Javascript field filled = maps off

    Do you have any clue for this? I need to finish this website this upcming thursday. I’m worried of time.

    Can’t wait to hear from you.
    Regards

    • Carlos Moreira   •     Author

      Oi Carlos!
      The usual problem, when this happens, is some sintax error, usually on the quotes or the capital I vs L in the by Id part. Check this image for reference: http://img209.imageshack.us/img209/160/sintax.jpg let me know if you were able to fix the problem. Cheers!

    • Carlos Moreira   •     Author

      Hello Fabrizio! check the comments above to check if your problem is the same as any of the above. If the problem persists, let me know! cheers

      • Fabrizio   •  

        Hello Carlos,

        I didn’t realize you had responded. I’ve check what others have done but for some reason I still cannot get it to work. The map does show but the “Additional” info that needs to appear below is not working. How can we get it to work properly

        • Carlos Moreira   •     Author

          Hello Fabrizio!
          Send me an email from my personal profile page at codecanyon: http://codecanyon.net/user/cmoreira and send me a link to your map and i’ll check it out.
          cheers!

    • Carlos Moreira   •     Author

      Hello! I didn’t understand the question, can you describe the problem a bit more? You can’t create linebreaks on the description, but you can create line breaks on the information that displays after the user clicks, putting html line breaks with the br code.

  5. Xbuild-Design   •  

    Hello!
    Thank you for your prompt response.
    My problem is that the field Action Value: can only set one row and when you click on the marker to see this line.
    I want to be the order of 3-4 how?

    • Carlos Moreira   •     Author

      You can use html code in the action value. So, to include a line break, you should include something like: line 1 <br/>line 2 <br/>line 2 .

      This should work.

  6. Xbuild-Design   •  

    Thank you receive it. If you could just tell me how to do Parwan red line will be grateful.

    • JD   •  

      This worked for me.
      TEXT-HERE

  7. JD   •  

    How do I make the “more info” display to the right an top of a table cell. I created a table with 2 cells but the info displays at the bottom of the cell no matter what style code is used.

    • Carlos Moreira   •     Author

      Hello!
      Did you manage to make it work?
      It should be a matter of code sintax, to get it working.

      • JD   •  

        I got it to display in 2 columns for a full-page layout. It did not work using just html on the page, so I added the css code below to the theme’s style sheet and added the div to the map page. It works great. I was also able to add color and images in the Action Value.

        CSS=========================


        .map_wrapper{
        position: relative;
        float: left;
        left: 0px;
        width: 930px;
        margin-bottom: 0px;
        background-color: #ffffff
        }
        .map_left1{
        position: relative;
        float: left;
        left: 0px;
        width: 600px;
        height: 400px;
        background-color: #ffffff
        }
        .map_left2{
        position: relative;
        float: left;
        top: 10px;
        padding: 10px;
        left: 0px;
        width: 300px;
        height: 400px;
        background-color: #e7e7e7
        }

        HTML==========================


        <div class="map_wrapper">
        <div class="map_left1">[show-map id='1']</div>
        <div class="map_left2">
        <div id="imap1message" style="text-align: center;"><span style="color: #0066ff;"><strong>TITLE-TEXT-HERE</strong>
        <em>displays here after state click</em></span></div>
        </div>
        </div>

        ==============================

        Also, in the post above, I want to show how I made a title ‘red’. I also added 2 images in this action.

        Add to Action Value:


        <img src='http://www.mysite.com/image-filename1><br><b><span style='color:red'>TEXT-HERE</span></b><br><img src='http://www.mysite.com/image-filename2'><br>TEXT-HERE <br>

        [note: do not use (") quote marks in the Action Value code, it will break]

        • Carlos Moreira   •     Author

          Great tips! Thanks for sharing JD!

  8. Daniel   •  

    Hi Carlos,
    Just found your plugin, looks great! I have a question, is it possible to apply your plugin to other pictures, other than maps? For instance a round chart with different %-slices. You klick on one slice and see a popup like yours.

    Regards,
    Daniel

    • Carlos Moreira   •     Author

      Hello Daniel!
      Thank you for the positive words!
      Unfortunately it is only possible to use this plugin with maps. It is not ready to work with other kind of images/graphics.
      greetings
      Carlos

  9. phil   •  

    Hi Carlos,

    I bought your plugin today from code canyon, it’s great and just about perfect for what I need!

    I have 2 questions for you :

    1. the marker bubbles, I like being able to adjust the size of the bubble. It would be great if as well as the bubble effect you could have an option to use your favicon or another icon to mark the location. example a small car for used car lots

    2. in the USA there are a lot of city’s that sit close to (or even on state lines, as an example Kansas City of KS and MO). Is it possible when you create a map of KS, that you can show the neighboring states markers (perhaps within a 50 mile arc???) this would stop the user from leaving that map to go to another map.

    if I have missed these features I apologize! If not maybe they could be included in an update??

    Once again, great plugin!

    Cheers
    Phil

    • Carlos Moreira   •     Author

      Hello Phil!
      Thank you for purchasing the plugin and for the positive feedback!
      As for your questions:
      1) about the markers:
      Unfortunately it is not possible to place custom icons instead of the round markers. The plugin uses the Google Geochart API to generate the maps, and it doesn’t allow the placement of custom markers. It could be possible to change the sizes, as the API allows that, but I didn’t include that feature in my plugin. I would have to do some changes. It’s not a very requested feature, but I’ll add it anyway to the list and hopefully I’ll be able to include it in a future update.

      2) about us states display:
      By default the plugin already shows a little bit of the surrounding states. However it is not possible to define how much it should show. But you can place markers on the locations that show up already outside the chosen state. Again, this depends on the google geochart api features, that don’t have options of how much of the surrounding states it should show.

      Hope this informations help!
      let me know if you have any further question!
      cheers
      Carlos

  10. Hassan Tariq   •  

    Hi,

    It seems to be the plugin I am looking for. Actually, I want to display the map whenever a person opens a website and then selects a location from the mark and then redirect to a new website in the same window.

    The country is Pakistan and there will be only couple of city location for it. On Hovering it, I want the city name to be displayed and on clicking redirecting to a website. Is it possible with this plugin?

    Hassan

    • Carlos Moreira   •     Author

      Hello Hassan!
      Check this example screenshot: http://awesomescreenshot.com/004xgnyce
      You can display Pakistan and place markers wherever you want. You can associate Links to each marker.
      Hovering each marker, a tooltip with 2 lines will display.

      Hope this is what you’re looking for!
      greetings
      Carlos

    • Carlos Moreira   •     Author

      Hello! Thanks for buying the plugin! I don’t understand what you mean by ‘move the marker’. You can place markers choosing Markers Mode in the display mode option. Then you can just write the names of the cities you want to place markers in the region code and fill in the rest of the input fields, like in the example screenshot I sent you. If you still have problems, try to be more specific in the description of the problem. I’m here to help. gretings
      Carlos

      • Hassan Tariq   •  

        Inbox you yesterday through contact form of this website. Would love to hear from you.

        Thanks

  11. Tony G   •  

    Hey,
    I would like to create a map of Kenya and the new counties created in 2010. Will your plug in be able to provide me that especially with the new counties?

    Thanks.

  12. Tony G   •  

    Oh bummer. I have already purchased the plug in:(

    • Carlos Moreira   •     Author

      Depending on what you want to achieve, you can try and use the markers mode :\

  13. Amine   •  

    HEllo Carlos,
    i have the same problem as “Fabrizio”, when i click the marker i didn’t get the additional informations below the map.
    I need your help

    • Carlos Moreira   •     Author

      Hello Amine!
      DId you select the proper ‘Active Region Action’?
      Send me a message from my profile at codecanyon, with a link to your map so I can analyze it further. Thanks!

  14. Jonathan   •  

    Hi there

    I have a query, if i want to show the office information in 4 columns is it possible?

    Thanks
    Jono

    • Carlos Moreira   •     Author

      Hello Jonathan!
      Since the information to display can be HTML, you can build it to have the content in 4 columns:or with divs or with table html for example.
      If you have any other question let me know.

  15. Alvin Ng   •  

    Hi,
    Can this plugin shows our stores information with images,
    Thanks very much?

    • Carlos Moreira   •     Author

      Hello Alvin!
      In the current version of the plugin, you can only display images after the user clicks, on a lightbox (with the help of another lightbox plugin and a custom function) or inside a div above or below the map, with HTML. In the tooltips currently it’s not possible.
      Greetings
      Carlos

      • Alvin Ng   •  

        How about I set each individual locations with an unique div ID and set the background images in css ?

        • Carlos Moreira   •     Author

          I am not sure I understood correctly what you would do, but I yes, it would be possible. For each map entry, you set a HTML div with a class/ID where with the CSS you would set a background image. And this div will only show when a region/marker is clicked.

  16. AGIO   •  

    Hey Carlos,

    When I enter certain numbers like 33,360 into the Action Value field, after clicking save, they turn into weird characters like: 33ꯠ
    1,120 turned into 1ꯠ

    Know how to fix this? You can email me as well. Thanks!

    • Carlos Moreira   •     Author

      I’m working on solving this bug. If you don’t make any changes, after inserting the number, even though it displays the weird char, the map will render fine in the shortcode when saved. The problem is when editing the map again. I’m working on solving this. Sorry about this bug – this is due to the fact the information is saved in CSV (comma separated values) and the comma is changed to the html char code and with the numbers attached the html code displays something else.

    • Carlos Moreira   •     Author

      Actually, got it to work correctly. Next update (1.5.3) will have this fixed. If you want to try it already, you can send a message to me via codecanyon. Cheers, Carlos

  17. Flo   •  

    Hi!

    Is it possible to call different contact forms from this plug in?

    Like of you klick on Location #1, the contact-form mail should go to a@domain.com, if button #2 it should go to b@domain.com.

    Like it should refresh the shortcut for the contact form code. Is this possible?

    • Carlos Moreira   •     Author

      The plugin itself doesn’t come with this feature. But You can place different links on different locations, and manage the way the form works in your own page. For example, you can place a link on location 01 a link to yourform?email=a@domain and location 02 yourform?email=b@domain.
      Or links to different pages, with different contact forms. Hope the info helps! Greetings, Carlos

  18. Flo   •  

    Thanks!

    Yes this would be the easiest way.

    Another way could be to call the information with php.

    like: if button #1 show contact form #1 etc…

  19. Flo   •  

    Hi!

    I tried to call the contact-form 7 tag from the world map plugin, but it doesn’t work.

    When I click on the marker, the plain tag for the contact form is displayed. So instead of the contact form, you see : [contact-form-7 id="430" title="Untitled"]

    How can I make it visible/ visible? Any idea?

    THanks!

  20. Iqbal   •  

    i purchased your interactive maps wich has been great for 6 months. Now it takes far to long to load up. I am not sure if it is related buy I also see at bottom of broser references to js.acobat.com

    • Carlos Moreira   •     Author

      Hi! The maps will be the last thing of the page to load, since the map script will be on the page footer, after the content. If there is something else slowing down the loading of the page, it will also slow down the loading of the maps as consequence of this. The maps do not load any content from that link. So it’s possible there’s something else slowing down your page.

  21. Angie   •  

    Hi Carlos,

    I really hope to purchase this plugin, but am a little stuck– my designer and our client are adamant about the customizable/image marker for each location they have in the US. They want a tiny (roughly 40px) logo on each one. Is there a way to customize that or what would you suggest? Any thoughts are helpful. :)

    Thanks!
    Angie

    • Carlos Moreira   •     Author

      Hi Angie. Thank you for your interest. Unfortunately it is not possible to use custom markers in the maps, it is only possible to use the coloured round markers.

  22. Angie   •  

    Hi- Love this plugin. I did not end up using custom tooltips and my client is fine with it. I am working through the things I know how to do, but can’t seem to figure out how to do these two things:

    1. I want to get rid of the hover effect on all of the states, so that the only thing that does anything are the markers. What css can I use to achieve this?

    2. I want to color the tooltip text white and background navy blue. What css do I use/modify to achieve this. Also, is it possible to put it in my theme css so that updates will maintain or do I need to do it within the plugin css?

    I appreciate your help- this plugin has enabled us to make quick work of this daunting/worrisome page.

    angie

  23. Davide   •  

    Hi,
    it’s possible to insert the option that close the after a few second?

  24. Melissa   •  

    Hello, I bought the plugin for this client, he want to put all the offices, I have them on the map but I don’t know how to customise de CSS of the text of the office information how you have in your example, like Lisbon Office Details (in red) and the rest of the info un each line.

    Could you please help me.
    Thanks!

  25. Baykal   •  

    Hi Carlos,

    I am considering to get this plug in my website http://www.musichemicals.com. What I want to do is just using the short code, without using the menus to enter the maps into the website. The reason is the map information will be updated every week, and depending on the user selection. And I will be producing the short code using the php code. I am wondering if this is possible for this plug-in, and if there are short code examples you have.

    Thanks.

    • Carlos Moreira   •     Author

      Hi, not sure this will be possible. But could you explain better? Please contact me via the contact form on codecanyon: http://codecanyon.net/user/cmoreira?ref=cmoreira then we can follow up via email.
      You will probably need to make custom changes to the plugin if I understood correctly, but contact me with your idea and I’ll let you know. Cheers, Carlos

  26. Jorge   •  

    Hello,
    I would like to show all this countries in below but the map can´t show at the same time Turkey and western europe. Is it possible to show with the western europe regions map a view of Turkey? I copy below the code

    es,Spain,Spain,http://evereurope.org/spain/,#946A2B;
    it,Italy,Italy,http://evereurope.org/italy,#298D7C;
    fr,France,France,http://evereurope.org/france,#5C8D2D;
    de,Germany,Germany,http://evereurope.org/germany,#82273F;
    ee,Estonia,Estonia,http://evereurope.org/estonia,#5C8D2B;
    pl,Poland,Poland,http://evereurope.org/poland,#20628D;
    tr,Turkey,Turkey,http://evereurope.org/turkey,#8D3C2C;
    ua,Ukraine,Ukraine,http://evereurope.org/ukraine,#414E8D;
    ro,Romania,Romania,http://evereurope.org/romania,#748D2F;

    thanks

    Jorge

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>