Google Maps Api Drawing Tools Drag Marker

A few age back a good buddy of mine (Ryan LeTulle) demoed a unemotional real estate map coating He shapely. I asked him to web log it (because, everyone has a web log, and clip to blog, right?) but he ne'er got around thereto. Endmost week I asked him if he oriented Pine Tree State rebuilding what I saw him do, and he same get going for it. Thanks Ryan for the aspiration!

Take in you ever tested to apply a factual estate site to come up homes but had trouble narrowing down your hunting criteria? For instance, you sleep with what city you want to live in, but also what area. If you're lucky, the locate lets you search by subdivision, but how in the heck do you figure that out? My subdivision is Ivanhoe, but I lived here about 10 old age ahead I realized that.

What you would rattling like - I imagine - is being healthy to draw your search criteria. Given a represent of the city and a undefinable whim of where you want to exist - what if we could draw a region and find results within it?

This idea relies on two main aspects. First is the ability to eviscerate connected a map out. I'm going to be using Google Maps for this throw. Google Maps is a pretty damn deep API. It allows you to draw markers, lines, boxes, and polygons in oecumenical on a map. IT also allows for deep interaction with those UI items as cured.

While I researched this estimate, I discovered they had a boast called "Exploiter-editable Shapes". As you can imagine, this lets a user affect and adjust a shape on a map:

This is skillful - but a box isn't exactly precise enough. I decided to begin with simple lines (what Google calls Polylines). I created a map and then used click events to add markers with lines copulative them. Fortuitously Google had an object lesson of this already (Polyline complex) so I began with that. I made one modification though. I set it risen so that arsenic soon as you had clicked three multiplication, I'd "confining" the box automatically for you.

As an example:

The code is rather simple - just notice how many lines we've closed and on the 3rd sink in, mechanically close the box:

This worked... ok (and you can demo it here), but I felt bad I was forcing you to search within a four sided polygon. What I really sought-after was the power to let you click as much as you want, and when you're through with, walking the 'box' automatically. As an object lesson, I've created a multi-metameric polygon here and clicked hunting to complete the region:

Overall, I felt wish this was a good solution. Like a sho - right away you whitethorn follow asking - what happens if you reap something crazy, like, oh say this:

Don't do that. Seriously.

Ok... so at this point, we've covered the first main aspect of this throw - bountiful you the ability to 'draw' a region. Now comes the second. Given that we know the region, how do we find crap inwardly it?

I was a moment lacerated about this aspect. Turns out on that point is a client-incline answer provided by Google (nobelium surprise) but also server side code you can use as A well. CFLib has a UDF (PointInPolygon) nearly 10 years echt that would do this. So in theory - we could hit a server database, DO some logic, and return the points. Or - we could do it client side. Keeping the information on the host allows for quicker initial load. Keeping information technology in the client lets us search a bit quicker, but makes the first load 'fatter'.

I decided to accompany a client-side solution. Primarily because I wanted to test this particular Google API, but also because I was overcurious how 'bad' the hit would be if I did put in a large set of data on the client. In my example, I'm only storing longitude/latitude information. I'd imagine that once you click on a result we could do an AJAX ping to get further data. Or heck, we could do so as soon as you complete your polygon. I wrote a script (you can view source here) to yield 400 different long/latisimus dorsi pairs that were roughly in the Lafayette country. This script outputs a JavaScript variable I could and then take and save into a file called data.json.

Now that I had my information, I could update my code to load it into memory. American Samoa to how I could filter the data, I made use of Google's Geometry subroutine library. It lets you give-up the ghost a long/latisimus dorsi charge and a polygonal shape and it returns true if the orient is inside it. Here is the updated edition. You want to give attending to the doSearch function:

As you tin can see, I loop finished the information and pass it to the Geometry API. If a compeer is found, I add u a marker. When done, I report on the total matches. You can demo this past hitting the gargantuan demo button below. Note that hit Search twice will destroy the universe. Don't gain search twice.

p.s. I really tested "crossing the streams" and it worked perfectly. I knew IT would. Honorable.

Google Maps Api Drawing Tools Drag Marker

Source: https://www.raymondcamden.com/2013/08/19/Using-Drawing-Tools-and-Maps-to-Find-Data