xml - Google Maps plot points using Wordpress custom fields -

i'm looking populate google map plot points, similar tvsafety.org/map, utilizing wordpress , custom fields/post types. essentially, i'll create custom post type , have lat/lng custom field within post.

i'm familiar worpdress , front end dev... i'm assuming involve json or custom xml bit on head.

could provide steps or point in right direction? ideally i'd plot point contain (on rollover) title, featured image, , permalink, i'm capable of doing... not json/xml part :/

i did 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 html:

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

edit: first lat,lng want map centered. second lat,lng want marker appear.