hadifarnoud · June 15, 2014 10:22
diff --git a/google-map-api.html b/google-map-api.html
 <!doctype html>
 <html>
 <head>
 <script type="text/javascript"
 	src="https://maps.googleapis.com/maps/api/js?sensor=false">
 </script>
 <meta charset="UTF-8">
 <title>Example Google Map</title>
 </head>
 <body>
 <div id="map-canvas" style="height:400px; width:600px;"></div>
 <script>
 	function initialise() {
 		
 		var myLatlng = new google.maps.LatLng(53.068165,-4.076803); // Add the coordinates
 		var mapOptions = {
 			zoom: 8, // The initial zoom level when your map loads (0-20)
 			minZoom: 6, // Minimum zoom level allowed (0-20)
 			maxZoom: 17, // Maximum soom level allowed (0-20)
 			zoomControl:true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
 			zoomControlOptions: {
  				style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
 			},
 			center: myLatlng, // Centre the Map to our coordinates variable
 			mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
 			scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
 			// All of the below are set to true by default, so simply remove if set to true:
 			panControl:false, // Set to false to disable
 			mapTypeControl:false, // Disable Map/Satellite switch
 			scaleControl:false, // Set to false to hide scale
 			streetViewControl:false, // Set to disable to hide street view
 			overviewMapControl:false, // Set to false to remove overview control
 			rotateControl:false // Set to false to disable rotate control
 	  	}
 		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Render our map within the empty div
 		
 		var image = new google.maps.MarkerImage("https://www.creare.co.uk/wp-content/uploads/2013/08/marker.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
 			
 		var marker = new google.maps.Marker({ // Set the marker
 			position: myLatlng, // Position marker to coordinates
 			icon:image, //use our image as the marker
 			map: map, // assign the market to our map variable
 			title: 'Click to visit our company on Google Places' // Marker ALT Text
 		});
 		
 		// 	google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker 
 		//		window.location='http://www.snowdonrailway.co.uk/shop_and_cafe.php'; // URL to Link Marker to (i.e Google Places Listing)
 		// 	});
 		
 		var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow
  			content:"<h3>Snowdown Summit Cafe</h3><p>Railway Drive-through available.</p>" // HTML contents of the InfoWindow
  		});

 		google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker
  			infowindow.open(map,marker); // Open our InfoWindow
  		});
 		
 		google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(myLatlng); }); // Keeps the Pin Central when resizing the browser on responsive sites
 	}
 	google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded. 
 </script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?sensor=false">
	</script>
	<meta charset="UTF-8">
	<title>Example Google Map</title>
	</head>
	<body>
	<div id="map-canvas" style="height:400px; width:600px;"></div>
	<script>
	function initialise() {

	var myLatlng = new google.maps.LatLng(53.068165,-4.076803); // Add the coordinates
	var mapOptions = {
	zoom: 8, // The initial zoom level when your map loads (0-20)
	minZoom: 6, // Minimum zoom level allowed (0-20)
	maxZoom: 17, // Maximum soom level allowed (0-20)
	zoomControl:true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
	zoomControlOptions: {
	style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
	},
	center: myLatlng, // Centre the Map to our coordinates variable
	mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
	scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
	// All of the below are set to true by default, so simply remove if set to true:
	panControl:false, // Set to false to disable
	mapTypeControl:false, // Disable Map/Satellite switch
	scaleControl:false, // Set to false to hide scale
	streetViewControl:false, // Set to disable to hide street view
	overviewMapControl:false, // Set to false to remove overview control
	rotateControl:false // Set to false to disable rotate control
	}
	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Render our map within the empty div

	var image = new google.maps.MarkerImage("https://www.creare.co.uk/wp-content/uploads/2013/08/marker.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.

	var marker = new google.maps.Marker({ // Set the marker
	position: myLatlng, // Position marker to coordinates
	icon:image, //use our image as the marker
	map: map, // assign the market to our map variable
	title: 'Click to visit our company on Google Places' // Marker ALT Text
	});

	// google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker
	// window.location='http://www.snowdonrailway.co.uk/shop_and_cafe.php'; // URL to Link Marker to (i.e Google Places Listing)
	// });

	var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow
	content:"<h3>Snowdown Summit Cafe</h3><p>Railway Drive-through available.</p>" // HTML contents of the InfoWindow
	});

	google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker
	infowindow.open(map,marker); // Open our InfoWindow
	});

	google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(myLatlng); }); // Keeps the Pin Central when resizing the browser on responsive sites
	}
	google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
	</script>
	</body>
	</html>