Leaflet GeoJSON and Markers Example

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet GeoJSON Example</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
	<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing" type="text/javascript"></script> 
	<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
	<style type="text/css">
	    .leaflet-map-pane {
    z-index: 1 !important;
}

.leaflet-google-layer {
    z-index: 0 !important;
}
		</style>

</head>
<body>
	<div id="map" style="width: 600px; height: 400px"></div>

	
	

	<script>
	

		var map = L.map('map');

		var hospitals =[
{
    "type": "Feature",
    "properties": {
        "Name": "Khoo Teck Puat Hospital",
        "Status": "Operational"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [103.8384,1.424034]
    }
}
,
{
    "type": "Feature",
    "properties": {
        "Name": "Yishun Community Hospital",
        "Status": "Operational"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [103.837783,1.4237883]
    }
}
,
{
    "type": "Feature",
    "properties": {
        "Name": "Woodlands Medical Centre",
        "Status": "Operational"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [103.772335,1.4463388]
    }
}
,
{
    "type": "Feature",
    "properties": {
        "Name": "Singapore General Hospital",
        "Status": "Operational"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [103.836171,1.282769]
    }
}
,
{
    "type": "Feature",
    "properties": {
        "Name": "KK Women's and Children's Hospital",
        "Status": "Operational"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [103.846944,1.310556]
    }
}
,
{
    "type": "Feature",
    "properties": {
        "Name": "Tan Tock Seng Hospital",
        "Status": "Operational"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [103.845944,1.321611]
    }
}
,
{
    "type": "Feature",
    "properties": {
        "Name": "Institute of Mental Health",
        "Status": "Operational"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [103.881667,1.378333]
    }
}
,
{
    "type": "Feature",
    "properties": {
        "Name": "The Salvation Army Peacehaven Nursing Home",
        "Status": "Operational"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [103.9616977,1.3538414]
    }
}
,
{
    "type": "Feature",
    "properties": {
        "Name": "National University Hospital",
        "Status": "Operational"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [103.7828,1.2951]
    }
}];


	function onEachFeature(feature, layer) {
			var popupContent = "<p> "+feature.properties.Name + "</p>";

			if (feature.properties && feature.properties.popupContent) {
				popupContent += feature.properties.popupContent;
			}

			layer.bindPopup(popupContent);
		}


	map.setView([1.3571318,103.8080804], 11);

	 mapLink = 
							'<a href="http://openstreetmap.org">OpenStreetMap</a>';
						L.tileLayer(
							'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
							attribution: '&copy; ' + mapLink + ' Contributors',
							maxZoom: 18,
							}).addTo(map);
					
	
	  L.geoJson(hospitals,{onEachFeature: onEachFeature}).addTo(map);


	</script>
</body>
</html>

// Code goes here

/* Styles go here */