Google Maps Instructions

  1. Copy _Scripts folder from hueyproductions1/Google Maps and paste in site root
  2. Add the following to the <head>

    <link href="_Scripts/complete_map.css" rel="stylesheet" type="text/css">
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAOKnu90z0gzDCb9zTOsXFlBS-k4hhsOOlT-AhduylaOi7Z33KqBSxUjRB0OjKDxGGinUdxaRD36UHFA" type="text/javascript"></script>
    <script type="text/javascript" src="_Scripts/jquery.js"></script>
    <script type="text/javascript" src="_Scripts/jquery.jmap.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#map').jmap('init', {
    mapCenter:[30.282046907018522, -98.91763687133789],
    mapShowjMapIcon: false,
    mapZoom: 12,
    mapEnableScaleControl: true,
    mapControlSize: 'large'
    });
    $('#map').jmap('addMarker', {
    pointLatLng:[30.287721, -98.958382],
    pointHTML: '<h2>Der Stall B&B</h2><p>68 Cedar Hills Dr.</p>'
    });

    $('#getDir').submit(function(){
    $('#directions').empty();
    $('#map').jmap("searchDirections", {
    toAddress: '68 Cedar Hills Drive, Fredericksburg, TX',
    fromAddress: $('#from').val(),
    directionsPanel:"directions"
    });
    return false;
    });

    }); // end ready()
    </script>
  3. Get a Google Maps API key from http://code.google.com/apis/maps/signup.html
  4. Copy/Paste API key into line three above in step 2 (key=ABQIAAAAOKnu90z0gzDCb9zTOsXFlBS-k4hhsOOlT-AhduylaOi7Z33KqBSxUjRB0OjKDxGGinUdxaRD36UHFA")
  5. Add the following where you want the map

    <div id="map"></div>
    <div id="getDirections">
    <form name="directions" id="getDir" method="post" action="">
    <p class="bold">Directions to: </p>
    <p class="bold">From: <input name="from" type="text" id="from" size="40" /></p>
    <p></p>
    <p>
    <input type="submit" name="submit" id="submit" value="Get Directions" />
    </p>
    </form>
    </div>
    <div id="directions"></div>
  6. Enter inn's name in fourth line in above form (<p class="bold">Directions to: </p>)
  7. Go to http://maps.google.com and search for location you want.
  8. Copy the following into browser's location bar:  javascript:void(prompt('',gApplication.getMap().getCenter()));
  9. Copy latitude and longitude values (NOTE: The code opens a dialog box that includes a pair of parentheses surrounding the longitude and latitude values. Don't copy the parentheses - you only need the numbers.)
  10. Paste lat-long into lines 10 and 16 in step two's script.
  11. Replace Der Stall's data in line 17 in step two to your inn's name and address.

*Note* Map size is in the CSS