Skip to content

Instantly share code, notes, and snippets.

@technosailor
Last active March 11, 2016 19:38
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save technosailor/5298174 to your computer and use it in GitHub Desktop.
Save technosailor/5298174 to your computer and use it in GitHub Desktop.
Integration of Google Maps with N number of coordinates mapped to a Letter pin Sprite. This code killed me for days before I got it right. Offering it up to anyone who can use it. Support neither offered nor implied. YMMV.
var pin_sprite = '{"A":{"x":0,"y":0},"B":{"x":0,"y":84},"C":{"x":0,"y":168},"D":{"x":0,"y":252},"E":{"x":0,"y":336},"F":{"x":0,"y":420},"G":{"x":0,"y":504},"H":{"x":0,"y":588},"I":{"x":0,"y":672},"J":{"x":0,"y":756},"K":{"x":0,"y":840},"L":{"x":0,"y":924},"M":{"x":0,"y":1008},"N":{"x":0,"y":1092},"O":{"x":0,"y":1176},"P":{"x":0,"y":1260},"Q":{"x":0,"y":1344},"R":{"x":0,"y":1428},"S":{"x":0,"y":1512},"T":{"x":0,"y":1596},"U":{"x":0,"y":1680},"V":{"x":0,"y":1764},"W":{"x":0,"y":1848},"X":{"x":0,"y":1932},"Y":{"x":70,"y":0},"Z":{"x":70,"y":84}}';
pin_sprite = jQuery.parseJSON(pin_sprite);
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
setMarkers(map, offices);
}
var bounds = new google.maps.LatLngBounds();
bounds.getCenter();
var offices = [
['Sheraton Inner Harbor', 39.28585, -76.61311, 'C' ],
['Peabody Court Hotel', 39.29721, -76.61712, 'G' ],
['W Hotel DC',38.90098,-77.02858, 'L']
];
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var office = locations[i];
var originx = pin_sprite[office['3']].x;
var originy = pin_sprite[office['3']].y;
var image = {
url: 'http://f.cl.ly/items/2H442l3B0M3u213X1k2t/gmaps-pins.png',
size: new google.maps.Size(20,34),
origin: new google.maps.Point(originx,originy),
anchor: new google.maps.Point(0,34)
};
var latlng = new google.maps.LatLng(office[1],office[2]);
var marker = new google.maps.Marker({
position: latlng,
icon: image,
title: office[0],
map: map
});
bounds.extend(latlng);
map.fitBounds(bounds);
bounds.getCenter();
}
}
jQuery(document).ready(function(){
initialize();
});
@technosailor
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment