Circles on Google Maps API

Question

I currently have markers for all of my subcontractors on a map. I have a variable for each row in the database containing the number of miles they are willing to travel.

How would I add the circles that cover that area?

<script>
    /*
     * MAP 2
     */
    jQuery(function() {
        "use strict";

        // init map
        var map = new GMaps({
            div: '#applicantLocation',
            lat: 39.8282,
            lng: -85.4373943,
            zoom: 4
        });

        <?php

            $sql = "SELECT * FROM vendorApps ORDER BY `dateReceived` DESC";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            include "includes/php/getTimeAgo.php";
            // output data of each row
            while($row = $result->fetch_assoc()) {
                $zip    = $row["zip"];
                $getZip = "SELECT `lat` , `lng` FROM `zips` WHERE `zip` =  \"$zip\" ";
                $getZipResult = $conn->query($getZip);

                if ($getZipResult->num_rows > 0) {
                    // output data of each row
                    while($getZipRow = $getZipResult->fetch_assoc()) {

                        $vendor_lat = $getZipRow['lat'];
                        $vendor_lng = $getZipRow['lng'];

                        $link = '<a href="applicantProfile.php?appID='.$row["vendorAppID"].'">';
                        echo '

                        // add Vendor marker
                        map.addMarker({
                            lat: '.$vendor_lat.',
                            lng: '.$vendor_lng.',
                            title: "'.$row["fName"].' '.$row["lName"].'",
                            infoWindow: {
                                content: "'.$row["fName"].' '.$row["lName"].' is a '.$row["vendorType"].' in '.$row["city"].', '.$row["state"].'."
                            }
                        });
                        ';
                    }
                }
            }
        }
        ?>
    });
</script>

I removed my previous comment, the server-side aspect does make this somewhat ambigious, I suppose; here is the doc reference link to circles: https://developers.google.com/maps/documentation/javascript/examples/circle-simple — Brett Caswell, Sep 01 '15 at 21:56
what is the name of the 'variable' (column) for the miles willing to travel?, is it a column on `VendorApps`? — Brett Caswell, Sep 01 '15 at 22:00
My biggest concern is more of the javascript code, not the PHP — Timothy Richard Elliott, Sep 02 '15 at 04:52
To whoever voted to close this question as *too broad* should have a read in the help section. — MrUpsidown, Sep 02 '15 at 10:16
@TimothyRichardElliott, the circle is in addition to the marker? so the marker will be at the center of the circle? — Brett Caswell, Sep 02 '15 at 13:56

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

Your code doesn't show an attempt to add a circle but here is how you can do it:

The Circle has a radius and a center property:

radius | Type: number - The radius in meters on the Earth's surface

center | Type: LatLng - The center

Check the Reference.

So you will need to convert your value from miles to meters: http://www.metric-conversions.org/length/miles-to-meters.htm

Example:

var cityCircle = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    center: new google.maps.LatLng(10,20), // replace lat (10) and lng (20) with your $vendor_lat and $vendor_lng values
    radius: radius // your converted value from miles to meters
});

Edit:

As you are using Gmaps check the reference here: https://hpneo.github.io/gmaps/documentation.html#GMaps-drawCircle

So I guess you should use map.drawCircle()

map.drawCircle({
    lat: '.$vendor_lat.',
    lng: '.$vendor_lng.',
    radius: radius // your converted value from miles to meters
    // other options go here (see below)
});

All the other options you can use as per the google maps reference as the gmaps documentation mentions the following:

drawCircle accepts any option defined in google.maps.CircleOptions and any event defined in google.maps.Circle ('Events' section).

Circles on Google Maps API

1 Answers1