{"id":1851,"date":"2012-01-14T19:07:29","date_gmt":"2012-01-14T09:07:29","guid":{"rendered":"https:\/\/eisabainyo.net\/weblog\/?p=1851"},"modified":"2012-01-14T19:16:59","modified_gmt":"2012-01-14T09:16:59","slug":"display-location-aware-google-map-on-page-load-with-jquery-mobile","status":"publish","type":"post","link":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/","title":{"rendered":"Display a location-aware google map on page load with jQuery mobile"},"content":{"rendered":"<p>The following snippet of code will display a google map with user's default location on jQuery mobile page if location services is enabled.  Otherwise, it will use predefined lat and long values to create the map.   The code uses jQuery mobile <a href=\"http:\/\/jquerymobile.com\/demos\/1.0\/docs\/api\/events.html\">pagecreate event<\/a>.  <\/p>\n<p>A little info on jQuery mobile pagecreate event: <\/p>\n<blockquote><p><strong>pagecreate<\/strong><br \/>\nTriggered when the page has been created in the DOM (via ajax or other) but before all widgets have had an opportunity to enhance the contained markup. This event is most useful for user's wishing to create their own custom widgets for child markup enhancement as the jquery mobile widgets do.<\/p>\n<p><code>$( '#aboutPage' ).live( 'pagecreate',function(event){<br \/>\n  ( \":jqmData(role='sweet-plugin')\" ).sweetPlugin();<br \/>\n});<\/code>\n<\/p><\/blockquote>\n<p>And the snippets:<\/p>\n<p><strong>Javascript<\/strong><\/p>\n<pre>\r\nfunction initialize(lat,lng) {\r\n\tvar latlng = new google.maps.LatLng(lat, lng);\r\n\r\n\tvar myoptions = {\r\n\t\tzoom: 12,\r\n\t\tcenter: latlng,\r\n\t\tdisableDefaultUI: true,\r\n\t\tmapTypeId: google.maps.MapTypeId.ROADMAP\r\n\t};\r\n\t\r\n\tvar map = new google.maps.Map(document.getElementById(\"googlemap\"),myoptions);\r\n\t\r\n\tvar icon = new google.maps.MarkerImage('images\/marker.png',\r\n\t\t\tnew google.maps.Size(20, 20), \/\/ size\r\n\t\t\tnew google.maps.Point(0, 0), \/\/ origin\r\n\t\t\tnew google.maps.Point(20, 20) \/\/ anchor\r\n\t\t);\r\n\t\r\n\tvar mymarker = new google.maps.Marker({\r\n\t\tposition: latlng,\r\n\t\tmap: map,\r\n\t\ticon: icon\r\n\t});\r\n}\r\n<\/pre>\n<pre>\r\n$('.page-map').live(\"pagecreate\", function() {\r\n        var lat = -33.887418, lng = 151.17403;\r\n\tif(navigator.geolocation) {\r\n\t\tnavigator.geolocation.getCurrentPosition(function(position){\r\n\t\t\tinitialize(position.coords.latitude,position.coords.longitude);\r\n\t\t}, function() { console.log('Error with getCurrentPosition'); });\r\n\t} else {\r\n                \/\/ predefined location\r\n\t\tinitialize(lat, lng);\r\n\t}\r\n});\r\n<\/pre>\n<p><strong>HTML<\/strong><\/p>\n<pre>\r\n&lt;div data-role=&quot;page&quot; class=&quot;page-map&quot;&gt;\r\n\r\n\t&lt;div data-role=&quot;header&quot;&gt;\r\n\t\t&lt;h1&gt;Google Map&lt;\/h1&gt;\r\n\t&lt;\/div&gt;&lt;!-- \/header --&gt;\r\n\r\n\t&lt;div data-role=&quot;content&quot;&gt;\t\r\n\t\t &lt;div id=&quot;googlemap&quot;&gt;&lt;\/div&gt;\r\n\t&lt;\/div&gt;&lt;!-- \/content --&gt;\r\n\t\r\n\t&lt;div data-role=&quot;footer&quot;&gt;\r\n\t\t&lt;h4&gt;Footer content&lt;\/h4&gt;\r\n\t&lt;\/div&gt;&lt;!-- \/footer --&gt;\r\n\t\r\n&lt;\/div&gt;&lt;!-- \/page --&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The following snippet of code will display a google map with user&#8217;s default location on<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,8],"tags":[],"class_list":["post-1851","post","type-post","status-publish","format-standard","hentry","category-javascript","category-snippets"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Display a location-aware google map on page load with jQuery mobile | Tech Leadership Advice &amp; Resources<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Display a location-aware google map on page load with jQuery mobile | Tech Leadership Advice &amp; Resources\" \/>\n<meta property=\"og:description\" content=\"The following snippet of code will display a google map with user&#039;s default location on\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/\" \/>\n<meta property=\"og:site_name\" content=\"Tech Leadership Advice &amp; Resources\" \/>\n<meta property=\"article:published_time\" content=\"2012-01-14T09:07:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-01-14T09:16:59+00:00\" \/>\n<meta name=\"author\" content=\"Isabel Nyo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabel Nyo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/\"},\"author\":{\"name\":\"Isabel Nyo\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"headline\":\"Display a location-aware google map on page load with jQuery mobile\",\"datePublished\":\"2012-01-14T09:07:29+00:00\",\"dateModified\":\"2012-01-14T09:16:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/\"},\"wordCount\":121,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"articleSection\":[\"Javascript\",\"Snippets\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/\",\"name\":\"Display a location-aware google map on page load with jQuery mobile | Tech Leadership Advice &amp; Resources\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\"},\"datePublished\":\"2012-01-14T09:07:29+00:00\",\"dateModified\":\"2012-01-14T09:16:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eisabainyo.net\/weblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Display a location-aware google map on page load with jQuery mobile\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/\",\"name\":\"Career Resources for Professionals in Tech\",\"description\":\"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering &amp; Technology Directors\",\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\",\"name\":\"Isabel Nyo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"caption\":\"Isabel Nyo\"},\"logo\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\"},\"description\":\"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more..\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Display a location-aware google map on page load with jQuery mobile | Tech Leadership Advice &amp; Resources","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/","og_locale":"en_US","og_type":"article","og_title":"Display a location-aware google map on page load with jQuery mobile | Tech Leadership Advice &amp; Resources","og_description":"The following snippet of code will display a google map with user's default location on","og_url":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/","og_site_name":"Tech Leadership Advice &amp; Resources","article_published_time":"2012-01-14T09:07:29+00:00","article_modified_time":"2012-01-14T09:16:59+00:00","author":"Isabel Nyo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Isabel Nyo","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/#article","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/"},"author":{"name":"Isabel Nyo","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"headline":"Display a location-aware google map on page load with jQuery mobile","datePublished":"2012-01-14T09:07:29+00:00","dateModified":"2012-01-14T09:16:59+00:00","mainEntityOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/"},"wordCount":121,"commentCount":0,"publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"articleSection":["Javascript","Snippets"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/","url":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/","name":"Display a location-aware google map on page load with jQuery mobile | Tech Leadership Advice &amp; Resources","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/#website"},"datePublished":"2012-01-14T09:07:29+00:00","dateModified":"2012-01-14T09:16:59+00:00","breadcrumb":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/14\/display-location-aware-google-map-on-page-load-with-jquery-mobile\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eisabainyo.net\/weblog\/"},{"@type":"ListItem","position":2,"name":"Display a location-aware google map on page load with jQuery mobile"}]},{"@type":"WebSite","@id":"https:\/\/eisabainyo.net\/weblog\/#website","url":"https:\/\/eisabainyo.net\/weblog\/","name":"Career Resources for Professionals in Tech","description":"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering &amp; Technology Directors","publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab","name":"Isabel Nyo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","caption":"Isabel Nyo"},"logo":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/"},"description":"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more.."}]}},"_links":{"self":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/comments?post=1851"}],"version-history":[{"count":5,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1851\/revisions"}],"predecessor-version":[{"id":1856,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1851\/revisions\/1856"}],"wp:attachment":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/media?parent=1851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/categories?post=1851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/tags?post=1851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}