Return to Snippet

Revision: 57814
at June 11, 2012 08:31 by FatFolderDesigner


Initial Code
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');
				}
			});
		}
	}

Initial URL
http://fatfolderdesign.com/607/code/google-maps-api-2-the-second-post-multiple-locations-map-styling-and-the-new-geolocation

Initial Description
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.

Initial Title
Google Maps API V3 Javascript Full Example

Initial Tags
javascript, google, style

Initial Language
JavaScript