Code

Discussion on Interactive Maps Generator

Discussion on Interactive Maps Generator

Cart 2,944 sales

cmoreira supports this item

Supported

This author's response time can be up to 2 business days.

200 comments found.

Excuse me, this script is also compatible with mobile versions? I tried the demo with my cell and I can not see the maps, there is an error message! Thanks

Yes, I tried it with an old version of Android. However, the map should be seen by all versions of Android, the map should be compatible with all the mobile versions, or those (like me) have an old version of Android as you can see the map? A visitor to my site certainly does not update the version of Android just to see the map! :) There are no fixes?

Unfortunately, since old Android versions are not compatible with the SVG vector format, there is not fix. Sorry for this limitation.

OK. Thanks

Hello , it is a great works.

but I have a question. now we can see the text when the mouse move over on the bubble .

how can I display the text without move the mouse on it ?

Hi! Thank you for using the generator. Currently it is not possible to display the tooltip without the hover. The only thing possible is to replace the round markers with text, but this requires some changes to the output code. Here’s an example of how it would look like: http://cmoreira.net/responsive-interactive-maps/europe-map-text-labels/ if you want to implement this, write me a message via the contact form on my profile and I’ll give you instructions on what to change on the code. Greetings, Carlos

What a pity ! I just want to show the city name beside the bubble. do you have plan to support this feature?

The maps are generated using the Google Geochart API, so it also depends on google to support this. It would be indeed a great feature. Hopefully they will support this at same stage so I can include this in my product. Sorry for this current limitation. Greetings, Carlos

Hi Carlos This is a great interactive map. I have a shopify website and I am trying to put the embed code into the html of the welcome page but I can’t get the map to show up. Can you please help? Thank you Pat

If your page is going to run on https you should change the google api url to https also. Maybe you’re logged in on Chrome and that’s why the page loads in https?

When i removed the s from https I saw the map in Chrome. Hurray! I guess the problem was viewing the website as an administrator. BUT I still can’t get the latest version of the map with about 25 cities to show. Only the earlier version with Toronto. We are getting closer though!!

You should put the code for the new map there so I can check. But I might only be able to check it tomorrow (almost 3AM local time for me at the moment). Leave me a message via the contact form on my profile and we can follow up via email. Cheers, Carlos

Is is possible to connect couple regions like europe and asia… I need region eurasia any solutions ?

subcontinents is not good for me because i need about 10 active countries at eurasia…

Hi! Did you consider inserting the data for each country you need to group, and giving it the same tooltip info and colour? This would give the illusion of a new group. The only builtin regions are the ones available, it is not possible to create new ones, since the maps are generated using the Google Geochart API. But If I understood correctly what you need, you should be able to do it including individual entries for the countries you need to group. If I misunderstood what you need let me know. Greetings, Carlos

Hi,

thanks for this great generator. It worked like a charme so far.

One question though, how can I display a mouse hand instead of a cursor when hovering over objects that have action values and lead to an URL?

Showing a hand would make it easier for the user to see which countries are actually linked.

Thanks,

Lucas

Hi Lucas! Thank you for using the generator! You can achieve that adding some extra CSS to the page where you placed the map code. You’ll need for example a css rule with an advanced selector to target the shapes that do not have the inactive color. Something like:
#visualization path:not([fill^="#f5f5f5"]):hover {
cursor:pointer;
}
If your inactive color is not #f5f5f5 change it to reflect it. Check if it works! Greetings, Carlos

How can I show a portion of a country? For example i am looking to create a map for the Southeast United States.

Hi! Thank you for using the generator. There isn’t any builtin option to achieve this, since the maps are generated using the Google Geochart API and they don’t have options to allow this. The alternative is to use CSS to ‘hide’ the unwanted parts. You can see some examples for the WordPress version here: http://cmoreira.net/interactive-world-maps-demo/how-to-change-default-map-crop/ For the Generator however the CSS will be slighly different. Here’s an example:
#visualization {
    overflow:hidden;
    width:300px;
    height:200px;
}

#visualization > div {
    margin-left:-300px;
    margin-top:-150px;
}
Hope it helps and I’m sorry for this limitation. Greetings, Carlos

