Created
June 10, 2012 22:40
-
-
Save pgooch/2907566 to your computer and use it in GitHub Desktop.
Google Maps API V3 Javascript Full
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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