Transit Store test 20141110

by freedawirl

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px;
    border:1px solid red;
}

JavaScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to
// (0,32) to correspond to the base of the flagpole.

function initialize() {
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(30.4, -97.75)
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    setMarkers(map, heb);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var heb = [
    ['<h4>HEB</h4>Store #1 <br/> 2701 E 7th St <br/>(512) 478-7328', 30.25921, -97.71153],
    ['<h4>HEB</h4>Store #2 <br/> 6607 S IH35 <br/>(512) 441-9266', 30.18873, -97.76896],
    ['<h4>HEB</h4>Store #3 <br/> 1000 E. 41st St <br/>(512) 441-9266', 30.29908, -97.72015],
    ['<h4>HEB</h4>Store #4 <br/> 7015 Village Center <br/>(512) 502-8445', 30.35231, -97.75644]
];


function setMarkers(map, locations) {
    
    var image = {
        url: 'http://www.capmetro.org//images/timepoint1-red.gif',
        // This marker is 20 pixels wide by 32 pixels tall.
        size: new google.maps.Size(20, 32),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0, 0),
        // The anchor for this image is the base of the flagpole at 0,32.
        anchor: new google.maps.Point(0, 32)
    };
    // Shapes define the clickable region of the icon.
    // The type defines an HTML &lt;area&gt; element 'poly' which
    // traces out a polygon as a series of X,Y points. The final
    // coordinate closes the poly by connecting to the first
    // coordinate.
    var shape = {
        coords: [1, 1, 1, 20, 18, 20, 18, 1],
        type: 'poly'
    };
    for (var i = 0; i < locations.length; i++) {
        var heb = locations[i];
        var myLatLng = new google.maps.LatLng(heb[1], heb[2]);
        var marker = new google.maps.Marker({
             position: new...