{"id":4229,"date":"2014-07-16T12:18:24","date_gmt":"2014-07-16T10:18:24","guid":{"rendered":"http:\/\/www.karadere.com\/blog\/?p=4229"},"modified":"2014-07-16T12:18:24","modified_gmt":"2014-07-16T10:18:24","slug":"google-map-api-sini-kullanmak-javascript-html-kod-ornegi","status":"publish","type":"post","link":"https:\/\/www.karadere.com\/blog\/google-map-api-sini-kullanmak-javascript-html-kod-ornegi.html","title":{"rendered":"Google Map Api sini kullanmak. Javascript html kod \u00f6rne\u011fi"},"content":{"rendered":"<p>https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/event-domListener<\/p>\n<p>&nbsp;<\/p>\n<p>\u00f6rnek kod a\u015fa\u011f\u0131daki gibidir.<\/p>\n<p>&nbsp;<\/p>\n<p>&lt;!DOCTYPE html PUBLIC &#8220;-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN&#8221; &#8220;http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd&#8221;&gt;<\/p>\n<p>&lt;html xmlns=&#8221;http:\/\/www.w3.org\/1999\/xhtml&#8221;&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;meta name=&#8221;robots&#8221; content=&#8221;noindex, nofollow&#8221;&gt;<br \/>\n&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;stil.css&#8221; \/&gt;<br \/>\n&lt;meta name=&#8221;viewport&#8221;<br \/>\ncontent=&#8221;width=device-width, initial-scale=1.0, user-scalable=no&#8221;&gt;<br \/>\n&lt;meta charset=&#8221;UTF-8&#8243;&gt;<\/p>\n<p>&lt;script language=&#8221;Javascript&#8221; type=&#8221;text\/javascript&#8221; src=&#8221;http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js&#8221;&gt;&lt;\/script&gt;<br \/>\n&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;http:\/\/maps.googleapis.com\/maps\/api\/js?sensor=true&#8221;&gt;&lt;\/script&gt;<\/p>\n<p>&lt;script type=&#8221;text\/javascript&#8221;&gt;<\/p>\n<p>\/*<br \/>\nGlobal<br \/>\n*\/<br \/>\nvar map;<\/p>\n<p>function initialize() {<\/p>\n<p>\/*<br \/>\nBasic Setup<br \/>\n*\/<\/p>\n<p>\/\/ var latLng = new google.maps.LatLng(40.704686,-74.011602);<\/p>\n<p>var latLng = new google.maps.LatLng(38.9568857,35.2408826);<\/p>\n<p>var myOptions = {<br \/>\npanControl: true,<br \/>\nzoomControl: true,<br \/>\nmapTypeControl: false,<br \/>\nscaleControl: false,<br \/>\nstreetViewControl: false,<br \/>\noverviewMapControl: false,<br \/>\ndraggable: true,<br \/>\ndisableDoubleClickZoom: true, \/\/disable zooming<br \/>\nscrollwheel: true,<br \/>\nzoom: 7,<br \/>\ncenter: latLng,<br \/>\nmapTypeId: google.maps.MapTypeId.SATELLITE, \/\/ ROADMAP; SATELLITE; HYBRID; TERRAIN;<br \/>\nheading: 90,<br \/>\ntilt: 45,<\/p>\n<p>};<\/p>\n<p>map = new google.maps.Map(document.getElementById(&#8220;map_canvas&#8221;), myOptions);<\/p>\n<p>\/*<br \/>\nMARKER<br \/>\n*\/<\/p>\n<p>\/\/for custom image<br \/>\nvar image = &#8216;http:\/\/png-1.findicons.com\/files\/icons\/2582\/koloria\/17\/pin.png&#8217;;<\/p>\n<p>var markerlatlng = new google.maps.LatLng(40.704686,-74.011602);<\/p>\n<p>var locations = [<br \/>\n[&#8216;Benim Mekan\u0131m gogole api denemem &lt;small&gt;\u015ei\u015fi \/small&gt;Lorem Ipsum dizgi ve bask\u0131 end\u00fcstrisinde kullan\u0131lan m\u0131g\u0131r metinlerdir.&lt;br&gt;&lt;img src=&#8221;https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcTRtEHbuHYMgqT6BYORPFn6Yw6jbBb8cQf8zwUYcImHwemmS8B9&#8243; \/&gt; Lorem Ipsum ad\u0131 bilinmeyen bir matbaac\u0131n\u0131n bir hurufat numune kitab\u0131 olu\u015fturmak \u00fczere bir yaz\u0131 galerisini alarak kar\u0131\u015ft\u0131rd\u0131\u011f\u0131 1500 lerden beri end\u00fcstri standard\u0131 sahte metinler olarak kullan\u0131lm\u0131\u015ft\u0131r. Be\u015fy\u00fcz y\u0131l boyunca varl\u0131\u011f\u0131n\u0131 s\u00fcrd\u00fcrmekle kalmam\u0131\u015f, ayn\u0131 zamanda pek de\u011fi\u015fmeden elektronik dizgiye de s\u0131\u00e7ram\u0131\u015ft\u0131r. 1960 larda Lorem Ipsum pasajlar\u0131 da i\u00e7eren Letraset yapraklar\u0131n\u0131n yay\u0131nlanmas\u0131 ile ve yak\u0131n zamanda Aldus PageMaker gibi Lorem Ipsum s\u00fcr\u00fcmleri i\u00e7eren masa\u00fcst\u00fc yay\u0131nc\u0131l\u0131k yaz\u0131l\u0131mlar\u0131 ile pop\u00fcler olmu\u015ftur.&#8217;, 41.0606859,28.9897868, 1],<br \/>\n];<\/p>\n<p>var marker = new google.maps.Marker({<br \/>\nposition: markerlatlng,<br \/>\nicon: image,<br \/>\nanimation: google.maps.Animation.DROP,<br \/>\ntitle:&#8221;Neighborhood&#8221;<br \/>\n});<\/p>\n<p>var marker, i;<\/p>\n<p>for (i = 0; i &lt; locations.length; i++) {<br \/>\nmarker = new google.maps.Marker({<br \/>\nposition: new google.maps.LatLng(locations[i][1], locations[i][2]),<br \/>\nmap: map,<br \/>\nicon: image,<br \/>\nanimation: google.maps.Animation.DROP,<br \/>\ntitle:&#8221;Neighborhood&#8221;<br \/>\n});<\/p>\n<p>google.maps.event.addListener(marker, &#8216;click&#8217;, (function(marker, i) {<br \/>\nreturn function() {<br \/>\ninfowindow.setContent(locations[i][0]);<br \/>\ninfowindow.open(map, marker);<br \/>\n}<br \/>\n})(marker, i));<br \/>\n}<\/p>\n<p>\/*<br \/>\nINFO Bubble<br \/>\n*\/<\/p>\n<p>myInfoWindowOptions = {<br \/>\ncontent: &#8216;&lt;div class=&#8221;info-window-content&#8221;&gt;You can write anything you like here. You can even use &lt;strong&gt;heading&lt;\/strong&gt; tags here.&lt;\/div&gt;&#8217;,<br \/>\nmaxWidth: 400<br \/>\n};<\/p>\n<p>var infowindow = new google.maps.InfoWindow();<\/p>\n<p>google.maps.event.addListener(marker, &#8216;click&#8217;, function() {<br \/>\ninfoWindow.open(map,marker);<br \/>\n});<\/p>\n<p>google.maps.event.addListener(marker, &#8216;dragstart&#8217;, function(){<br \/>\ninfoWindow.close();<br \/>\n});<\/p>\n<p>infoWindow.open(map,marker);<\/p>\n<p>}\/\/end initialize<\/p>\n<p>\/*<br \/>\nonLoad<br \/>\n*\/<\/p>\n<p>$(function(){<br \/>\ninitialize();<br \/>\n});<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;!&#8211;Google Maps APIv3 Background&#8211;&gt;<br \/>\n&lt;div id=&#8221;canvas_holder&#8221;&gt;<br \/>\n&lt;div id=&#8221;map_canvas&#8221;&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;!&#8211; End Google Maps Background &#8211;&gt;<\/p>\n<p>&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/p>\n<p>\u00e7al\u0131\u015fma \u00e7ekli<\/p>\n<p><script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js\" language=\"Javascript\"><\/script><script src=\"http:\/\/maps.googleapis.com\/maps\/api\/js?sensor=true\"><\/script><\/p>\n<p><script>\/\/ <![CDATA[\n\/*\n\t\tGlobal\n\t\t*\/\n\t\tvar map;\n\n\t\tfunction initialize() {\n\n\t\t\t\/*\n\t\t\tBasic Setup\n\t\t\t*\/\n\n\t\t\t\/\/ var latLng = new google.maps.LatLng(40.704686,-74.011602);\n\n\t\t\tvar latLng = new google.maps.LatLng(38.9568857,35.2408826);\n\n\t    \tvar myOptions = {\n\t\t\t\tpanControl: true,\n\t\t\t\tzoomControl: true,\n\t\t\t\tmapTypeControl: false,\n\t\t\t\tscaleControl: false,\n\t\t\t\tstreetViewControl: false,\n\t\t\t\toverviewMapControl: false,\n\t\t\t\tdraggable: true,\n\t\t\t\tdisableDoubleClickZoom: true,     \/\/disable zooming\n\t\t\t\tscrollwheel: true,\n\t      \t\tzoom: 7,\n\t      \t\tcenter: latLng,\n\t      \t\tmapTypeId: google.maps.MapTypeId.SATELLITE, \/\/   ROADMAP; SATELLITE; HYBRID; TERRAIN;\n\t\t\t\theading: 90,\n\t\t\t\ttilt: 45,\n\n\t\t\t\t};\n\n\t\t\tmap = new google.maps.Map(document.getElementById(\"map_canvas\"), myOptions);\n\n\t\t\t\/*\n\t\t\tMARKER\n\t\t\t*\/\n\n\t\t\t\/\/for custom image\n\t\t\tvar image = 'http:\/\/png-1.findicons.com\/files\/icons\/2582\/koloria\/17\/pin.png';\n\n\t\t\tvar markerlatlng = new google.maps.LatLng(40.704686,-74.011602);\n\n\t\t\tvar locations = [\n\t\t\t\t['\u0130pragaz A.\u015e Merkez  <small>19 May\u0131s Caddesi Novabaran<\/small>Lorem Ipsum  dizgi ve bask\u0131 end\u00fcstrisinde kullan\u0131lan m\u0131g\u0131r metinlerdir.\n<img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcTRtEHbuHYMgqT6BYORPFn6Yw6jbBb8cQf8zwUYcImHwemmS8B9\" \/> Lorem Ipsum ad\u0131 bilinmeyen bir matbaac\u0131n\u0131n bir hurufat numune kitab\u0131 olu\u015fturmak \u00fczere bir yaz\u0131 galerisini alarak kar\u0131\u015ft\u0131rd\u0131\u011f\u0131 1500 lerden beri end\u00fcstri standard\u0131 sahte metinler olarak kullan\u0131lm\u0131\u015ft\u0131r. Be\u015fy\u00fcz y\u0131l boyunca varl\u0131\u011f\u0131n\u0131 s\u00fcrd\u00fcrmekle kalmam\u0131\u015f, ayn\u0131 zamanda pek de\u011fi\u015fmeden elektronik dizgiye de s\u0131\u00e7ram\u0131\u015ft\u0131r. 1960 larda Lorem Ipsum pasajlar\u0131 da i\u00e7eren Letraset yapraklar\u0131n\u0131n yay\u0131nlanmas\u0131 ile ve yak\u0131n zamanda Aldus PageMaker gibi Lorem Ipsum s\u00fcr\u00fcmleri i\u00e7eren masa\u00fcst\u00fc yay\u0131nc\u0131l\u0131k yaz\u0131l\u0131mlar\u0131 ile pop\u00fcler olmu\u015ftur.', 41.0606859,28.9897868, 1],\n    \t];\n\n\t\t\tvar marker = new google.maps.Marker({\n\t\t\t    position: markerlatlng,\n\t\t\t\t\ticon: image,\n\t\t\t\t\tanimation: google.maps.Animation.DROP,\n\t\t\t    title:\"Neighborhood\"\n\t\t\t});\n\n\t\t\tvar marker, i;\n\n    for (i = 0; i < locations.length; i++) {  \n      marker = new google.maps.Marker({\n        position: new google.maps.LatLng(locations[i][1], locations[i][2]),\n        map: map,\n\t\t\t\ticon: image,\n\t\t\t\tanimation: google.maps.Animation.DROP,\n\t\t\t  title:\"Neighborhood\"\n      });\n\n      google.maps.event.addListener(marker, 'click', (function(marker, i) {\n        return function() {\n          infowindow.setContent(locations[i][0]);\n          infowindow.open(map, marker);\n        }\n      })(marker, i));\n    }\n\n\t\t\t\/*\n\t\t\tINFO Bubble\n\t\t\t*\/\n\n\t\t\tmyInfoWindowOptions = {\n\t\t\t\tcontent: '\n\n\n\n\n\n<div class=\"info-window-content\">You can write anything you like here. You can even use <strong>heading<\/strong> tags here.<\/div>\n\n\n\n\n\n\n',\n\t\t\t\tmaxWidth: 400\n\t\t\t};\n\n\t\t\tvar infowindow = new google.maps.InfoWindow();\n\n\t\t\tgoogle.maps.event.addListener(marker, 'click', function() {\n\t\t\t\tinfoWindow.open(map,marker);\n\t\t\t});\n\n\t\t\tgoogle.maps.event.addListener(marker, 'dragstart', function(){\n\t\t\t\tinfoWindow.close();\n\t\t\t});\n\n\t\t\tinfoWindow.open(map,marker);\n\n\t\t}\/\/end initialize\n\n\t\t\/*\n\t\tonLoad\n\t\t*\/\n\n\t\t$(function(){\n\t\t\tinitialize();\n\t\t});\n\/\/ ]]><\/script><\/p>\n<p>&nbsp;<\/p>\n<p><!--Google Maps APIv3 Background--><\/p>\n<div id=\"canvas_holder\"><\/div>\n<p><!-- End Google Maps Background --><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/event-domListener &nbsp; \u00f6rnek kod a\u015fa\u011f\u0131daki gibidir. &nbsp; &lt;!DOCTYPE html PUBLIC &#8220;-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN&#8221; &#8220;http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd&#8221;&gt; &lt;html xmlns=&#8221;http:\/\/www.w3.org\/1999\/xhtml&#8221;&gt; &lt;head&gt; &lt;meta name=&#8221;robots&#8221; content=&#8221;noindex, nofollow&#8221;&gt; &lt;link rel=&#8221;stylesheet&#8221; href=&#8221;stil.css&#8221; \/&gt; &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0, user-scalable=no&#8221;&gt; &lt;meta charset=&#8221;UTF-8&#8243;&gt; &lt;script language=&#8221;Javascript&#8221; type=&#8221;text\/javascript&#8221; src=&#8221;http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js&#8221;&gt;&lt;\/script&gt; &lt;script type=&#8221;text\/javascript&#8221; src=&#8221;http:\/\/maps.googleapis.com\/maps\/api\/js?sensor=true&#8221;&gt;&lt;\/script&gt; &lt;script type=&#8221;text\/javascript&#8221;&gt; \/* Global *\/ var map; function initialize() { \/* Basic Setup *\/ \/\/ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[41],"tags":[485,1052,1241,1431],"class_list":["post-4229","post","type-post","status-publish","format-standard","hentry","category-programlama-software","tag-api","tag-google-2","tag-javascript","tag-map","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"aioseo_notices":[],"views":1635,"_links":{"self":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts\/4229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/comments?post=4229"}],"version-history":[{"count":0,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts\/4229\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/media?parent=4229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/categories?post=4229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/tags?post=4229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}