Google Maps API : Display location with Marker and Description

Question

I am working on my own website, and everything is starting to come together except for the buttons. Currently, when the location button is clicked, a JS alert message appears. This is unacceptable! What I would like to do instead is have a little box appear with the Google Maps map of some location with a pin. This could be a jpg or png for all it matters. The important thing is to have it appear and have an X to close it in the top right. To see what I mean, go to my site: http://andreihetman.com and click on the location pin.

Answer 1

Check out the Google Maps API Documentation relative to markers

Anyway here is a sample:

 function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

NOTE: By reading the API you will find out even how to add a detail box.