We help IT Professionals succeed at work.

Recenter map after form is resubmitted

When the user opens the map, I want to show the entire country.  After they select an area and hit the "submit" button, I want the map to center on the new searched location and increase the zoom 10 10.  I am passing the searchmarkerlat and searchmarkerlng,  but cant get the map to change the center.
NPSx.php
phpsqlajax-genxmlx.php
Comment
Watch Question

Most Valuable Expert 2011
Top Expert 2016
Commented:
Where is the problem occurring?  There is so much code here that I don't even know where to start debugging!  Maybe if you can isolate the issue a  little bit we can drill down into the right place.

Author

Commented:
When the map opens, it sets the center to the middle of the US and the zoom to 4

var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(37.7597, -100.0183),
        zoom: 4,
        mapTypeId: 'roadmap'
      })

Open in new window

Whwn the search box is changed, it changes the zoom to 10 an posts the lat and lng to searcmarkerlat and searchmarkerlng from the new marker:

 
var input = /** @type {HTMLInputElement} */(
		  document.getElementById('pac-input'));
	  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

	  var searchBox = new google.maps.places.SearchBox(
		/** @type {HTMLInputElement} */(input));      
	
	  google.maps.event.addListener(searchBox, 'places_changed', function() {
      var places = searchBox.getPlaces();

      if (places.length == 0) {
      return;
      }
      
	  for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
      }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
		size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(10, 10)
      };

      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });

	  var searchmarker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });
	  
      markers.push(searchmarker);

      bounds.extend(place.geometry.location);
    }

	var searchmarkerlat = searchmarker.getPosition().lat();
	var searchmarkerlng = searchmarker.getPosition().lng();	
    
	
	$.post( "NPSx.php", { searchmarkerlat: searchmarkerlat} );
	$.post( "NPSx.php", { searchmarkerlng: searchmarkerlng} );
	
	map.fitBounds(bounds);
	map.setZoom(10);
}); 

Open in new window


When when the user checks boxes in the legend clicks on the "submit" button, it posts them the selections to through PHP and refreshes the page.

When the page is refreshed, I want the map to have a new center of searchmarkerlat and searchmarkerlng.  I was hoping I could do something like:

If (searched == 'true) {

var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(searchmakerlat, searchmarkerlng)),
        zoom: 10,
        mapTypeId: 'roadmap'
      });
else {
var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(37.7597, -100.0183),
        zoom: 4,
        mapTypeId: 'roadmap'
      });

}

Open in new window


The map wont load if I do this.

Author

Commented:
I managed to make progress, but when it recenters the map in rwanda africa!

var markers = [];
	 var  searchedmarkerlat = [];
	 var  searchedmarkerlat = [];
 
 
    var searchedmarkerlat = '<?php echo $searchmarkerlat; ?>';	 
	var searchedmarkerlng = '<?php echo $searchmarkerlng; ?>';
	
	if ((typeof searchedmarkerlat) == 'undefined') {
    var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(37.7597, -100.0183),
        zoom: 4,
        mapTypeId: 'roadmap'
      });
	} else {
    var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng((searchedmarkerlat), (searchedmarkerlng)),
        zoom: 10,
        mapTypeId: 'roadmap'
      });
	}

Open in new window

Most Valuable Expert 2011
Top Expert 2016

Commented:
recenters the map in rwanda
You have my sympathy!  I've had maps that kept going to Portugal, too.

I haven't worked with the Google Maps API since V2, so please give me a little time to do some research.  I'll see if I can come back with a code snippet that will zoom and recenter correctly.
Most Valuable Expert 2011
Top Expert 2016

Commented:
See if this helps get things pointed in the right direction.  You can click to zoom in and center, or right-click to zoom out and center.  If you turn on the dev tools, you can see the geocode and zoom level in the console.
http://iconoun.com/demo/temp_timothypowell.html

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">

function initialize() {
  var zum = 4;
  var latLng = new google.maps.LatLng(37.7597,-100.0183);
  var mapOptions = {
    center: latLng,
    zoom: zum,
    mapTypeId: 'roadmap'
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  google.maps.event.addListener(map, 'click', function( event ){
    lat = event.latLng.lat().toFixed(4);
    lng = event.latLng.lng().toFixed(4);
    geo = lat + ',' + lng;
    zum = zum + 1;
    console.log("Zoom: " + zum + " GeoCode: " + geo);
    latLng = new google.maps.LatLng(lat, lng);
    map.setZoom(zum);
    map.setCenter(latLng);
  });

  google.maps.event.addListener(map, 'rightclick', function( event ){
    lat = event.latLng.lat().toFixed(4);
    lng = event.latLng.lng().toFixed(4);
    geo = lat + ',' + lng;
    zum = zum - 1;
    console.log("Zoom: " + zum + " GeoCode: " + geo);
    latLng = new google.maps.LatLng(lat, lng);
    map.setZoom(zum);
    map.setCenter(latLng);
  });

};

google.maps.event.addDomListener(window, 'load', initialize);

</script>

<title>Google Map with Right / Left Click</title>
</head>
<body>
<p>http://www.experts-exchange.com/Programming/Languages/Scripting/PHP/Q_28626266.html</p>

<div id="map-canvas"></div>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

</body>
</html>

Open in new window

Most Valuable Expert 2011
Top Expert 2016

Commented:
Thanks for the points.  For anyone coming across this Q in the future, a working code example is at this link:
http://www.experts-exchange.com/Programming/Languages/Scripting/PHP/Q_28626266.html#a40637233