Hello and thanks for this great piece of software!

I would like, however, to ask if it’s possible to generate a map of France divided by departments, not only provinces. Is it possible or are we “stuck” with the ones pre loaded with the application?

Cheers, Arky

Hi Arky Thank you for using the generator. The generator uses Google Geochart API code to generate the maps, so we are dependent on the maps the API provide. Unfortunately they only provide a map of France divided by provinces, they don’t have any other map of France, so it is not possible at the moment to generate a map of France divided by departments. I’m sorry for this limitation. If you have any other question let me know. Greetings, Carlos

Hi, a few things.. 1.) I’d like to make the map center with my page 2.) Is there any way I can cut the slack off the top and bottom of the map?

Thanks!

Hi! To center your map, you should place the div with id=’visualization’ in a centered container, or add css to target that div to make it center. Something like:
#visualization {
margin:0 auto;
width:600px; /* Change to your map width */ 
}

To ‘crop’ the map, the generator doesn’t have any option to do that, but you can also use css. Here are some tips: http://cmoreira.net/interactive-world-maps-demo/how-to-change-default-map-crop/ That page describes the process for the WordPress version, but for the generator it will be the same thing, but you should target the #visualization div and not #map_canvas. Hope it helps! Greetings, Carlos

Is it possible to zoom in on a map. When I select Americas I see also Asia, Europa, Africa. etc I only want Americas on the map.

Hi. The plugin uses the maps provided by the Google Geochart API, and unfortunately it is not possible to use custom maps and the API doesn’t allow you to change the projections available. One possible solution would be to hide the unnecessary parts with css: http://cmoreira.net/interactive-world-maps-demo/how-to-change-default-map-crop/ But this would affect the responsive behaviour. I’m sorry for this limitation. Greetings, Carlos

Hi

I would gladly pay the price for this joomla tool, but I do not know if I an make a map of Romania with interactiv regions and pinned towns with informations.

Please enlighten me if I can do this

Best regards Peter Net

Hi, thank you for your interest. Here’s a quick map of Romania created with this technology: http://cmoreira.net/responsive-interactive-maps/romania-regions-map/

Just some more information to be clear: 1) this is not a Joomla specific tool. The generator will allow you to generate javascript code that you can apply to your site, Joomla sites also, if they allow you to place javascript code in your content. 2) It is not possible to create interactive regions and markers on the same map. You can only or use regions mode or markers mode.

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

I’m very interested in this product, but I have a few questions.

  1. I’m using Joomla 3.2. Is there Joomla plugin for this?
  2. I would like to have a world view, that is interactive and zoomable, like normal google maps. The user should be able to zoom down to the country and state level. Is this possible?
  3. Thanks for your help!

Hi! Thank you for your interest! Unfortunately there is not a Joomla plugin version of this and the maps generated don’t have a zoom in/out function. I’m sorry for this limitations. If you have any other question, let me know. Greetings, Carlos

Hello, great plugin but I haven’t been able to get it to work on my particular site yet. In Chrome I get a “undefined is not a function” error, FF I get “this.each is not a function” and in ie I get a “Object doesn’t support property or method ‘each’ error and the map does not display. Test page here: http://sparse.cc/distributors

Thanks for any input

Hi! Thank you for using the generator. It seems there is no data for the map to render, and therefore the error. Does the map have any data? Does the preview display the map correctly? You can write me a message via the contact form on my profile and we can follow up via email. Greetings, Carlos

How can add another mapping options. Say counties from my state as provided by Google here:

https://www.google.com/fusiontables/DataSource?docid=1Yx076g0HFD2aeya8T0jBi_w1UuEYj3b06zaXXA#rows:id=1

There an easy way to modify the script to recognize this data?

Hi! The Generator itself is not capable of doing this because the API used doesn’t support county resolution for US. You would need to hack into the Google Geochart API and develop custom code, not use the Generator. There’s a long thread on the official google foruns explaining how this could be done. But this is outside the generator capabilities, you would have to handle the API code directly. Sorry for the limitation, hope the link helps. Greetings, Carlos

