CODEWITHSUNDEEP
google-maps-static-api
lakshman
lakshman

Reputation: 2741

drawing a path on google static map

I wrote this code in client side and sent to a server for a emailing purpose.in that email the image is appear as broken image I want to draw a path on google static map.here is the code I used.

<img src = "http://maps.googleapis.com/maps/api/staticmap?size=400x400&path=weight:3%7Ccolor:orange%7Cenc:'+polyline+'" />

polyline I created this way

 var polyline;
var points = new Array();
for(var i=0; i<googleRoute.getVertexCount(); i++)
{
    points[i] = new GLatLng(googleRoute.getVertex(i).lng(),googleRoute.getVertex(i).lat());
}
polyline = new GPolyline(points, '#ff0000', 5, 0.7);

when I used this code it will not appear the image.I wrote this code in client side and sent to a server for a emailing purpose.in that email the image is appear as broken image are there any wrong with my code?

Upvotes: 2

Views: 3113

Answers (2)

lakshman
lakshman

Reputation: 2741

when distance between two cities grows, the polyline variable will include lot of Glatlang values. so it causes to exceed the url character limit (What is the character limit on URL). we can't send long url that exceed the charcter limit using ajax request. that's why I got that broken image. As the solution I ignored intermediate Glatlang values by incrementing the for loop with skipping values. Therefore the polyline can be accepted for zoomed out maps.

Upvotes: 1

Elliott
Elliott

Reputation: 3864

If you have an array of points you can simply do:

$points = array('53.061969559518,-3.1661187796875', '52.647368106972,-2.6806604056641');
$pointsUrl = "";
for($i=0; $i<count($points); $i++) {
   $pointsUrl .= '%7C'.$points[$i];
}
echo '<img src="http://maps.googleapis.com/maps/api/staticmap?path=color:0x0000ff%7Cweight:5'.$pointsUrl.'&size=270x256&maptype=roadmap&sensor=false" />';

Upvotes: 0

Related Questions