the.s.brom the.s.brom - 1 month ago 16
Javascript Question

Incorrect Marker Placement on Google Maps

Working on a map with multiple markers. For some reason all the markers are off by the same amount to the west of where the lat/long pair should be placing them.

See in action here: http://91chapel.arraydev.net/neighbourhood/

I have double checked long / lat on a number of markers, and it's definitely not a simple situation of lat long being wrong. Every marker is off to the west by the same amount. I don't think this is an anchor point issue, as the markers stay where they are when you zoom.

$(document).ready(function(){
var locations = [
['Gabriola Island Ferry Terminal', 49.166102, -123.930666, 'transportation'],
['Newcastle Island Ferry',49.171953, -123.937345, 'transportation'],
['Harbour Air Seaplanes', 49.168181, -123.935382, 'transportation'],
['Budget Car & Truck Rental', 49.1669641,-123.9366057, 'transportation'],
['Prideaux Exchange Transit Terminal', 49.1642815,-123.945626, 'transportation'],
['RBC Bank', 49.1665076,-123.9398008, 'financial services'],
['Scotiabank', 49.1652551,-123.9394705, 'financial services'],
['CIBC', 49.1644153,-123.9350475, 'financial services'],
['TD Canada Trust', 49.1644469,-123.9495123, 'financial services'],
['Coastal Community Credit Union', 49.1660125,-123.938417, 'financial services'],
['Old City Station Pub', 49.1668432,-123.9387767, 'nightlife'],
['Corner Lounge', 49.1664115,-123.9393155, 'nightlife'],
['The Queen’s', 49.1635335,-123.937801, 'nightlife'],
['Koncept Nightclub', 49.1658795,-123.939573, 'nightlife'],
['Evolve Nightclub', 49.1657932,-123.9398943, 'nightlife'],
['Level Two Dance Lounge', 49.1662832,-123.9400326, 'nightlife'],
['Man Lee Asian Grocery', 49.1649712,-123.9401409, 'shopping'],
['Thrifty Foods', 49.1642655,-123.9349063, 'shopping'],
['London Drugs', 49.1641759,-123.934868, 'shopping'],
['Port Place Mall', 49.1640022,-123.9358513, 'shopping'],
['Charlie’s Closet', 49.1650488,-123.9444328, 'shopping'],
['Funk Your Fashion', 49.1654641,-123.9392265, 'shopping'],
['NYLA', 49.1667314,-123.9391723, 'shopping'],
['Catwalk Fashions', 49.1646325,-123.9390433, 'shopping'],
['Cayo Fashions', 49.1651339,-123.9391418, 'shopping'],
['Flying Fish Kitchen & Gift', 49.1665315,-123.9390107, 'shopping'],
['McLean’s Specialty Foods', 49.1654499,-123.9444083, 'shopping'],
['Quintessential', 49.1652513,-123.9388586, 'shopping'],
['Coast Bastion', 49.1666265,-123.938257, 'accommodations'],
['Best Western Dorchester', 49.1672955,-123.938629, 'accommodations'],
['Painted Turtle Guesthouse', 49.1664115,-123.9393155, 'accommodations'],
['The Bee’s Knees Cafe', 49.1669051,-123.9431893, 'cafes & restaurants'],
['Perkins Coffee', 49.1668764,-123.9391885, 'cafes & restaurants'],
['2 Chefs Affair', 49.1659377,-123.9392269, 'cafes & restaurants'],
['Food Koma', 49.1662298,-123.9392601, 'cafes & restaurants'],
['Sukkho Thai', 49.1659195,-123.9390989, 'cafes & restaurants'],
['Mon Petit Choux', 49.1659685,-123.9388903, 'cafes & restaurants'],
['Gabriel’s Cafe', 49.1650715,-123.939197, 'cafes & restaurants'],
['Noodlebox', 49.1649529,-123.9360184, 'cafes & restaurants'],
['Mambo Gourmet Pizza', 49.1636568,-123.938287, 'cafes & restaurants'],
['Gina’s Mexican Cafe', 49.169037,-123.9411112, 'cafes & restaurants'],
['Asteras Greek Cuisine', 49.1644365,-123.9433279, 'cafes & restaurants'],
['Bistro Taiyo Japanese', 49.1649613,-123.9437265, 'cafes & restaurants'],
['La Stella Trattoria', 49.1651965,-123.943475, 'cafes & restaurants'],
['Bocca Cafe', 49.1651885,-123.944584, 'cafes & restaurants'],
['Pho A Dong Vietnamese', 49.1655617,-123.9446795, 'cafes & restaurants'],
['Trollers Fish & Chips', 49.1673115,-123.936761, 'cafes & restaurants'],
['Power House Living Foods', 49.1667119,-123.9391507, 'cafes & restaurants'],
['Nest Bistro', 49.1687063,-123.9411687, 'cafes & restaurants'],
['Fiddlehead Bistro', 49.1636625,-123.943215, 'cafes & restaurants'],
['Sushi Nana', 49.1637405,-123.9382261, 'cafes & restaurants'],
['White Sails Brewery', 49.1700116,-123.9419486, 'cafes & restaurants'],
['Nanaimo Art Gallery', 49.1663609,-123.9388647, 'recreation'],
['The Port Theatre', 49.1658812,-123.9376841, 'recreation'],
['Vancouver Island Regional Library', 49.1642062,-123.9502371, 'recreation'],
['Nanaimo Museum', 49.1660304,-123.9382392, 'recreation'],
['Casino Nanaimo', 49.1646693,-123.9370797, 'recreation'],
['Harbourfront & The Bastion', 49.1670554,-123.9378173, 'recreation'],
['Maffeo Sutton Park', 49.1708949,-123.9408113, 'recreation'],
['Breakout Nanaimo Escape Rooms', 49.165459,-123.9418323, 'recreation'],
['OmTown Yoga', 49.1650315,-123.9393309, 'recreation'],
['Discovery Community College', 49.1630353,-123.9400086, 'other'],
['Sprott Shaw College', 49.1680883,-123.9418664, 'other'],
['H&R Block', 49.1679903,-123.9416508, 'other'],
['Canada Post', 49.1676141,-123.9406346, 'other'],
['Service Canada', 49.1684978,-123.9387041, 'other']
];
var markerColours = {'transportation':'#7ac1a3','financial services':'#dec978','nightlife':'#204572','shopping':'#d5797c','cafes & restaurants':'#06a3b6','recreation':'#e98547','accommodations':'#96b6c5','other':'#c7a285'};

var infowindow = new google.maps.InfoWindow();
var marker, i;
var icon = {
path: 'M 0, 0 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0',
fillColor: '#7ac1c3',
fillOpacity: 1,
scale: 1,
strokeColor: 'white',
strokeWeight: 1,
anchor: new google.maps.Point(0,0)
};
function buildMap(locations, marker, filter){
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(49.1677015,-123.940314),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (i = 0; i < locations.length; i++) {
if(typeof filter === 'undefined' || locations[i][3]==filter){
icon.fillColor = markerColours[locations[i][3]];
marker = new google.maps.Marker({
//icon: icon,
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

}
}
buildMap(locations,marker);
$('.filter li').click(function(){
var filter = $(this).text().toLowerCase();
console.log(filter);
buildMap(locations,marker,filter);
})


});

Answer Source

It really looks like you provided the wrong coordinates. I tried the coordinates you provided in the first line 49.1661015,-123.932839: and used Google maps. The location is exactly the same as where your marker is.

The correct coordinates should be more like 49.166147, -123.930763