asked on

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

ASKER CERTIFIED SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TimothyPowell

ASKER

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.

TimothyPowell

ASKER

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

Ray Paseur

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 Paseur

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 Paseur

Thanks for the points. For anyone coming across this Q in the future, a working code example is at this link:
https://www.experts-exchange.com/questions/28626266/Recenter-map-after-form-is-resubmitted.html?anchorAnswerId=40637233#a40637233