Google Maps

 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
 
<script>
function initialize() {
	var myLatlng = new google.maps.LatLng(37.79093,-122.385834);
	var mapOptions = {
		zoom: 12,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
 
	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
	var contentString = '<div id="maps-content">'+
		'<div id="siteNotice">'+
		'</div>'+
		'<h1 id="firstHeading" class="firstHeading">San Francisco</h1>'+
		'<div id="bodyContent">'+
		'<p>Golden Gate Bridge<br>' +
		'</p>'+
		'</div>'+
		'</div>';
 
	var infowindow = new google.maps.InfoWindow({
		content: contentString,
		maxWidth: 400
	});
 
	var marker = new google.maps.Marker({
		position: myLatlng,
		map: map,
		title: 'San Francisco'
	});
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	});
}
 
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width: 100%; height: 500px;"></div>