Hi,
I am trying to create custom html markers (using DIV elements and
absolute positioning) on a GMap2 object based on current driving
directions.
Initially, everything works fine and the markers are created in the
correct places. However, once I change the 'From' and 'To' fields of
the driving directions object, the coordinates returned to me are very
off from the map.
I also read the previous thread on this issue:
http://groups.google.com/group/Google-Maps-API/browse_thread/thread/2...
and implemented the suggested code, but it does not work for me. I
actually get "NaN' values.
I am posting my code below.
Any help is greatly appreciated :)
Regards
Pushpak
== code starts
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
<title>RouteMapper</title>
<script src="
http://maps.google.com/maps?
file=api&v=2.x&key=ABQIAAAA4Fup_FpJp-dXcgc7qUCbchQq-KFf-
KlVola20L9ZRYbI-wXuhhQTNDn1lJIsSzWI1qfPR-c6yQF3kg"
type="text/javascript"></script>
<script src="
http://gmaps-utility-library.googlecode.com/svn/trunk/
markermanager/release/src/markermanager.js"></script>
<script type="text/javascript">
var map;
var gdir;
var center;
var map_child;
// create placeholders for the maps ...
function createDiv( x, y, width, height, sid )
{
var eDiv=document.createElement("DIV");
eDiv.style.width=width;
eDiv.style.height=height;
eDiv.style.position="absolute";
eDiv.style.backgroundColor="coral";
eDiv.style.left=x;
eDiv.style.top=y;
eDiv.id = "map_parent";
var cDiv = document.createElement("DIV");
cDiv.style.width=width-4;
cDiv.style.height=height-4;
cDiv.style.position="absolute";
cDiv.style.left=2;
cDiv.style.top=2;
cDiv.id = sid;
eDiv.appendChild( cDiv );
return eDiv;
}
// add GMap object to the placeholder
function createMapForID( sid, point, zoom_level )
{
map_child = new GMap2(document.getElementById(sid));
map_child.setCenter( point, zoom_level );
map_child.addOverlay( new GMarker( point ) );
}
// create the base map as background
function createBaseMap()
{
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.enableContinuousZoom();
map.addControl(new GScaleControl());
map.addControl(new GSmallMapControl());
}
// initialize the map object
function initialize()
{
if (GBrowserIsCompatible())
{
createBaseMap();
gdir = new GDirections( map,
document.getElementById("dir_text") );
GEvent.addListener(gdir, "load", gdirLoad);
}
}
// set the directions here
function setDirections( fromAddress, toAddress )
{
gdir.clear();
map.clearOverlays();
gdir.load("from: " + fromAddress + " to: " + toAddress );
}
// Called when the directions are loaded
function gdirLoad()
{
// the directions should have their bounding box defined
var bounds = gdir.getBounds();
var center_LatLng = bounds.getCenter();
map.panTo( center_LatLng );
bounds = map.getBounds();
center_LatLng = bounds.getCenter();
// Now display the number of routes
var numRoutes = gdir.getNumRoutes();
var i;
for( i = 0; i < numRoutes; ++i )
{
var Rt = gdir.getRoute(i);
var j;
for( j = 0; j < Rt.getNumSteps(); ++j )
{
var stp = Rt.getStep(j);
var latLng = stp.getLatLng();
map.addOverlay( new GMarker( latLng ) );
alert( latLng );
// get bottom left (south west) point
var sw =
map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().g etSouthWest(),map.getZoom());
alert( sw );
// get the pixel coordinates
var px_coords = latLng - sw;
// var px_coords =
map.fromContainerPixelToLatLng( latLng );
alert( px_coords );
document.body.appendChild( createDiv( px_coords.x,
px_coords.y, 200, 200, "marker_" + j ) );
}
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()" >
<!-- The Start and End locations -->
<form action="#" onsubmit="setDirections(this.from.value,
this.to.value); return false">
<table>
<tr>
<th align="right">From: </th>
<td><input type="text" size="100" id="fromAddress" name="from"
value="Tempe"/></td>
<th align="right"> To: </th>
<td align="right"><input type="text" size="100" id="toAddress"
name="to" value="Phoenix" /></td>
</tr>
<tr>
<td><input name="submit" type="submit" value="Get Directions!" /></
td>
</tr>
</table>
</form>
<table>
<tr>
<!-- The map image -->
<th><div id="map_canvas" style="width: 1200px; height: 768px"></
div></th>
<!-- The textual directions -->
<th><div id="dir_text" style="width: 500px; height: 768px"></
div></th>
</tr>
</table>
</body>
</html>
