Basic Google Map API integration into site. Developed to work with FlexiContent location data. Extract coordinates from GoogleMaps image link, extracting Lat and Long into an array, and then init map.

CSS

#map_canvas {
    width: 400px;
    height: 400px;
    margin: 0 auto;
}
.info {
    display:none;
}

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
<ul class="maplist">
    <li class="markers">
        <div class="info">
            <p>You Are Here</p>
            <p>HTML5 GeoLocate</p> <a href="http://maps.google.com/maps?q=46.0956254,-64.75581160000002" target="_blank">Directions</a>

        </div>
    </li>
    <li class="markers">
        <div class="info">
            <p>Title of Location</p>
            <p>Description of location here</p> <a href="http://maps.google.com/maps?q=46.0956254,-64.75581160000002" target="_blank">Directions</a>

        </div>
    </li>
    <li class="markers">
        <div class="info">
            <p>Title of Location</p>
            <p>Description of location here</p> <a href="http://maps.google.com/maps?q=45.0956254,-63.75581160000002" target="_blank">Directions</a>

        </div>
    </li>
    <li class="markers">
        <div class="info">
            <p>Title of Location</p>
            <p>Description of location here</p> <a href="http://maps.google.com/maps?q=47.0956254,-65.75581160000002" target="_blank">Directions</a>

        </div>
    </li>
</ul>

Javascript

var markers = [];

getLocation();

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(addUser);
    } else {
        alert("Geolocation is not supported by this browser.");
        parseItem();
    }
}

function addUser(position) {
    $(".maplist").append("<li class='markers'><div class='info'><p>You Are Here</p><p>HTML5 GeoLocate Features</p><a href='http://maps.google.com/maps?q=" + position.coords.latitude + "," + position.coords.longitude + "' target='_blank'></a></div></li>");
    parseItem();
}

function parseItem() {
    $('ul li').each(function (i, val) {
        var title = $(val).find(".info").html().trim();
        console.log(title);
        var item = $(val).find("a").attr("href");
        var cont = item.split("=");
        var vals = {
            lat: (function () {
                var lat = cont[1].split(",");
                return lat[0];
            }()),
            long: (function () {
                var long = cont[1].split(",");
                return long[1];
            }())
        }
        markers.push([title, vals.lat, vals.long]);
        console.log(vals);
    });
    initializeMaps();
}

function initializeMaps() {
    var myOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    var bounds = new google.maps.LatLngBounds();

    for (i = 0; i < markers.length; i++) {
        var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(pos);
        marker = new google.maps.Marker({
            position: pos,
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
    map.fitBounds(bounds);
}