Leaflet Marker Popups

by J. Albert Bowden

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css">
<div id="map" style="width:500px;height:400px;"></div>
<a id="high-school-york" href="#">York High School</a><br>
<a id="high-school-smithfield" href="#">Smithfield High School</a><br>
<a id="high-school-poquoson" href="#">Poquoson High School</a>
<a id="high-school-tabb" href="#nogo">Tabb High School<a>
<a id="high-school-bruton" href="#nogo">Bruton High School</a>
<a id="high-school-grafton" href="#nogo">Grafton High School</a>

CSS

a{display:block}

JavaScript

var map = L.map('map').setView([37.079833, -76.40625], 10);
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmLayer = new L.TileLayer(osmUrl, {
        maxZoom: 19,
        attribution: 'Map data © OpenStreetMap contributors'
    });
map.addLayer(osmLayer);
    var markers = [];
    var marker1 = L.marker([37.204028, -76.5005],{title:"high-school-york"}).addTo(map).bindPopup("York High School");
    markers.push(marker1);
    var marker2 = L.marker([36.945556, -76.599917],{title:"high-school-smithfield"}).addTo(map).bindPopup("Smithfield High School");
    markers.push(marker2);
    var marker3 = L.marker([37.128722, -76.379694],{title:"high-school-poquoson"}).addTo(map).bindPopup("Poquoson High School");
    markers.push(marker3);
    var marker4 = L.marker([37.310639, -76.691556],{title:"high-school-bruton"}).addTo(map).bindPopup("Bruton High School");
markers.push(marker4);
var marker5 = L.marker([37.123889, -76.433889],{title:"high-school-tabb"}).addTo(map).bindPopup("Tabb High School");
markers.push(marker5);
var marker6 = L.marker([37.163694, -76.469833],{title:"high-school-grafton"}).addTo(map).bindPopup("Grafton High School");
markers.push(marker6);
    
    function markerFunction(id){
        for (var i in markers){
            var markerID = markers[i].options.title;
            if (markerID == id){
                markers[i].openPopup();
            };
        }
    }
    
    $("a").click(function(){
        markerFunction($(this)[0].id);
    });