Google Maps

8 comments

 

Review of jQuery plugins for Google APIs - including maps, charts, spell check:

http://www.reynoldsftw.com/2009/03/8-jquery-plugins-that-utilize-google-apis/

 

Google map jQuery plugin (mo0re advanced - multiple maps on one page)

http://code.google.com/p/jmaps/ 

 

Code samples &  guides

MarkerClusterer: A Solution to the Too Many Markers Problem

 

Panoramio API & MarkerManager = Instant Photos Layer!

 


Code sample:

<script>
		
var map, marker, infowindow;
var latFieldName = "MapLatitude";
var longFieldName = "MapLongitude";
var fullBounds;
function initialize() {
	var mapOptions = {
		center: new google.maps.LatLng(-36.8484597, 174.76333150000005),          // show NZ
		zoom: 16,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

	infowindow = new google.maps.InfoWindow();
	marker = new google.maps.Marker({
		map: map, draggable: true
	});

	if ($("#"+latFieldName).val() == "") {
		//SetLocAuto();
		//mapOptions.center = new google.maps.LatLng(V$("MapLatitude"), V$("MapLongitude"));
		//mapOptions.zoom = 12;
	} else {
		// admin has already set it
				
		var centre = new google.maps.LatLng(V$("MapLatitude"), V$("MapLongitude"));
		map.setCenter(centre);
		marker.setPosition(centre);
		fullBounds = new google.maps.LatLngBounds();
		setMarkers(centre);
		map.fitBounds(fullBounds);
	}

	//var input = document.getElementById('LatLongSearch');
	//var autocomplete = new google.maps.places.Autocomplete(input);          //, {types: [ 'museum', 'park', 'place_of_worship', 'shopping_mall', 'stadium', 'subway_station', 'train_station', 'zoo', 'colloquial_area', 'locality', 'neighborhood', 'point_of_interest', 'sublocality' ]}
	//$("#LatLongSearch").keypress(function (event) {
	//	if (event.which == 13) {    // make enter key just search map and stop it from submitting form
	//		event.preventDefault();
	//	}
	//}); // bias towards current map view area
	//autocomplete.bindTo('bounds', map);

	if ($("#"+latFieldName).val() != "-36.8484597" && $("#"+latFieldName).val() != "") {
		//	marker.setPosition(mapOptions.center);
	}

	google.maps.event.addListener(marker, 'position_changed', function () {
		$("#"+latFieldName).val(marker.getPosition().lat());
		$("#"+longFieldName).val(marker.getPosition().lng());
	});

	google.maps.event.addListener(marker, 'dragend', function () {
		// when user drags marker
		$("#PosManualCheck")[0].checked = true;
		SetLocManual();
	});

	//google.maps.event.addListener(autocomplete, 'place_changed', function () {
	//	infowindow.close();
	//	var place = autocomplete.getPlace();
	//	if (place.geometry.viewport) {
	//		map.fitBounds(place.geometry.viewport);
	//	} else {
	//		map.setCenter(place.geometry.location);
	//		map.setZoom(16);
	//	}
	//
	//	marker.setPosition(place.geometry.location);
	//	$("#"+latFieldName).val(place.geometry.location.lat());
	//	$("#"+longFieldName).val(place.geometry.location.lng());
	//	var address = '';
	//	if (place.address_components) {
	//		address = [(place.address_components[0] &&
	//			place.address_components[0].short_name || ''),
	//			(place.address_components[1] &&
	//				place.address_components[1].short_name || ''),
	//			(place.address_components[2] &&
	//				place.address_components[2].short_name || '')
	//		].join(' ');
	//	}
	//
	//	infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
	//	infowindow.open(map, marker);
	//});
}
function getBuildingInfo(dropObj){
	var rID = $(dropObj).val();
	if(rID==""){
		$('#map_canvas').hide();
		return ;
	}
	var qs = "rID=" + escape(rID);// + "&crypttok=" + escape(crypttok) + "";
	var url = websiteBaseUrl + "Admin/EventAdmin/BuildingInfo";
	$.ajax({
		type: "POST",
		url: url,
		data: qs,
		success: function (json) {
					
			$('#map_canvas').show();
			$("#MapLatitude").val(json.Lat);
			$("#MapLongitude").val(json.Lon);
			var centre = new google.maps.LatLng(V$("MapLatitude"), V$("MapLongitude"));
			map.setCenter(centre);
			marker.setPosition(centre);
					
		},
		error: function (msg) {
			alert("call failed: " + msg.responseText);
			//prompt('copy this',url+'?'+qs)
		}
	});
		
}
function setMarkers(centre) { 
	$('.hiddeninfo li').each(function (idx,sch){
		var lat = $(sch).attr('data-lat');
		var lon = $(sch).attr('data-lon');
		var scID = $(sch).attr('data-id');
		var name = $(sch).html();

		var posn = new google.maps.LatLng(lat,lon);
		fullBounds.extend(posn);
		var img = [websiteBaseUrl+'images/ico-green.png',websiteBaseUrl+'images/ico-red.png',websiteBaseUrl+'images/ico-yellow.png'];
		var markerImage = new google.maps.MarkerImage(img[idx%3],
			new google.maps.Size(42,42),
			new google.maps.Point(0, 0),
			new google.maps.Point(21, 21));
		var marker = new google.maps.Marker({
			position: posn,
			title:name,
			icon:markerImage,
			ID:scID
		});
		

		// To add the marker to the map, call setMap();
		marker.setMap(map);
	});
			
};

	$(document).ready(function () {
		if($("#MapLatitude").length>0 && $("#MapLatitude").val()!=''){ 
			google.maps.event.addDomListener(window, 'load', initialize);
		}
	});
</script>

html:

					<div id="map_canvas"></div>		
					<div style="<%=(!Security.IsDevAccess)?"display:none":""%>">						DEV:															 <br>
					Model.InitialMapLatitude  <%= new Forms.TextField("MapLatitude",Model.InitialMapLatitude+"",true)%>		 <br>
					Model.InitialMapLongitude <%= new Forms.TextField("MapLongitude",Model.InitialMapLongitude+"",true)%>
					</div>

marker info:
DEV: Markers:
					<ul class="hiddeninfo">
						<% foreach (var building in record.Buildings) {
							%><li data-lat="<%=building.MapLatitude %>" data-lon="<%=building.MapLongitude %>" data-id="<%=building.ID %>"><%=building.Name %></li><%
						} %>
					</ul>

Comments


Leave a Comment