pioneer pioneer - 1 month ago 13
Javascript Question

google maps - centering on user location

I have a google map with hundreds of markers. I would like the map to center on the users location - preferably with a button click. Currently, I have it centering on page load but with one problem - it clears out all of the markers when it centers on location. I assume this is because of how I'm calling the script. The map container's id is 'map4'.

How can I make this script work without clearing the existing markers? Any help would be greatly appreciated.

<script>
var map; // Google map object

// Initialize and display a google map
function Init()
{
// HTML5/W3C Geolocation
if ( navigator.geolocation )
navigator.geolocation.getCurrentPosition( UserLocation );
// Default to Sherman Oaks
else
ShowLocation( 38.8951, -77.0367, "Sherman Oaks, CA" );
}

// Callback function for asynchronous call to HTML5 geolocation
function UserLocation( position )
{
ShowLocation( position.coords.latitude, position.coords.longitude, "This is your Location" );
}

// Display a map centered at the specified coordinate with a marker and InfoWindow.
function ShowLocation( lat, lng, title )
{
// Create a Google coordinate object for where to center the map
var latlng = new google.maps.LatLng( lat, lng );

// Map options for how to display the Google map
var mapOptions = { zoom: 12, center: latlng };

// Show the Google map in the div with the attribute id 'map-canvas'.
map = new google.maps.Map(document.getElementById('map4'), mapOptions);

// Place a Google Marker at the same location as the map center
// When you hover over the marker, it will display the title
var marker = new google.maps.Marker( {
position: latlng,
map: map,
title: title
});

// Create an InfoWindow for the marker
var contentString = "<b>" + title + "</b>"; // HTML text to display in the InfoWindow
var infowindow = new google.maps.InfoWindow( { content: contentString } );

// Set event to display the InfoWindow anchored to the marker when the marker is clicked.
google.maps.event.addListener( marker, 'click', function() { infowindow.open( map, marker ); });
}

// Call the method 'Init()' to display the google map when the web page is displayed ( load event )
google.maps.event.addDomListener( window, 'load', Init );

</script>

Answer

If I understand you correctly, it seems you already have created a map, populated with markers AND THEN you want to center the VERY SAME map. If that's the case, your ShowLocation() function needs to be modified. The reason is that this line

map = new google.maps.Map(document.getElementById('map4'), mapOptions);

creates a fresh new instance of map (replacing any existing map in that container, if the provided map container is the same).

So your problem is that you are creating and centering a new map, instead of just centering the old one.

Just modify the centering function to work with an existing map:

function ShowLocation( lat, lng, title , map)
{
    // Create a Google coordinate object for where to center the map
    var latlng = new google.maps.LatLng( lat, lng);    

    //Working with existing map instead of creating a new one
    map.setCenter(latlng);
    map.setZoom(12);

    // Place a Google Marker at the same location as the map center 
    // When you hover over the marker, it will display the title
    var marker = new google.maps.Marker( { 
        position: latlng,     
        map: map,      
        title: title
    });

    // Create an InfoWindow for the marker
    var contentString = "<b>" + title + "</b>"; // HTML text to display in the InfoWindow
    var infowindow = new google.maps.InfoWindow( { content: contentString } );

    // Set event to display the InfoWindow anchored to the marker when the marker is clicked.
    google.maps.event.addListener( marker, 'click', function() { infowindow.open( map, marker ); });
}

And when calling the ShowLocation function, it's 4th parameter would be the google.maps.Map object you created when adding the markers. You cannot reference map only by knowing it's containing element's id, you need the reference for it.

Comments