Hi! Thank you for your interest. Unfortunately it is only possible to display state borders, it doesn’t go down to city level. Sorry for this limitation.

Hi Frans! Thank you for using the generator! The output code of the generator is not ready to get a different data source, since it already specifies each data entry in the code. So there wouldn’t be an easy way to do this. You would need a custom solution, that would fetch your data source and feed it into the code again, with the correct syntax. The maps are generated using the Google Geochart API, so you could build code that reads the data from a different source, but this would be outside the scope of the generator, you would need to build your own Geochart API interface code. Sorry for this limitation. An easier thing to do would be to ‘hack’ the generator, so that instead of reading the ‘advanced’ textarea with the csv data, it would read directly from a file, but probably this is not what you want, because you want the output code, correct? Greetings, Carlos

Hi Carlos, thanks for your quick reaction. Your answer is clear to me and I’ll think this over. Thanks!

Greetings, Frans

Hi! Thank you for using the generator! The generator uses the Google Geochart API, which follows the hierarchy and distribution of regions listed here: http://unstats.un.org/unsd/methods/m49/m49regin.htm In this list countries like Turkey and Cyprus are listed under the Western Asia region. I also do not agree with this distribution, since both should be included in Europe. This is something controlled by the API, that I don’t have control. Many people asked Google to change this, and it’s something they said they would update at some point. When they do, the generator will also reflect this change. Until then we have this limitation in regions mode. I’m sorry.

Thank you for your quick answer.

Hi, thank you for your interest in the plugin. It’s possible to have markers on a world map, but it is not possible to have them connected with a line. Sorry for this limitation.

Here’s an example created with the WordPress version: http://cmoreira.net/interactive-world-maps-demo/central-and-south-america/ The SVG file comes from the google geochart API, it is not possible to use custom SVGs unfortunately. You’ll see the level of detail is not much using this technique, but it would be the only solution. The WordPress version includes a custom css crop generator, that this standalone does not, but if you know CSS you can see which css the example page uses and try to replicate. Hope it helps. If you have any other question let me know. Greetings, Carlos

Hmm… then the generator is probably not the right solution for my needs. Nevertheless, many thanks for your effort!

No problem! I’m here to help. Greetings, Carlos

Hi! The generator uses the maps provided by the Google Geochart API, which doesn’t have a map of South and Center america together. It is only possible to display them separated. You could try with css to overlap the maps so they seem concatenated, but that’s outside the scope of the generator. Here are some examples of the maps:

1) http://cmoreira.net/responsive-interactive-maps/category/caribbean/

2) http://cmoreira.net/interactive-world-maps-demo/how-to-build-an-interactive-map-of-central-america/

3) http://cmoreira.net/interactive-world-maps-demo/languages-spoken-in-south-america/

The alternative is to display a map of full Americas and with css crop it to display only the area you need. But that’s not a perfect solution.

If you have any other question let me know. Greetings, Carlos

In the generator you have the option ‘Render HTML in Tooltip’ and if this is active you can use the code

<br />

in the tooltips content to have line breaks and you can add this css rule to your page css file to control the font-family:

div.google-visualization-tooltip {
font-family: "Times New Roman", Georgia, Serif;
 }

Greetings, Carlos

Thanks, it works. But the font family of the tooltip title doesn’t change, is there a way to change it? And after I added a line to the tooltip, the tooltip box is getting larger, is there a way I can change the font size of both the title and content in tooltip or padding?

Try this css instead:

div.google-visualization-tooltip * {
font-family: "Times New Roman", Georgia, Serif !important;
 }

You can also use padding and margin rules:

div.google-visualization-tooltip {
max-width:200px;
padding:5px;
margin:0px;
 }

Consider that the tooltip content is inside ul/li elements, so other css of your site might influence how the tooltips work. If you need further assistance, share a link to the page were you have the map via the contact form on the support tab and we can follow up via email. Greetings, Carlos

Hi, thank you for your interest. Here’s how the map of Malaysia displays: http://cmoreira.net/interactive-world-maps-demo/malaysia/ The codes you can use are the ones listed here: http://en.wikipedia.org/wiki/ISO_3166-2:MY If you have any other question let me know. Greetings, Carlos

Hi! Thank you for your interest in the script. The generator is only able to work with the maps provided by the Google Geochart API, it is not able to work with custom maps. Here’s a screenshot of how the map of Angola looks like. You can either add data to regions or place markers. If you have any other question let me know. Greetings, Carlos

Perfect Thank you, if I color the countries using the Country name or code it will be really easy to do what I need.

Yes, you can. Like this: http://cmoreira.net/interactive-maps-generator/screenshots/world.png