Hi Carlos I’m looking for a US map where I can assign a link to every state, it is that possible? if so, do you have an example where I can see the code or how the links are assigned to each state?

Thanks man!

Hi! Yes, this is possible. Here’s an example of how the map will look like in the generator: http://cmoreira.net/responsive-interactive-maps/wp-content/uploads/2014/04/Screen-Shot-2014-04-10-at-11.27.17.png (CA is the only state linked int he example). And here are some examples of published maps: http://cmoreira.net/responsive-interactive-maps/category/usa/page/2/

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

would i be able to create a radius marker with this plugin?......... I’m creating a site that does home deliveries and i need a map to highlight a specify radius area to show delivery coverage area.

Hi! Thank you for your interest. You can place a round maker somewhere and control the color and size. But I’m not sure it’s the best solution as a radius indication, since the maps don’t provide location labels. I all depends on how you will want it to display. If you have any other question let me know. greetings, Carlos

Hi there,

Found this blog post about FancyBox integration. What is the call for the new FancyBox2 API?

http://cmoreira.net/interactive-world-maps-demo/world-map-lightbox-example/

Thanks

Hi! From what I see in the documentation for the new fancybox, something like this should work:
jQuery.fancybox.open([
    {
        href : ivalue[selectedRegion],
        type: 'image'
    }   
]);
If it’s an image we want to open. I haven’t tested, but followed this example here: http://jsfiddle.net/STgGM/ Hope it helps! Greetings, Carlos

Thanks Carlos, one other thing, is there any way to change the marker into an image rather than a CSS color?

Unfortunately not in the current version. The maps are generated using the Google Geochart API and currently they only provide options to display the rounded marker. Sorry for this limitation.

Hi, does the plugin have satellite/landscape maps as well? Or just svg/stylistic maps? Thanks!

Hi! Thank you for your interest. The plugin only has the svg vector maps. Greetings, Carlos

hey, is world + usa with states on the same map possible?

and is onclick=localstorage value us-az for example without hardcoding each place separately possible?

Hi! Unfortunately it is not possible to have the US in a world map divided by states.

You would still need to include some type of value for each state, so the data row for that region is not empty.

The generator uses the Google Geochart API so you can also check what could be possible.

Sorry for this limitations. Greetings, Carlos

That’s okay cus i realized it’s better like this anyway! :D

yea i know i’ll try to figure something fun out with country codes and jquery

Very nice script. I have a question before I purchase. I would like to make a map of a single US state with markers for each town/city. When the markers are rolled over there would a tool tip and then when clicked, go to a link. Is this possible? Also, I’m guessing the generator gives code to embed on a page, is that correct? Thanks

Hi! Thank you for your interest. Check this simple example with the WordPress version: http://cmoreira.net/responsive-interactive-maps/california-map-with-marker/ You can have a tooltip with 2 lines of info and the markers can be clickable, yes. The above example will take you to wikipedia page. And Yes, the generator will give you code to embed on a page. If you have any other question, let me know. Greetings, Carlos

Hi,

Can I insert break line (
or \n – I’d tried this ones but none worked ) on tooltip?

How can I display tooltip info on page (like examples)

Thanks in advance.

btw. Excellent code !!!! very useful and easy to use.

cheers!

Hi! The generator doesn’t have html compatible tooltips yet, so it’s not possible to have linebreaks by default. However, since the Google Geochart API used to generate the maps now supports html content in the tooltips, we can change the output code. So you can include a br tag in the tooltip field, and then, on the output code you have to change a few lines. See this example: http://jsfiddle.net/cmoreira/bJqGD/ If you see, the code will reference ‘html’ twice. You’ll have to place those lines also in your output code. Replace:
data.addColumn({type:'string', role:'tooltip'});
With:
data.addColumn({type:'string', role:'tooltip', p:{html:true}});
And
tooltip: {textStyle: {color: '#444444'}, trigger:'focus'}
with
tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: true}
. Hopefully I’ll be able to update the generator at some point, to include this as an option, rather than users have to make this modification manually – like I did for the WordPress version. Hope the information helps! Greetings, Carlos
by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey