title: Google Maps JS API v3 - Simple Multiple Marker with Geolocation
body: <p>Google Maps JS API v3 - Simple Multiple Marker with Geolocation<br>
  Thanks, but I manage with the code below. Fell free to improve it!<br>
  <strong>1 Part</strong> - clean variables</p>
  
  <pre><code>var LocationCenter = null;
  var map = null;
  var approxCircle = null;
  var pinCircle = null;
  var marker = null;
  </code></pre>
  
  <p><strong>2 Part</strong> - define locations in Variable</p>
  
  <pre><code>var locations = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.923036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 151.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 1] 
  ];  
  </code></pre>
  
  <p><strong>3 Part</strong> - initialize function</p>
  
  <pre><code>function Newinitialize(lat,lng) {
      LocationCenter = new google.maps.LatLng(lat,lng);
      var myOptions = {
          zoom: 14,
          center: LocationCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
  map = new google.maps.Map(document.getElementById("map_canvasRoast"), myOptions);
  
  marker = new google.maps.Marker({
      position: LocationCenter,
      map: map,
      animation: google.maps.Animation.DROP
      });
  
  approxCircle = {
    strokeColor: "#008595",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#008595",
    fillOpacity: 0.25,
    map: map,
    center: LocationCenter,
    radius: 50,
    clickable : false 
  };
  
  pinCircle = new google.maps.Circle(approxCircle);
  var infowindow = new google.maps.InfoWindow();
  var marker, i; 
  </code></pre>
  
  <p><strong>4 Part</strong> - set locations</p>
  
  <pre><code>for (i = 0; i &lt; locations.length; i++) {   
    marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
    }); 
  
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
        infowindow.setContent(locations[i][0]); 
        infowindow.open(map, marker); 
      } 
    })(marker, i)); 
  }   
  
  };
  
  $('.goMap').live('click', function() {
      if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position){
          Newinitialize(position.coords.latitude,position.coords.longitude);
      });
      }else{
          Newinitialize(52.636161,-1.133065);
      }
  });
  </code></pre>
  
  <p>Done, now I load the page and the geolocation is working fine.</p>