How to read and save map view (lat/lng/zoom)

[BradSiegfried]

Hi Chris,

I’d like to preserve a map view for a user’s future sessions. I can initially set the view from variables stored in user meta but I don’t know how to capture the right data when a user makes any changes to the map view, such as moving the map center or zoom level on the front end.

I will be displaying a map on a page accessible only to logged in users. I would like to save the necessary variables in user meta to recreate the same map view (map center and zoom) in future sessions for that user.

I saw your mention of using Javascript in http://mappresspro.com/forums/reply/reply-to-load-map-centered-around-a-users-location-3 so I’m hopeful there’s a way to do what I want.

Can you start me down the path to accomplishing this?

Specifically, I would appreciate any pointers as to 1) where the relevant variables can be found and 2) how to determine that a map view change event has occurred, requiring the new data to be saved.

Thanks.

Brad

[Chris]

Hi,

This is really outside the scope of the plugin, so I can only offer some suggestions. But I think I can answer your questions:

1. You can detect a map move using javascript. You’ll need the map’s name – the default is ‘mapp0’ for the first map on the page and ‘mapp1’, etc. for subsequent maps. Or, you can use the ‘name’ parameter in the shortcode. Then use this code to get a handle to the Google Map object:
var map = mapp0.getMap();

2. With the map handle you can register an event when the map bounds change (i.e. on a pan or zoom event). For example:

jQuery(document).ready(function() {
	var map = mapp0.getMap();
	google.maps.event.addListenerOnce(map, "bounds_changed", function() {
		// Your code here, for example:
		var center = map.getCenter();
		var zoom = map.getZoom();
	});
});

If you save the new center/zoom as metadata, you can probably use PHP to output a mappress shortcode with saved center/zoom.

For reference, the Google Maps API documentation is here:
https://developers.google.com/maps/documentation/javascript/reference

[BradSiegfried]

Hi Chris,

I was able to learn enough to get and save the map information to user meta successfully. Thank you!

My last hurdle is getting the actual map to redisplay via AJAX. When I initially create and display the map in my shortcode, I do something along the lines of
$result = $mymap->display();
return($result);

This works fine as anticipated on the initial display. However, when the user subsequently changes a map setting and initiates the AJAX request I am having trouble returning the new $result. My AJAX callback function calls my shortcode function directly and appears to receive the map display returned as above. The AJAX callback function then returns the map display along with some other data via JSON to my jQuery success function like this:

$mydata = json_encode($mydata);
header(“Content-type: application/json”);
wp_die($mydata);

I then try to replace the old map with the new map like this:

success: function(data) {
jQuery(“#mymap”).html(data.mymap);

This is where I see the problem. The resulting map is blank. mapp0_layout is there along with associated child divs, but the mapp0 map canvas is empty.

Can you suggest where I may be going wrong?

Brad

[Chris]

Hi,

The plugin isn’t really meant to be used this way, so I can’t say if it’ll work, but one thing you might try is calling the map’s display() method, for example:

mapp0.display();

You can see an example of that call in the regular map output script.

[Author]

Posts