diff --git a/README.markdown b/README.markdown
index 277213a..2e3d403 100644
--- a/README.markdown
+++ b/README.markdown
@@ -5,7 +5,7 @@ Marky Mark is a quick and simple wrapper for [Google maps V3](http://code.google
- Create single or multiple markers
- it's super easy to attach info windows to markers
- - Integrated geocoding without an API key! Hooray!
+ - Integrated geocoding without an API key! Hooray! **NOTE:** the built in geocoding only allows 11 geocode requests per request, please use an external geocoder if you need to make more requests.
- It can be an alternative to integrating maps without going to google maps and getting the iframe maps
- Dependency free! You can use this with your favorite JS library if you like (Unless you want to use set_remote_markers)
- A simple way to create your own map themes!
@@ -122,11 +122,13 @@ An all inclusive method to set map markers, this has built in geocoding (with no
Opts hash options:
- - address: The address to set your marker at, this can be an literal address or an actual location like: 'Powderhorn Park, Minneapolis, MN' (required)
+ - address: The address to set your marker at, this can be an literal address or an actual location like: 'Powderhorn Park, Minneapolis, MN' (required unless latlng set)
+ - latlng: [lat,lng] is the lat and lng of the marker, NOTE: this will take precendence over the address if it is set
- map: the map object for which you want to apply the map to (required)
- center: true/false pass whether or not you want the map centered on this marker (optional)
- icon: the path to an image that you want to set the marker to (optional)
- info: the content of the info window you want to set on the marker, this can be an id in the form of '#my-elem-id' or actual html content (optional)
+ - auto_open: true/false - automatically opens the marker's info window
Example:
@@ -138,7 +140,7 @@ Example:
info: 'Powderhorn Park!'
});
-set_info_window (info,marker)
+set_info_window (info,marker,auto_open)
-----------------------------
Sets an info window on a marker. This is usually used in set_marker.
@@ -147,6 +149,7 @@ Options:
- info: the content of the info window, this can be html content or the id of an element.
- marker: the marker object where you want to place your info window.
+ - auto_open: true/false opens the info window on the marker
Example:
@@ -242,4 +245,4 @@ You can add your own themes as well, if you haven't already, [do some reading at
Most themes are based on this article: [http://www.41latitude.com/post/1268734799/google-styled-maps](http://www.41latitude.com/post/1268734799/google-styled-maps)
-Copyright (c) 2010 Vann Ek., released under the MIT license
\ No newline at end of file
+Copyright (c) 2010 Vann Ek., released under the MIT license
diff --git a/marky_mark.js b/marky_mark.js
index c0a7d61..9f4f5a9 100644
--- a/marky_mark.js
+++ b/marky_mark.js
@@ -1,3 +1,7 @@
+// NOTE: make sure that you add the following before including it in your page:
+//
+//
+
// GLOBALS
var GEOCODER = new google.maps.Geocoder();
@@ -13,13 +17,17 @@ function create_map (elem,opts) {
var themeStyles = new google.maps.StyledMapType(theme.set, {name: theme.themeName});
delete opts.theme;
}
- var map = new google.maps.Map(document.getElementById(elem), opts);
- if (themeEnabled == true) {
- map.mapTypes.set(theme.themeName, themeStyles);
- map.setMapTypeId(theme.themeName);
- console.log("Applying theme: " + theme.themeName)
+ if (document.getElementById(elem)) {
+ var map = new google.maps.Map(document.getElementById(elem), opts);
+ if (themeEnabled == true) {
+ map.mapTypes.set(theme.themeName, themeStyles);
+ map.setMapTypeId(theme.themeName);
+ console.log("Applying theme: " + theme.themeName)
+ };
+ return map;
+ }else{
+ console.log("No element with ID: '" + elem + "' available to create map.");
};
- return map;
}
// set_latlng([lat,lng])
@@ -31,55 +39,112 @@ function set_latlng (latlng) {
// EX:
/*
set_marker({
- address: '1234 your address', // required
+ address: '1234 your address', // required unless you have latlng set
+ latlng: [lat,lng], // required unless you have address set, this will take precedence if both address and latlng exist
map: map, // required
center: true_or_false, // optional
icon: icon, // optional
info: content_or_element_id // optional
+ auto_open: true/false // optional
})
NOTE: set_marker will only pinpoint the first address found
*/
+
function set_marker (opts) {
- GEOCODER.geocode({'address': opts.address}, function(results, status) {
+ if (is.defined(opts.latlng)) {
+ // latlng setup
+ marker_opts = {
+ map: opts.map,
+ position: set_latlng(opts.latlng)
+ };
+ // set optional defaults right here
+ if (is.defined(opts.icon)) { marker_opts.icon = opts.icon };
+ // set the info var for the infowindow
+ /*
+ TODO : the following pattern should be extracted out into a function ...
+ */
+ if (is.defined(opts.info)) {
+ info = opts.info;
+ delete opts.info;
+ } else {
+ info = undefined;
+ };
+
+ if (is.defined(opts.auto_open)) {
+ auto_open = opts.auto_open;
+ delete opts.auto_open;
+ } else {
+ auto_open = false;
+ };
+
+ // center the map if it's set to true
+ if (is.defined(opts.center)) {
+ opts.map.setCenter(set_latlng(opts.latlng));
+ delete opts.center;
+ };
+
+ marker = new google.maps.Marker(marker_opts);
+
+ // set info windows and events
+ if (is.defined(info)) { set_info_window(info,marker,auto_open) };
- if (status == google.maps.GeocoderStatus.OK) {
- marker_opts = {
- map: opts.map,
- position: results[0].geometry.location
- };
- // set optional defaults right here
- if (is.defined(opts.icon)) { marker_opts.icon = opts.icon };
- // set the info var for the infowindow
- if (is.defined(opts.info)) {
- info = opts.info;
- delete opts.info;
- } else {
- info = undefined;
- };
-
- // center the map if it's set to true
- if (is.defined(opts.center)) {
- opts.map.setCenter(results[0].geometry.location);
- delete opts.center;
- };
-
- marker = new google.maps.Marker(marker_opts);
-
- // set info windows and events
- if (is.defined(info)) { set_info_window(info,marker) };
-
- } else {
- alert("Could not geocode address: " + opts.address + " because of: " + status);
- };
+ } else {
- });
+ GEOCODER.geocode({'address': opts.address}, function(results, status) {
+
+ if (status == google.maps.GeocoderStatus.OK) {
+ marker_opts = {
+ map: opts.map,
+ position: results[0].geometry.location
+ };
+ // set optional defaults right here
+ if (is.defined(opts.icon)) { marker_opts.icon = opts.icon };
+ // set the info var for the infowindow
+ /*
+ TODO : the following pattern should be extracted out into a function ...
+ */
+ if (is.defined(opts.info)) {
+ info = opts.info;
+ delete opts.info;
+ } else {
+ info = undefined;
+ };
+
+ if (is.defined(opts.auto_open)) {
+ auto_open = opts.auto_open;
+ delete opts.auto_open;
+ } else {
+ auto_open = false;
+ };
+
+ // center the map if it's set to true
+ if (is.defined(opts.center)) {
+ opts.map.setCenter(results[0].geometry.location);
+ delete opts.center;
+ };
+
+ marker = new google.maps.Marker(marker_opts);
+
+ // set info windows and events
+ if (is.defined(info)) { set_info_window(info,marker,auto_open) };
+
+ } else {
+ console.log("Could not geocode address: " + opts.address + " because of: " + status);
+ // alert("Could not geocode address: " + opts.address + " because of: " + status);
+ };
+
+ });
+ };
+
}
// Can either be an id: '#somediv' or actual html content
// EX: set_info_window('#somediv',marker) # => grabs some div
// set_info_window("My Map content!
",marker)
-function set_info_window (info,marker) {
+// automatically open the info window
+// set_info_window('My info', marker, true)
+function set_info_window (info,marker,auto_open) {
// pulls an element's html content
if (info.charAt(0) == '#') {
id = info.split('#')[1];
@@ -90,9 +155,14 @@ function set_info_window (info,marker) {
content: info
});
- google.maps.event.addListener(marker, 'click', function() {
+ if (auto_open) {
infowindow.open(marker.map, marker);
- });
+ }else{
+ google.maps.event.addListener(marker, 'click', function() {
+ infowindow.open(marker.map, marker);
+ });
+ };
+
}
/*