JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/13053178/causing-links-to-pan-to-and-open-makers-in-map

by Alex Azuero

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="locations">
    <h3>
        <a href="javascript:google.maps.event.trigger(gmarkers['Location 1'],'click');" class="button3">Location 1</a>
        <a href="javascript:google.maps.event.trigger(gmarkers['Location 2'],'click');" class="button3">Location 2</a>
        <a href="javascript:google.maps.event.trigger(gmarkers['Location 3'],'click');" class="button3">Location 3</a>
    </h3>
</div>

<br>

<div id="map"/>

CSS

body {margin:0.5em}

#map {
    width:95%; height:85%; 
    position:absolute; 
    border:1px solid red;
}

.button3 {
    background:#eee;
    text-decoration:none;
    color:#333;
    font-family:Arial, sans-serif;
    font-size:11px;
    font-weight:bold;
    padding:3px 5px;
    border:1px solid #aaa;
    border-radius:3px;
    cursor:default;
}

.button3:hover {
    background-color:#f2f2f2;
    border-color:#888;
    box-shadow:0 0 2px #ccc;
}

.button3:active {
    vertical-align:-1px;
}

JavaScript

var locations = [
    [
    "Location 1",
     "215 West Girard Avenue 19123",
    "39.9695601",
    "-75.1395161"
    ],
    [
    "Location 2",
    "5360 Old York Road 19141",
    "40.034038",
    "-75.145223"
    ],
    [
    "Location 3",
    "1350 W Girard Avenue 19123",
    "39.9713524",
    "-75.1590360"
    ]
    ];

gmarkers = [];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(39.9995601, -75.1395161),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();


function createMarker(latlng, html) {
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
    return marker;
}

for (var i = 0; i < locations.length; i++) {
    gmarkers[locations[i][0]] =
    createMarker(new google.maps.LatLng(locations[i][2], locations[i][3]), locations[i][0] + "<br>" + locations[i][1]);
}