How to find the nearest address on a Google Map using it's API.
There are at least 2 steps in order to achieve this goal.
Let's say that you ask to geocode an address.
The map returns the exact location and centers the map on the address.
Then you ask for a direction from point A, which is the SW bound of the viewport, to point B, which is your address, to point C which is the NE bound of the viewport.
So, now you could know the last intersection before the address and also the first intersection after the address.
If you want all the intersection you can repeat the direction search with different routes, let's say NW to SE, N to S, E to W. and so on...
It might not be accurate, but is a workaround.
Wednesday, March 31, 2010
Friday, March 26, 2010
Geocoding the stops on a route with Google Maps API
Many times we need to know the coordinates of each stop on a route.
Below is an example page which does that.
The functionality is commented inside the 'script' tag.
A live sample can be found here.
Below is an example page which does that.
The functionality is commented inside the 'script' tag.
<!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Geocoding Directions</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAnQbookkle8hxu22fQ6NbQhQjkNs2bAs_9Kr1eym0RcuS7Ni0VhQw6LZcRdCzOojjVAt8h8h2T0G6YA" type="text/javascript"></script>
<style type="text/css">
body {
font-family: Verdana, Arial, sans serif;
font-size: 11px;
margin: 2px;
}
table.directions th {
background-color:#EEEEEE;
}
img {
color: #000000;
}
</style>
<script type="text/javascript">
google.load('maps' , '2');
var map;
var gdir;
var geocoder = null;
function OnLoad() {
// declare our map
map = new GMap2(document.getElementById("map_canvas"));
// setting up the GDirections to load our directions
gdir = new GDirections(map, document.getElementById("directions"));
// we add an event listener to call a function when the response is ready from Google
GEvent.addListener(gdir, "load", onGDirectionsLoad);
// we request for directions
gdir.load("from: San Francisco to: San Mateo to: Mountain View");
}
function onGDirectionsLoad(){
// we make a loop to get the coordinates for all the cities
for (i=0;i<2;i++){
// 'route' will be the shortest route found by Google
var route = gdir.getRoute(i);
// 'nx' will be the starting coordinate for each segment
var nx=route.getStep(0).getLatLng();
// we now write on the page the coordinates found
document.getElementById('mydata').innerHTML+=nx+'<br/>';
}
// finally we add the final destination coordinate
document.getElementById('mydata').innerHTML+=route.getStep(1).getLatLng()+'<br/>';
}
google.setOnLoadCallback(OnLoad);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<h2>San Francisco - San Mateo - Mountain View</h2>
<br/>
<table class="directions">
<tr>
<td valign="top"> <b>Formatted Directions</b>
<div id="directions" style="width: 275px"></div>
<td>
<td valign="top"><b>Map</b>
<div id="map_canvas" style="width: 310px; height: 400px"></div><br/>
<td>
<td valign="top"><b>Coordinates for each city</b><div id="mydata" style="font-size:11px"></div></td>
</tr>
</table>
</body>
</html>
A live sample can be found here.
Tuesday, March 23, 2010
Google Maps, Raphael JS and browsers
The Google Maps renders shapes in svg format for most of the browsers and vml format for Internet Explorer. It seems that IE9 will adopt the svg format finally.
The use of these shapes is useful when you want to draw not standard paths or images.
Which format is better I don't know, I use Mozilla Firefox and Google Chrome most of the time, but Google Maps + vml + Raphael format works better, in this case in Internet Explorer.
In the map below there is a nice ball (click on the marker to see it).
If you are viewing this page in a browser with svg support you will notice that there is a invisible layer on the map close to the ball which doesn't let you handle (drag) the map.
But if you are viewing the page with in a browser with vml support you will notice that you can handle everything around the ball.
The code to handle the ball:
Click on the marker or the ball to animate the ball.
The use of these shapes is useful when you want to draw not standard paths or images.
Which format is better I don't know, I use Mozilla Firefox and Google Chrome most of the time, but Google Maps + vml + Raphael format works better, in this case in Internet Explorer.
In the map below there is a nice ball (click on the marker to see it).
If you are viewing this page in a browser with svg support you will notice that there is a invisible layer on the map close to the ball which doesn't let you handle (drag) the map.
But if you are viewing the page with in a browser with vml support you will notice that you can handle everything around the ball.
The code to handle the ball:
var mymark=new GMarker(latlng);
map.addOverlay(mymark);
GEvent.addListener(mymark, 'click', function(){
x.show();
x.animate({cx: 100}, 2000, "elastic");
x.click(reset);
function reset(){
x.animate({cx: 50}, 2000, "elastic");
}
});
Click on the marker or the ball to animate the ball.
Monday, March 8, 2010
Mixing Google Maps with Raphael JS (I)
Raphael JS is a JavaScript library built to simplify working with vector graphics (for the web) .
This library is useful in Google Maps when you want to do something that simple html is not enough.
What to do:
1) First, create a webpage:
2) Load the scripts in the head of the page:
3) Add page elements inside the body tag:
4) Create the script that do the rest of the work in the head:
5) After doing all above and changing the API key you are ready to test it on your server. It should look like this:
This library is useful in Google Maps when you want to do something that simple html is not enough.
What to do:
1) First, create a webpage:
<!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>
<title></title>
</head>
<body>
</body>
</html>
2) Load the scripts in the head of the page:
<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAnQbookkle8hxu22fQ6NbQhQNPFMnb_xkSQN8CfaH-8v21m5ByRQZ6mgEZeD_g20a0Wrd6MNogUCNZQ" type="text/javascript"></script>
3) Add page elements inside the body tag:
<div id="map_canvas" style="width: 500px; height: 300px"></div>
4) Create the script that do the rest of the work in the head:
<script type="text/javascript" charset="utf-8">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(44, 11), 1);
var details=document.createElement('div');
details.innerHTML="<div id='r_canvas' style=' -moz-user-select: none; position: absolute; right: 0px; bottom: 0px;' class='gmnoprint'></div>"
document.getElementById('map_canvas').appendChild(details);
raph();
}
}
function raph() {
var r = Raphael("r_canvas", 100, 100);
var sq = 1;
var color = Raphael.getColor();
(function (a, c) {
r.rect(0,0, 100,100).attr({"stroke-width":0,fill: "#000", opacity: 0.5}).mouseover(changerad)})(sq, "black");
r.text(50,50,"mouse over me").attr({"fill":"yellow","font-size":12});
}
Raphael.getColor.reset();
function changerad() {
this.animate({cx: 50, r: 40}, 1000, "bounce");
}
</script>
5) After doing all above and changing the API key you are ready to test it on your server. It should look like this:
Saturday, March 6, 2010
Reading XML files in Google Maps
There is a sample on Google Maps API documentation which should be used to read XML files. This is a receipt of code taken from there:
var name = markers[i].getAttribute("name");
where in the xml file you would find it here:
<marker name="mymarker"/>
The variable 'name' should have the value 'mymarker', but for some reasons (browser incompatibility mostly) it didn't work for me. My solution was to reconstruct the XML file and the XML line looks like this:
<marker>
<name>mymarker</name>
</marker>
Reading the value :
var name = markers[i].childNodes[0].nodeValue;
Here is the working solution for reading xml files.
var name = markers[i].getAttribute("name");
where in the xml file you would find it here:
<marker name="mymarker"/>
The variable 'name' should have the value 'mymarker', but for some reasons (browser incompatibility mostly) it didn't work for me. My solution was to reconstruct the XML file and the XML line looks like this:
<marker>
<name>mymarker</name>
</marker>
Reading the value :
var name = markers[i].childNodes[0].nodeValue;
Here is the working solution for reading xml files.
Subscribe to:
Comments (Atom)