{"id":1586,"date":"2009-01-04T10:04:27","date_gmt":"2009-01-04T17:04:27","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=1586"},"modified":"2015-02-25T19:40:31","modified_gmt":"2015-02-26T02:40:31","slug":"34-integrating-and-customizing-google-maps","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/34-integrating-and-customizing-google-maps\/","title":{"rendered":"#34: Integrating and Customizing Google Maps"},"content":{"rendered":"
Google maps, with all the dragging and zooming and satellite view and all, is my mapping service of choice. Google offers an free API for their maps so you can integrate them right onto your site. Set you own default location, zoom level, widgetry. Even add your own markers with custom balloons. Remember though, if a map and directions are vital to your site, nothing beats some “plain English” directions.<\/p>\n
Links from video:<\/strong>\t\t\t<\/p>\n Google maps, with all the dragging and zooming and satellite view and all, is my mapping service of choice. Google offers an free API for their maps so you can integrate them right onto your site. Set you own default location, zoom level, widgetry. Even add your own markers with custom balloons. Remember though, if […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":3927,"url":"https:\/\/css-tricks.com\/snippets\/html\/get-directions-form-google-maps\/","url_meta":{"origin":1586,"position":0},"title":"Get Directions Form (Google Maps)","date":"September 8, 2009","format":false,"excerpt":"Enter your location saddr = blank input field for entering START address daddr = hard-coded END address Enter an address and press button and a popup window opens with directions. Enter no address, and just a map of the END address opens. Live Demo Enter your location \u00a0","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154528,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/20-data-data-data-attrdata\/","url_meta":{"origin":1586,"position":1},"title":"#20: Data! data-*! .data()! .attr(data-*)!","date":"October 29, 2013","format":false,"excerpt":"Data. In the world of jQuery, it's all about bits of information that are attached directly to elements (rather than, say, a variable with onus only to itself). There is a ton of ways to save bits of data on the \"client side\" (in the browser, rather than the server).\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22055,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-weight\/","url_meta":{"origin":1586,"position":2},"title":"font-weight","date":"June 17, 2013","format":false,"excerpt":"The font-weight property sets the weight, or thickness, of a font and is dependent either on available font faces within a font family or weights defined by the browser. span { font-weight: bold; } The font-weight property accepts either a keyword value or predefined numeric value. The available keywords are:\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191783,"url":"https:\/\/css-tricks.com\/snippets\/sass\/deep-getset-maps\/","url_meta":{"origin":1586,"position":3},"title":"Deep Get\/Set in Maps","date":"December 29, 2014","format":false,"excerpt":"When working on complex Sass architectures, it is not uncommon to use Sass maps to maintain configuration and options. From time to time, you'll see maps within maps (possibly on several levels) like this one from o-grid: $o-grid-default-config: ( columns: 12, gutter: 10px, min-width: 240px, max-width: 1330px, layouts: ( S:\u2026","rel":"","context":"With 11 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3392,"url":"https:\/\/css-tricks.com\/video-screencasts-3\/","url_meta":{"origin":1586,"position":4},"title":"Video Screencasts","date":"August 12, 2009","format":false,"excerpt":"#40: How z-index Works Running time: 18:37 Z-index can be a little confusing sometimes. In this screencast I attempt to explain how it works, how it's tied to positioning, some quirks, and some general advice. #39: How to Use sIFR 3 Running time: 22:10 sIFR (Scalable Inman Flash Replacement) is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":148044,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/03-select\/","url_meta":{"origin":1586,"position":5},"title":"#03: Select and Do","date":"August 24, 2013","format":false,"excerpt":"One way to think of jQuery is the \"Select and Do\" library. jQuery is particularly good at selecting elements on the page (stuff in the DOM) and then doing something. Select and do. Select and do. See the Pen 99a923df4131377dc308895be1baf4e1 by Chris Coyier (@chriscoyier) on CodePen In this screencast we\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1586"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1586"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1586\/revisions"}],"predecessor-version":[{"id":18071,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1586\/revisions\/18071"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1586"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n