I have developed an application that creates a customl overlay for google maps. The basic idea is that a client through an api would send my server a google map object. My application would add the overlay and send the map back to the client.
For the last several days I have been trying to work out how to pass this object to the server without success. I have an api that works with text. So once I am able to pass this object I can change the api.
The object is created in the statement:
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
I intend on passing it via the $.ajax call which is incomplete(and incorrect) in the code which follows as mentioned I have not been able to discover a way to pass it. If anyone can at least point me in the correct direction it would be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Send Map</title>
<style>#map-canvas {height: 500px;width: 500px;}</style>
<script>
function initialize()
{
$longitude = -111.6608;
$latitude = 40.2444;
myLatlng = new google.maps.LatLng($latitude,$longitude);
mapOptions =
{
zoom: 11,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
$.ajax(
{
// incomplete here.. convert map object?
url: "localhost/api/?Map=map",
})
.done(function( Updatedmap )
{
// do stuff
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<h1>Send Map</h1>
<div id="map-canvas"></div>
</body>
</html>