I am using JVectorMap to display the map of United States and wanted to place markers on 5 cities. I have their Longitude and Latitude in my code but it seems to not work. I see the marker in the upper left hand corner of the map. I am not sure why they are positioned there, instead of on the cities I have in my code?
If anyone can provide some insight as to why the markers are not working properly:
See my code here: http://jsfiddle.net/xtian/fqqGs/
JS:
$(function(){
$('#map').vectorMap({
map: 'us_aea_en',
zoomOnScroll: false,
hoverOpacity: 0.7,
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
markers: [
{latLng: [41.50, 87.37], name: 'Chicago'},
{latLng: [32.46, 96.46], name: 'Dallas'},
{latLng: [36.10, 115.12], name: 'Las Vegas'},
{latLng: [34.3, 118.15], name: 'Los Angeles'},
{latLng: [40.43, 74.00], name: 'New York City'}
]
});
});
You just provided wrong coordinates. Longitude should be negative:
markers: [
{latLng: [41.50, -87.37], name: 'Chicago'},
{latLng: [32.46, -96.46], name: 'Dallas'},
{latLng: [36.10, -115.12], name: 'Las Vegas'},
{latLng: [34.3, -118.15], name: 'Los Angeles'},
{latLng: [40.43, -74.00], name: 'New York City'}
]
Here is an updated demo.