The reason I asked was because I need to dynamically highlight a country based on their selected one and provide some information about it, thanks for the answers

Hi Carlos,

My link is

www.ksa3qar.com

thank you

Thank you for sharing the link. Your HTML page should have this in the <head> in order to render the arabic characters:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Check if it works. Greetings, Carlos

thank you Carlos it works now

Hi! Thank you for your interest. The generator can only display maps of the world, continents or countries. It is not able to display maps of particular cities, I’m sorry. Greetings, Carlos

Hi! The comment system from codecanyon might have stripped your original comment, so I’m not sure what you mean from your example. Can you send me a message via the contact form on the support tab and we can follow up via email? Greetings, Carlos

Carlos, thank you very much for the really astonishingly fast support. everything is working perfect. Greetings!

Hi! Thank you for purchasing the generator. I have never used Weebly, but from the information I have you can use javascript in Weebly pages. The Generator will provide you with javascript code for the map you build, so you can use that code in your page. Hope the info helps, if you have any other question let me know. Greetings, Carlos

Hi! Thank you for your interest. There’s a big limitation to what you need to do: it won’t be possible to have coloured active regions and markers on the same map. This is a limitation of the Google Geochart API, which only allows for one display mode at a time on the map, so it is not possible to have markers on interactive regions. I’m sorry for this limitation. Greetings, Carlos

I understand! But I can have regions with multiple markers in each region, right?

Yes, this you can do. This is an example of the map of Greece but in regions mode: http://cmoreira.net/responsive-interactive-maps/category/greece/ Consider that some of the surrounding countries will be visible. Greetings, Carlos

Hi! You can have a custom action to display HTML content below the map. It should render video player code also. But you might need a bit of javascript knowledge to build the custom action, but this is something I can also help. What region do you need to display and how would the videos appear? Greetings, Carlos

Thank you Carlos, The map i need is the entire world, and the actions are like these: http://goasia.it/ Is it possible to reach a similar result more or less?

Thanks…

The generator alone is not capable of doing it. You’ll need an extra script for the lightbox on your page also, and build a custom action to open iframes with the video inside, for example, from the map. The lightbox plugin should handle videos, the map would only perform the action to trigger the tooltip. This is a WordPress version example, where you can do it with a lightbox plugin and a custom action: http://cmoreira.net/interactive-world-maps-demo/world-map-lightbox-example/ Another difference from the example you sent is that it won’t be possible to have image icons, the maps are only able to display round coloured markers, altough in the tooltip you can include html. So what you need is possible, but some features are not included in the script.

Hi! Thank you for using the generator. The maps are partially responsive. If you leave the width and height values blank, the map will load with the maximum size available of it’s container. It also depends on how it is integrated in your page. If you have trouble implementing the map, send me the link to the page where you have it and I’ll see how it can be improved. Greetings, Carlos

Hi Carlos Many thanks.

You can add this code to the CSS file of your page:

#visualization path:not([fill^="#af1f1b"]) {
    display:none;
}

This should make the shapes not coloured red hidden. Check if it works.

It works but I lost the whole interactivity of the map It look like simple gif, you can see it in the same link

It won’t be possible to replicate the map you have in the example, because it’s not possible to add labels that way, and trying to manipulate the map with css may cause it to be buggy. But try the following css instead:

#visualization path {
    stroke-width:0px;
}

#visualization path[fill^="#af1f1b"] {
    stroke:#ffffff;
    stroke-width:1px;
}
#visualization path[fill^="#af1f1b"]:hover {
    stroke:#000;
    stroke-width:2px;
}

We make all borders 0px and add white borders to the shapes colored red, and make them black on hover. See how it works. Greetings, Carlos

Hi, thank you for your interest. No, it is not capable of displaying both countries simultaneously in the same map with their states/provinces. You would need to have 2 maps on the same page, one for each of the countries. The maps won’t work without internet access as they need access to the Google Geochart API, to generate the maps. If you have any other question let me know. Greetings, Carlos

would you mind showing me an example of canada and its provinces and beside or near it the USA and its states?

Here’s an example created with the WordPress version, but it would be the same for the standalone version: http://cmoreira.net/responsive-interactive-maps/canada-us-map/ You could use extra CSS to try and overlap the maps, but this is how they will look like out of the box.

Hi! I don’t have experience with Prestashop to know to sure, but if there’s a way to place javascript code in the pages, it should work. There are some CMS that strip out javascript content from pages, but usually there’s a workaround. You should search how to add javascript to a prestashop page to see what are the suggestions out there. If it doesn’t work it will be because prestashop might not allow javascript on pages, and not because of the generator code. Hope the information helps. Greetings, Carlos