Front End Usage - HighwayofLife/PyroStreams-Geocoder-Field-Type GitHub Wiki

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map,
markers = [];

function initialize() {
  /* Call a default starting location to center the map */
  var latlng = new google.maps.LatLng(46.40040890, -117.00118890);
  var myOptions = {
    zoom: 6,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  /* Create the map using #map_canvas */
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function markLocation(data) {
  if (!data.location) {
    return;
  }

  var marker = new google.maps.Marker({
    title: data.title,
    map: map,
    clickable: true,
    position: new google.maps.LatLng(data.location[0], data.location[1])
  });

  markers.push(marker);

  /* Customize the basic content area to your needs */
  var content = '<div class="map_info"><h3>'+data.title+'</h3><h5>'+data.date+'</h5><p>'+data.city+', '+data.state+'<br />'+data.info+'</p></div>';

  var infowindow = new google.maps.InfoWindow({
    content: content
  });

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

/* When the document is ready, initialize */
$(document).ready(function() {
  initialize()
});
</script>

<div id="map_canvas" style="width: 100%; height:600px;"></div>

<script type="text/javascript">
$(document).ready(function() {
  markLocation({
    title:    "Marker title",
    location: [43.9133315, -115.887741],
    city:     "Centerville",
    state:    "ID",
    date:     "September 1, 2012",
    info:     'Other important information here. <a href="http://example.com/some/page">More info</a>'
  });

  markLocation({
    title:    "Marker title",
    location: [49.836823, -119.63105],
    city:     "Westbank",
    state:    "BC",
    date:     "September 4, 2012",
    info:     'Other important information here. <a href="http://example.com/some/page">More info</a>'
  });
});
</script>