CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>GPS Visualizer: Google Maps marker list example</title> <base target="_top"></base> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="/gpsv.css" type="text/css" /> </head> <body> <script type="text/javascript"> var google_api_key = 'AIzaSyBuHlWEHsd2R9tJewswl2FED7z5KV0Nnzg'; document.writeln('<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&sensor=false&'+((self.google_api_key&&document.location.toString().indexOf('file://')!=0)?'key='+google_api_key:'')+'"><'+'/script>'); </script> <div align="left"> <a href="/"><img src="/images/gpsvisualizer_200x32.gif" alt="GPS Visualizer" width="200" height="32" border=0></a> <h3>Automatically-generated marker lists in Google Maps</h3> <p>The list on the right side of this map was automatically generated from the waypoints in the map; try mousing-over or clicking on the list items. The header ("Pacific NW airports") was added manually after the fact, but it's still part of the JavaScript code that builds the list. (<a href="google_marker_list_full_screen.html">Click here</a> for a "full screen" map with a floating marker list.)</p> <p>To create a marker list like this with GPS Visualizer, look for "Generate list of markers" under "Waypoint options" in the <a href="/map_input?form=google">Google Maps input form</a>.</p> <br/> </div> <div style="width:576px; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;"> <div id="gmap_div" style="width:400px; height:550px; margin:0px; margin-right:12px; background-color:#F0F0F0; float:left; overflow:hidden;"> <p align="center" style="font:10px Arial;">This map was created using <a target="_blank" href="https://www.gpsvisualizer.com/">GPS Visualizer</a>'s do-it-yourself geographic utilities.<br /><br />Please wait while the map data loads...</p> </div> <div id="gv_infobox" class="gv_infobox" style="font:11px Arial; border:solid #666666 1px; background:#ffffff; padding:4px; overflow:auto; display:none; max-width:100px;">  </div> <div id="gv_marker_list" class="gv_marker_list" style="background:#ffffff; overflow:auto; display:none;"></div> <div id="gv_clear_margins" style="height:0px; clear:both;"></div> </div>  <script type="text/javascript"> /* Global variables used by the GPS Visualizer functions (20150825212732): */ gv_options = {}; // basic map parameters: gv_options.center = [47,-122]; // [latitude,longitude] - be sure to keep the square brackets gv_options.zoom = 5; // higher number means closer view; can also be 'auto' for automatic zoom/center based on map elements gv_options.map_type = 'GV_HYBRID'; // popular map_type choices are 'GV_STREET', 'GV_SATELLITE', 'GV_HYBRID', 'GV_TERRAIN', 'GV_TOPO_US', 'GV_TOPO_WORLD', 'GV_OSM' gv_options.map_opacity = 1.00; // number from 0 to 1 gv_options.full_screen = false; // true|false: should the map fill the entire page (or frame)? gv_options.width = 400; // width of the map, in pixels gv_options.height = 300; // height of the map, in pixels gv_options.map_div = 'gmap_div'; // the name of the HTML "div" tag containing the map itself; usually 'gmap_div' gv_options.doubleclick_zoom = true; // true|false: zoom in when mouse is double-clicked? gv_options.doubleclick_center = true; // true|false: re-center the map on the point that was double-clicked? gv_options.mousewheel_zoom = true; // true|false; or 'reverse' for down=in and up=out gv_options.autozoom_adjustment = 0; gv_options.centering_options = { 'open_info_window':true, 'partial_match':true, 'center_key':'center', 'default_zoom':null } // URL-based centering (e.g., ?center=name_of_marker&zoom=14) gv_options.tilt = false; // true|false: allow Google to show 45-degree tilted aerial imagery? gv_options.street_view = false; // true|false: allow Google Street View on the map gv_options.animated_zoom = false; // true|false: may or may not work properly gv_options.disable_google_pois = false; // true|false: if you disable clickable POIs, you also lose the labels on parks, airports, etc. // widgets on the map: gv_options.zoom_control = 'small'; // 'large'|'small'|'none' gv_options.recenter_button = true; // true|false: is there a 'double-click to recenter' option in the zoom control? gv_options.scale_control = true; // true|false gv_options.center_coordinates = false; // true|false: show a "center coordinates" box and crosshair? gv_options.mouse_coordinates = false; // true|false: show a "mouse coordinates" box? gv_options.measurement_tools = false; // true|false: show a ruler for measuring distance/area? gv_options.measurement_options = { visible:false, distance_color:'', area_color:'', position:[] }; gv_options.crosshair_hidden = true; // true|false: hide the crosshair initially? gv_options.map_opacity_control = false; // true|false gv_options.map_type_control = {}; // widget to change the background map gv_options.map_type_control.style = 'none'; // 'menu'|'none' gv_options.map_type_control.filter = false; // true|false: when map loads, are irrelevant maps ignored? gv_options.map_type_control.excluded = []; // comma-separated list of quoted map IDs that will never show in the list ('included' also works) gv_options.infobox_options = {}; // options for a floating info box (id="gv_infobox"), which can contain anything gv_options.infobox_options.enabled = true; // true|false: enable or disable the info box altogether gv_options.infobox_options.position = ['LEFT_TOP',76,6]; // [Google anchor name, relative x, relative y] gv_options.infobox_options.draggable = true; // true|false: can it be moved around the screen? gv_options.infobox_options.collapsible = true; // true|false: can it be collapsed by double-clicking its top bar? // marker-related options: gv_options.default_marker = { color:'red',icon:'googlemini',scale:1 }; // icon can be a URL, but be sure to also include size:[w,h] and optionally anchor:[x,y] gv_options.marker_tooltips = true; // do the names of the markers show up when you mouse-over them? gv_options.marker_shadows = true; // true|false: do the standard markers have "shadows" behind them? gv_options.marker_link_target = '_blank'; // the name of the window or frame into which markers' URLs will load gv_options.info_window_width = 0; // in pixels, the width of the markers' pop-up info "bubbles" (can be overridden by 'window_width' in individual markers) gv_options.thumbnail_width = 0; // in pixels, the width of the markers' thumbnails (can be overridden by 'thumbnail_width' in individual markers) gv_options.photo_size = [0,0]; // in pixels, the size of the photos in info windows (can be overridden by 'photo_width' or 'photo_size' in individual markers) gv_options.hide_labels = false; // true|false: hide labels when map first loads? gv_options.labels_behind_markers = false; // true|false: are the labels behind other markers (true) or in front of them (false)? gv_options.label_offset = [0,0]; // [x,y]: shift all markers' labels (positive numbers are right and down) gv_options.label_centered = false; // true|false: center labels with respect to their markers? (label_left is also a valid option.) gv_options.driving_directions = false; // put a small "driving directions" form in each marker's pop-up window? (override with dd:true or dd:false in a marker's options) gv_options.garmin_icon_set = 'gpsmap'; // 'gpsmap' are the small 16x16 icons; change it to '24x24' for larger icons gv_options.marker_list_options = {}; // options for a dynamically-created list of markers gv_options.marker_list_options.enabled = true; // true|false: enable or disable the marker list altogether gv_options.marker_list_options.floating = false; // is the list a floating box inside the map itself? gv_options.marker_list_options.position = ['RIGHT_BOTTOM',6,38]; // floating list only: position within map gv_options.marker_list_options.min_width = 160; // minimum width, in pixels, of the floating list gv_options.marker_list_options.max_width = 160; // maximum width gv_options.marker_list_options.min_height = 0; // minimum height, in pixels, of the floating list gv_options.marker_list_options.max_height = 235; // maximum height gv_options.marker_list_options.draggable = true; // true|false, floating list only: can it be moved around the screen? gv_options.marker_list_options.collapsible = true; // true|false, floating list only: can it be collapsed by double-clicking its top bar? gv_options.marker_list_options.include_tickmarks = false; // true|false: are distance/time tickmarks included in the list? gv_options.marker_list_options.include_trackpoints = false; // true|false: are "trackpoint" markers included in the list? gv_options.marker_list_options.dividers = true; // true|false: will a thin line be drawn between each item in the list? gv_options.marker_list_options.desc = false; // true|false: will the markers' descriptions be shown below their names in the list? gv_options.marker_list_options.icons = true; // true|false: should the markers' icons appear to the left of their names in the list? gv_options.marker_list_options.thumbnails = false; // true|false: should markers' thumbnails be shown in the list? gv_options.marker_list_options.folders_collapsed = false; // true|false: do folders in the list start out in a collapsed state? gv_options.marker_list_options.folders_hidden = false; // true|false: do folders in the list start out in a hidden state? gv_options.marker_list_options.collapsed_folders = []; // an array of folder names gv_options.marker_list_options.hidden_folders = []; // an array of folder names gv_options.marker_list_options.count_folder_items = false; // true|false: list the number of items in each folder? gv_options.marker_list_options.wrap_names = true; // true|false: should marker's names be allowed to wrap onto more than one line? gv_options.marker_list_options.unnamed = '[unnamed]'; // what 'name' should be assigned to unnamed markers in the list? gv_options.marker_list_options.colors = false; // true|false: should the names/descs of the points in the list be colorized the same as their markers? gv_options.marker_list_options.default_color = ''; // default HTML color code for the names/descs in the list gv_options.marker_list_options.limit = 0; // how many markers to show in the list; 0 for no limit gv_options.marker_list_options.center = false; // true|false: does the map center upon a marker when you click its name in the list? gv_options.marker_list_options.zoom = false; // true|false: does the map zoom to a certain level when you click on a marker's name in the list? gv_options.marker_list_options.zoom_level = 12; // if 'zoom' is true, what level should the map zoom to? gv_options.marker_list_options.info_window = true; // true|false: do info windows pop up when the markers' names are clicked in the list? gv_options.marker_list_options.url_links = false; // true|false: do the names in the list become instant links to the markers' URLs? gv_options.marker_list_options.toggle = false; // true|false: does a marker disappear if you click on its name in the list? gv_options.marker_list_options.help_tooltips = false; // true|false: do "tooltips" appear on marker names that tell you what happens when you click? gv_options.marker_list_options.id = 'gv_marker_list'; // id of a DIV tag that holds the list gv_options.marker_list_options.header = '<h4 style="margin-top:0px;">Pacific NW airports</h4>'; // HTML code; be sure to put backslashes in front of any single quotes, and don't include any line breaks gv_options.marker_list_options.footer = ''; // HTML code gv_options.marker_filter_options = {}; // options for removing waypoints that are out of the current view gv_options.marker_filter_options.enabled = false; // true|false: should out-of-range markers be removed? gv_options.marker_filter_options.movement_threshold = 8; // in pixels, how far the map has to move to trigger filtering gv_options.marker_filter_options.limit = 0; // maximum number of markers to display on the map; 0 for no limit gv_options.marker_filter_options.update_list = true; // true|false: should the marker list be updated with only the filtered markers? gv_options.marker_filter_options.sort_list_by_distance = false; // true|false: should the marker list be sorted by distance from the center of the map? gv_options.marker_filter_options.min_zoom = 0; // below this zoom level, don't show any markers at all gv_options.marker_filter_options.zoom_message = ''; // message to put in the marker list if the map is below the min_zoom threshold gv_options.synthesize_fields = {}; // for example: {label:'{name}'} would cause all markers' names to become visible labels // Load GPS Visualizer's Google Maps functions (this must be loaded AFTER gv_options are set): document.writeln('<script src="/google_maps/functions3.js" type="text/javascript"><'+'/script>'); </script> <style type="text/css"> /* Put any custom style definitions here (e.g., .gv_marker_info_window, .gv_marker_info_window_name, .gv_marker_list_item, .gv_tooltip, .gv_label, etc.) */ #gmap_div .gv_marker_info_window { font-size:11px !important; } #gmap_div .gv_label { background:#333333; border:1px solid black; padding:1px; color:white; font:9px Verdana,sans-serif !important; font-weight:normal !important; opacity:0.80; filter:alpha(opacity=80); } .gv_marker_list_item_name, .gv_marker_list_item_desc { font-size:10px !important; } </style>  <script type="text/javascript"> function GV_Map() { GV_Setup_Map(); GV_Draw_Marker({lat:49.1950000,lon:-123.1819444,name:'Vancouver (YVR)',desc:'Vancouver Int\'l',color:'red',icon:'circle'}); GV_Draw_Marker({lat:48.6469444,lon:-123.4258333,name:'Victoria (YYJ)',desc:'Victoria Int\'l',color:'red',icon:'triangle'}); GV_Draw_Marker({lat:50.7022222,lon:-120.4419444,name:'Kamloops (YKA)',desc:'YKA, Kamloops, BC',color:'red',icon:'triangle'}); GV_Draw_Marker({lat:47.4488889,lon:-122.3091667,name:'Seattle (SEA)',desc:'Seattle Tacoma Int\'l',color:'cyan',icon:'circle'}); GV_Draw_Marker({lat:48.7925000,lon:-122.5375000,name:'Bellingham (BLI)',desc:'Bellingham Int\'l',color:'cyan',icon:'triangle'}); GV_Draw_Marker({lat:46.9666667,lon:-122.9000000,name:'Olympia (OLM)',desc:'OLM, Olympia, WA',color:'cyan',icon:'triangle'}); GV_Draw_Marker({lat:45.5894400,lon:-122.6068200,name:'Portland (PDX)',desc:'Portland Int\'l',color:'lime',icon:'circle'}); GV_Draw_Marker({lat:44.1166667,lon:-123.2166667,name:'Eugene (EUG)',desc:'Mahlon Sweet Field',color:'lime',icon:'triangle'}); GV_Draw_Marker({lat:44.2541600,lon:-121.1505100,name:'Redmond (RDM)',desc:'Roberts Field',color:'lime',icon:'triangle'}); GV_Finish_Map(); } GV_Map(); // execute the above code // https://www.gpsvisualizer.com/map_input?form=google&google_full_screen=0&height=550&width=400&wpt_list=name </script> </body> </html>