Skip to content

Instantly share code, notes, and snippets.

@pgooch
Created June 10, 2012 22:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pgooch/2907566 to your computer and use it in GitHub Desktop.
Save pgooch/2907566 to your computer and use it in GitHub Desktop.
Google Maps API V3 Javascript Full
// This javascript will create a complex google javascript map with multiple locations selected marked. The
// map will be centered in the middle and zoomed so that all point can be seen. It also stylizes the map
// making it mostly desaturated with bits of orange. More explanation as to how to set this up and change it
// at the url.
// http://fatfolderdesign.com/607/code/google-maps-api-2-the-second-post-multiple-locations-map-styling-and-the-new-geolocation
window.onload = function(){
// Define addresses, define varible for the markers, define marker counter
var addrs = ['219 4th Ave N Seattle Wa 98109','200 2nd Avenue North Seattle Wa 98109','325 5th Ave N Seattle Wa 98109'];
var markers = [];
var marker_num = 0;
// Process each address and get it's lat long
var geocoder = new google.maps.Geocoder();
var center = new google.maps.LatLngBounds();
for(k=0;k<addrs.length;k++){
var addr = addrs[k];
geocoder.geocode({'address':addr},function(res,stat){
if(stat==google.maps.GeocoderStatus.OK){
// add the point to the LatLngBounds to get center point, add point to markers
center.extend(res[0].geometry.location);
markers[marker_num]=res[0].geometry.location;
marker_num++;
// actually display the map and markers, this is only done the last time
if(k==addrs.length){
// actually display the map
var map = new google.maps.Map(document.getElementById("the_map"),{
'center': center.getCenter(),
'zoom': 14,
'streetViewControl': false,
'mapTypeId': google.maps.MapTypeId.ROADMAP, // Also try TERRAIN!
'noClear':true,
});
// go through the markers and display them
for(p=0;p<markers.length;p++){
var mark = markers[p];
new google.maps.Marker({
'icon':'mapmarker.png',
//'animation':google.maps.Animation.DROP, // This lags my computer somethin feirce
'title':addrs[p],
'map': map,
'position': mark,
})
}
// zoom map so all points can be seen
map.fitBounds(center)
// Styleize the map, doing this with the initial map options never seems to work
map.setOptions({styles:[
{
featureType:"all",
elementType:"labels",
stylers:[
{visibility:"off"},
]
},
{
featureType:"all",
elementType:"all",
stylers:[
{saturation:-100}
]
},
{
featureType:"road",
elementType:"all",
stylers:[
{hue:'#FF5500'},
{saturation:75},
{lightness:0}
]
},
{
featureType:"transit",
elementType:"all",
stylers:[
{hue:'#FF5500'},
{saturation:75},
{lightness:0}
]
},
{
featureType:"landscape.man_made",
elementType:"administrative",
stylers:[
{hue:'#FF5500'},
{saturation:25},
{lightness:0}
]
},
{
featureType:"water",
elementType:"geometry",
stylers:[
{visibility:"off"},
{saturation:-100}
]
},
{
featureType: "poi",
stylers: [
{ lightness: 70 }
]
},
]});
}
}else{
console.log('can\'t find address');
}
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment