Google Maps plot points using Wordpress custom fields

Question

I'm looking to populate a google map with plot points, similar to tvsafety.org/map, but utilizing Wordpress and custom fields/post types. Essentially, I'll create a custom post type and have lat/lng as a custom field within the post.

I'm very familiar with Worpdress and front end dev... but I'm assuming this would involve JSON or custom XML that is a bit over my head.

Could anyone provide some steps or point in the right direction? Ideally I'd like the plot point to contain (on rollover) title, featured image, and permalink, which I'm capable of doing... just not the JSON/XML part :/

Answer 1

I did this just last week:

Javascript first:

   <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 17,
   center: new google.maps.LatLng(-37.792363,144.982302),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
     /*Company Marker*/
    var companyPos = new google.maps.LatLng(-37.792363,144.982302);
    var companyMarker = new google.maps.Marker({
    position: companyPos,
    map: map,
    title:"Company Location"
    });

}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

Then in the HTML:

<div class="googlemap" id="map-canvas"></div>

EDIT: the first lat,lng is where you want the map centered. The second lat,lng is where you want the marker to appear.