title: google maps loading map on button click - loading markers with another button
body: <p>I'm trying to load markers on the click of a button, but somewhere i'm missing something.  1.  map pulls out and loads with one button click.  2.  markers load with the click of a different button.  here's what i have:</p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
  &lt;title&gt;&lt;/title&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="
      &lt;?php  
          $stylesarray = array("field");  
          echo $stylesarray[mt_rand(0,count($stylesarray)-1)];  
      ?&gt;.css"&gt;
  
  &lt;link rel="shortcut icon" href="images/favicon.ico"&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://maps.googleapis.com/maps/api/js?key=xxx&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt; 
  
  var map = null;
  
  $(document).ready(function(){   
  
      var lat=document.getElementById("latitude");
      var long=document.getElementById("longitude");       
      if (navigator.geolocation){
           navigator.geolocation.getCurrentPosition(showPosition); 
      } 
       function showPosition(position) {
           lat.value=+position.coords.latitude;
           long.value=+position.coords.longitude;
       }   
      });
  
  function load() {
  
  var map = new google.maps.Map(document.getElementById("mapcontainer"), {
      center: new google.maps.LatLng(20,0),
      zoom: 3,
      styles: mapstyle,
      mapTypeControl: false,
      navigationControl: false,
      streetViewControl: false,
      maxZoom: 8,
      minZoom: 3,
      mapTypeId: 'roadmap'
    });
  }
  
  function getmarkers(){
    downloadUrl("markers.php", function(data) {
      //alert ("it works");
      var xml = data.responseXML;
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i &lt; markers.length; i++) {
        var id = markers[i].getAttribute("id");
        var info = markers[i].getAttribute("info");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("latitude")),
            parseFloat(markers[i].getAttribute("longitude")));
        var date = markers[i].getAttribute("date");
        var html =  "&lt;div id='tooltip'&gt;&lt;div id='tiptext'&gt;" + info
                    + "&lt;div id='number'&gt;" + id + "&lt;/div&gt;"
                    + "&lt;div id='date'&gt;" + date + "&lt;/div&gt;" 
                    +  "&lt;/div&gt;&lt;/div&gt;";
        var marker = new google.maps.Marker({
          map: map,
          position: point,
          icon: 'images/mapicon.png'
  
        });         
        createTooltip(marker, html);
      }
    });
  
  &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  &lt;div id="mapcontainer"&gt;
  &lt;form&gt;
      &lt;input type="button" id="map" onClick="load()"&gt;&lt;/input&gt;  
  &lt;/form&gt;
  &lt;form&gt; 
      &lt;input type="button" onClick="getmarkers()"&gt;&lt;/input&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>xml sample:</p>
  
  <pre><code>&lt;markers&gt;
  &lt;marker id="330" info="blahblah" date="2012-10-03" latitude="20.00" longitude="-81.00"/&gt;
  &lt;/markers&gt;
  </code></pre>