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
TimothyPowellAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
TimothyPowellAuthor 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.
TimothyPowellAuthor 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

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Ray PaseurCommented:
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.
Ray PaseurCommented:
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

Ray PaseurCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.