;)
I've used little scraps of time during the hurricane to experiment with the Google Maps API.
I hope to simplify it so that people can set up a map in the OPML Editor outliner, by entering a list of names of places and have them appear as icons on the map. They also get to specify the icons, from the set of Glyphicons. And of course they can write a document for each, in the outliner. The outlines will be displayed more or less the same way as the About outline on Scripting News home page.
The API is pretty strange to me, largely because I've never used a Javascript API before. The callback structure is totally bizarre. I'm accustomed to the enviroment managing threads for you. To me this is an odd way to program. Which makes learing a new API doubly-difficult.
1. How to turn a name of a place into a lat-lng value. I see there's an entrypoint for this, geocoder.getLatLng.
2. How to get a callback when the user clicks on an icon. It would also be nice to know where the mouse-click happened, on the screen, so the window can pop up close to it (I have no idea how to do this, but will have to figure it out).
I see this as another way to do a presentation, or to organize information. I would like to have a single outline for a map, making it super-easy to edit, and also to have it in the most convenient form for someone browsing over the data.
Any pointers are much appreciated.
Thanks to some pointers from Ted (see below), my test map now have markers that:
1. Are specified not by latitude and longitude, rather by human-understandable strings like Roosevelt Island, New York, NY and 23rd St and Park Ave, New York, NY.
2. When roll over the icon you see the human-understandable string.
3. When you click on the icon and alert dialog pops up with the string.
This is important because the string is what's going to be in the main headline for each chunk of outline text. In a sense it's the address both in physical space and in the outline. Being able to go from a mouse-click to that string is an essential step.
Yeah, javascript's callback structure is jarring at first. An important thing to remember in this is that javascript is single-threaded. Things happen asyncronously, but only one at a time.
;)
Get the latitude/longitude from google
var geocoder = new google.maps.Geocoder();
;)
function callbackFunc(results, status) {
;)
if (status == google.maps.GeocoderStatus.OK) {
var latLng = results[0].geometry.location;
// do whatever you need here
}
}
var yourAddress = "123 Main St., City, ST 00000";
geocoder.geocode({address: yourAddress}, callbackFunc);
;)
var marker = new google.maps.Marker({
//init props here
});
;)
google.maps.event.addListener(marker, "click", function () {
//respond to your click event here
});
I don't know of any good comprehensive tutorials. I looked for them when I needed to use the maps api, and didn't find any. I ended up having to plow through the full reference, but that's been a few years. Maybe there's something out there now. If so, I'd like to know too.
Ted, thanks for the skeletal examples.
I was able to puzzle my way through the first one and now I can set up a marker using an address like 157 West 57th Street, New York, NY.
Still have some more factoring to do to create a routine that can also take the name of a glyphicon. This is going to be a lot of fun.
But I still want an overview tutorial-like document. That is what I asked for in this post. Hope someone who reads this knows of one.
;)
;)
;)
;)
;)
