Google Maps JS API v3 - Simple Multiple Marker with Geolocation

Question

Google Maps JS API v3 - Simple Multiple Marker with Geolocation
Thanks, but I manage with the code below. Fell free to improve it!
1 Part - clean variables

var LocationCenter = null;
var map = null;
var approxCircle = null;
var pinCircle = null;
var marker = null;

2 Part - define locations in Variable

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] 
];  

3 Part - initialize function

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; 

4 Part - set locations

for (i = 0; i < 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);
    }
});

Done, now I load the page and the geolocation is working fine.

Answer 1

Setup the Google Map inside the showPosition function, something like:

var map;
function showPosition(position) {
  var latlon=position.coords.latitude+","+position.coords.longitude;

  x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;    

  map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  });
}

This way the coordinates will be available before you initialize Google Maps. Otherwise you could update the map coordinates within your showPosition function (I'm not sure of the exact code to do that).

Answer 2

Here's how you would re-center the map to the user's current location:

function showPosition(position)
{
  map.setCenter(new google.maps.LatLng(positions.coords.latitude,
      position.coords.longitude));
}

This would allow you to create the map before receiving the user location.