how can i create a dynamic map that shows our company locations? - javascript

I'm searching for a jquery plugin that allows me to create a dynamic world map and mark the countries that we have a branch there in a different color or put a logo of our company on that country.
I need to have access to that map so when a user clicks on a country i can fire a jquery event.
i think Google has something like this but I'm not sure
Thank you

I'm not quite sure what is your intention. But think you may draw your attention follwings.
http://www.gethifi.com/blog/jquery-vs-flash-for-interactive-map
http://code.google.com/p/jquery-ui-map/
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-basic-example.html
http://jqvmap.com/
http://jquerygeo.com/test/examples/events.html
These are the best I found so far

Related

JS world map plugin with custom regions

I try to display a big world map on my website with Javascript and/or Jquery.
The particularity is that I have to set and draw specific region with a custom list of countries. Exemple :
All the countries with French language (France, Belgium, Switzerland etc...)
All the countries with Spanish language (Spain, Columbia etc...)
Then, the visitors would be able to click on these custom areas to get more info. I found a lot of plugins (Google GeoChart, Mapael, Kartograph, jVectorMap) but no one seems to serve my purpose.
I'd like to avoid HTML image map.
Thanks !
Question is pretty broad but I will try my best:
Your best bet is to use the JavaScript API and embed a map in a div, from there you will have access to Google Maps API.
In terms of your implementation, I guess you could go a couple different ways, you could show 2 different markers for Spanish and French countries with click listeners and more info on the country, or you could get more fancy and draw polygons/polylines. If you go Marker route, it's easier so I would recommend that.

Google / Bing Maps Show All Cities

Trying to find a way without zooming in real close to tell Google or Bing maps to show all cities. Bing does a good job for the most part but still when you zoom in it shows a whole different set of cities.
I have a large monitor this map is going to be sitting on and really need it to show more than just the cities it shows on for example zoom level 8 or 9 on Google. Right now I load in roughly 2900 different locations and mark them on the map so I am trying to do it via the API no just going to maps.google.com
Has anyone come up against this issue and found a fix? Did some searching here as well on Google and maybe looking it up wrong but haven't found anyone looking for something like this.
Hi you can do that by using the Image Map Type API by implementing the mapType interface. Please refer to this link and implement the code in the way given in the example, replacing details with your specifications.
Hope this will help!!
I couldnt find either enough information to get "mapType" to work how I was wanting or it just doesnt do it. The goal was to be at lets say a zoom level of 8 and see every city in the US. I couldnt get any of the suggestions to do that.
Here is what I found that allowed me to do it my self though:
http://google-maps-utility-library-v3.googlecode.com/
Basically I put in a transparent marker so it didnt show up then put info boxes with the names. This actually worked really well for me because I can zoom out 100% and still see all the names. Although at that level they would be overlapping being able to zoom in and out a few ticks and still see everything is great.

Defining Regions in a US Map Using D3.js

I am displaying a very basic map of the US; just the states. What I'm looking for is a good method for dividing the map into regions, with a single hover (all the states in the region change color) and click listener.
So far the best option if found is here: How/Where do I get geoJSON data for states, provinces, and administrative regions of non-US countries?
That seems like a lot more work than it should be. Anyone have suggestions for a better method than importing 50 different shape files, and manually editing them into regions?
This demo is near what you want:
http://bl.ocks.org/mbostock/4060606
http://bl.ocks.org/mbostock/raw/4060606/
http://bl.ocks.org/mbostock/raw/4090846/us.json
What you're going to want to do is manipulate the us.json file; offhand I don't see state names but I see ids, create your regions by merging states in the region into one ID.
try applying your own onclick/hover, if you can't get it, share what you tried and we'll go from there.

Interactive map with regions?

My friend and I are trying to making an interactive map the goes to a new page based on the region clicked. We might try image mapping via dreamweaver but want something with a little more flair/interaction ie: glowing on hover, highlights, ect.
Look into KineticJS. It's an HTML5 Canvas library that allows you to redraw shapes, apply effects, tell when you click on shapes, etc. You can use the on function to go to a new page when you click on it, and there's probably something for the glowing.
I use http://jvectormap.com/
There are maps for lots of countries and you can add your own quite easily.
Here's an example: http://jvectormap.com/examples/world-gdp/
For me imagemapster is one of the best for this task, have multiple functions and a well documented page

Find hidden markers in google maps

So i found one custom map with only zoom buttons in which markers are shown only at 100% zoom. It is not very convenient, so maybe is there some way to show all markers on normal zoom? Some js code which i can add to url or something like that? Оr may be somewhere in the source code are coordinates of markers?
The short answer: No, not really, unless you look in the source :)
The answer that is a bit longer:
As I take it you want to write something in the querystring of the webpage, and then see the markers. This would of course be possible if the one who made the site had made code to do that, but I don't think he would.
The only possibility is to look in the source code of the page and see if you can locate some sort of array that holds the markers. If you find one such array you can use a debug tool to execute your own JS where you run through the array and run .setVisible(true) on all the markers.
This is somewhat of a big hack, and I am sure the owner of the site has a good reason to not show the markers unless you are zoomed in, so I wouldn't mess with it unless it was really important. If you want the full list of markers you should ask the owner of the site.

Categories