Is it possible to draw a circle on a Google static map?

Question

The static map API discusses paths, but no mention of circles. Is this possible? Thanks

Zeralda

Answer 1

What you could do is use the encoded polyline algorithm to produce enough points to get a roughly circular path. There's definitely coding involved: you'd need to get the center and radius of your circle, turn that into a series of lat/longs, then encode using the algorithm.

As an alternative, you might be able to use a transparent gif image as a marker and put that in your map.

Coston

Note that markers have a size limitation. 100px by 100px did not work for me, but 75px by 75px did. – Duwe

the problem is that depending on the length of the circle you may end up needing a lot of points so that it really look like a circle, and therefore you may fall short of URL characters (there is a limitation of 1024 characters currently) – Rural

2048 characters, sorry – Rural

Answer 2

You can represent a circle by drawing a detailed PolyLine since Google Static Maps does not support drawing a circle itself.

You need an algorithm to generate proper encoding polylines. I used this implementation since I was in PHP, but you can find or develop something similar by yourself depending on the language you want.

Here is the PHP code that I used to generate the request:

<?php
    /* set some options */
    $mapLat = filter_input(INPUT_POST, 'lat1'); // latitude for map's and circle's center
    $mapLng = filter_input(INPUT_POST, 'lon1'); // longitude for map's and circle's center
    $mapRadius1 = 0.5; // the radius of the first circle (in Kilometres)
    $mapRadius2 = 5; // the radius of the second circle (in Kilometres)
    $mapFill_first = '330000'; // fill colour of the first circle
    $mapFill_second = 'FF99FF'; // fill colour of the second circle
    $map1Border1 = '91A93A'; // border colour of the first circle
    $map1Border2 = '0000CC'; // border colour of the second circle
    $mapWidth = 450; // map image width (max 640px)
    $mapHeight = 450; // map image height (max 640px)
    $zoom = 11;
    $scale = 2;
    /** create our encoded polyline string for the first circle*/
    $EncString1 = GMapCircle($mapLat, $mapLng, $mapRadius1);
    /** create our encoded polyline string for the second circle*/
    $EncString2 = GMapCircle($mapLat, $mapLng, $mapRadius2);
    /** put together the static map URL */
    $MapAPI = 'http://maps.google.com.au/maps/api/staticmap?';
    $MapURL = $MapAPI . 'center=' . $mapLat . ',' . $mapLng . '&zoom=' . $zoom . '&size=' .
        $mapWidth . 'x' . $mapHeight . '&scale=' . $scale . '&markers=color:red%7Clabel:S%7C'.$mapLat.','.$mapLng .
        '&maptype=roadmap&path=fillcolor:0x' . $mapFill_first .
        '33%7Ccolor:0x' . $map1Border1 . '00%7Cenc:' . $EncString1 . '&path=fillcolor:0x' .
        $mapFill_second . '33%7Ccolor:0x' . $map1Border2 . '00%7Cenc:' . $EncString2;
    
    /* output an image tag with our map as the source */
    //echo '<img src="' . $MapURL . '" />';
    echo json_encode($MapURL);
    
    function GMapCircle($Lat, $Lng, $Rad, $Detail = 8)
    {
        $R = 6371;
        $pi = pi();
        $Lat = ($Lat * $pi) / 180;
        $Lng = ($Lng * $pi) / 180;
        $d = $Rad / $R;
        $points = array();
        for ($i = 0; $i <= 360; $i += $Detail)
        {
            $brng = $i * $pi / 180;
            $pLat = asin(sin($Lat) * cos($d) + cos($Lat) * sin($d) * cos($brng));
            $pLng = (($Lng + atan2(sin($brng) * sin($d) * cos($Lat), cos($d) - sin($Lat) * sin($pLat))) * 180) / $pi;
            $pLat = ($pLat * 180) / $pi;
            $points[] = array($pLat, $pLng);
        }
    
        require_once('PolylineEncoder.php');
        $PolyEnc = new PolylineEncoder($points);
        $EncString = $PolyEnc->dpEncode();
    
        return $EncString['Points'];
    }

Enjoy!

Bachelorism

Probably should have given credit for my code that you took from here. https://mcmap.net/q/628834/-drawing-a-circle-google-static-maps – Foolproof

Answer 3

You can approximate a circle quite easily by using the computeOffset method which allows you to get the cooordinates along the circumference.

In this example I used increments of 8 degrees, so this will give 45 pairs of coordinates. For the circle sizes I was using the circles appeared nicely round in the static map. If you are using large circles, then simply change the increment to something smaller, eg j = j + 6.

The variable pathText is added to the rest of the web address required for the static map.

var pathText = '&path=';
var circumLatLng;

for (var j = 0; j < 361; j = j + 8) {

circumLatLng = google.maps.geometry.spherical.computeOffset(circle.getCenter(), circle.getRadius(), j);

pathText += circumLatLng.lat().toFixed(6) + ',' + circumLatLng.lng().toFixed(6) + '|';
}

Weaponless

Answer 4

It is possible but you have to draw a shape with lots of sides to look like a circle.

Here is my example:

<img src="http://maps.google.com/maps/api/staticmap?size=600x500&path=fillcolor:0x0000FF|weight:3|color:0xFF0000|enc:ue{cI|rrH`@qs@hBis@nDyr@rF_r@tH_q@xJyo@zLgn@vNol@rPsj@lRmh@`Taf@tUqc@dWy`@nX{]vY{ZxZuWx[kTr\_Qh]oMz]}If^iFl^uBn^?n^tBd^hFz]|Ih]nMr\~Px[jTxZtWvYzZnXz]dWx`@tUpc@`T`f@lRlh@rPrj@xNnl@xLfn@xJxo@vH~p@rF~q@lDxr@hBhs@b@ps@c@ps@iBfs@mDxr@sF~q@wH`q@yJvo@yLfn@yNpl@sPpj@mRlh@aTbf@uUnc@eWx`@oX|]wYzZyZtWy[jTs\~Pi]lM{]|Ie^jFo^rBo^?m^sBg^kF{]}Ii]mMs\_Qy[kTyZuWwY{ZoX}]eWy`@uUoc@aTcf@mRmh@sPqj@wNql@{Lgn@yJwo@uHaq@sF_r@oDyr@iBgs@a@qs@&sensor=true" border="0"/>

Or try this link to view it

To generate this I used freemaptools.com

Linearity

Any way to make this dynamic? If I have many different coordinates to use? – Coaster

@JonasB it is possible. Look for a polyline generator. I've made an angular directive for this purpose if that is any use? – Linearity

It's worth noting that site uses a PHP polyline encoder (From client side source code: xmlHttp.open("POST","ajax/csv-polyline-encoder.php",true);). – Neglectful