<!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { margin: 0; padding: 0; height: 100%; } </style> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var markers = [ { "id": "1", "ilAdi": "ADANA", "lat": "36.989271142397", "lng": "35.371719723438", "toplam": "15" }, { "id": "5", "ilAdi": "AMASYA", "lat": "40.64991", "lng": "35.83532", "toplam": "1" }, { "id": "6", "ilAdi": "ANKARA", "lat": "39.921691562709", "lng": "32.78596043335", "toplam": "3" }, { "id": "7", "ilAdi": "ANTALYA", "lat": "36.822603262281", "lng": "31.400515253906", "toplam": "3" }, { "id": "9", "ilAdi": "AYDIN", "lat": "37.8117033", "lng": "28.4863963", "toplam": "2" }, { "id": "10", "ilAdi": "BALIKES\u0130R", "lat": "39.648369", "lng": "27.88261", "toplam": "1" }, { "id": "16", "ilAdi": "BURSA", "lat": "40.164126009004", "lng": "29.013311650391", "toplam": "10" }, { "id": "17", "ilAdi": "\u00c7ANAKKALE", "lat": "40.155312", "lng": "26.41416", "toplam": "1" }, { "id": "19", "ilAdi": "\u00c7ORUM", "lat": "40.5505556", "lng": "34.9555556", "toplam": "1" }, { "id": "22", "ilAdi": "ED\u0130RNE", "lat": "41.6818079", "lng": "26.562269", "toplam": "2" }, { "id": "26", "ilAdi": "ESK\u0130\u015eEH\u0130R", "lat": "39.784302", "lng": "30.51922", "toplam": "1" }, { "id": "27", "ilAdi": "GAZ\u0130ANTEP", "lat": "37.06622", "lng": "37.38332", "toplam": "1" }, { "id": "32", "ilAdi": "ISPARTA", "lat": "37.764771", "lng": "30.556561", "toplam": "1" }, { "id": "33", "ilAdi": "\u0130\u00c7EL", "lat": "36.804204", "lng": "34.638567", "toplam": "4" }, { "id": "34", "ilAdi": "\u0130STANBUL", "lat": "40.988167956783", "lng": "29.089569863281", "toplam": "198" }, { "id": "35", "ilAdi": "\u0130ZM\u0130R", "lat": "38.41471416618", "lng": "27.060666992874", "toplam": "1" }, { "id": "39", "ilAdi": "KIRKLAREL\u0130", "lat": "41.7333333", "lng": "27.2166667", "toplam": "2" }, { "id": "40", "ilAdi": "KIR\u015eEH\u0130R", "lat": "39.14249", "lng": "34.17091", "toplam": "1" }, { "id": "41", "ilAdi": "KOCAEL\u0130", "lat": "40.8532704", "lng": "29.8815203", "toplam": "6" }, { "id": "43", "ilAdi": "K\u00dcTAHYA", "lat": "39.4166667", "lng": "29.9833333", "toplam": "1" }, { "id": "45", "ilAdi": "MAN\u0130SA", "lat": "38.619099", "lng": "27.428921", "toplam": "1" }, { "id": "47", "ilAdi": "MARD\u0130N", "lat": "37.3211634", "lng": "40.7244774", "toplam": "2" }, { "id": "48", "ilAdi": "MU\u011eLA", "lat": "36.873838776512", "lng": "28.82503688125", "toplam": "1" }, { "id": "59", "ilAdi": "TEK\u0130RDA\u011e", "lat": "41.099341237277", "lng": "27.491947461719", "toplam": "3" }, { "id": "67", "ilAdi": "ZONGULDAK", "lat": "41.356497237829", "lng": "31.768518597656", "toplam": "1" }, { "id": "68", "ilAdi": "AKSARAY", "lat": "38.36869", "lng": "34.03698", "toplam": "1" }, { "id": "71", "ilAdi": "KIRIKKALE", "lat": "39.846821", "lng": "33.515251", "toplam": "1" }, { "id": "74", "ilAdi": "BARTIN", "lat": "41.641521", "lng": "32.345581", "toplam": "1" } ]; var map; function initialize() { var myLatlng = new google.maps.LatLng(39.01440707292626, 35.30710437500001); var myOptions = { zoom: 6, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); setTimeout(parseAdres, 500); google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng); }); } google.maps.event.addDomListener(window, 'load', initialize); function placeMarker(location) { var marker = new google.maps.Marker({ position: location, map: map }); new google.maps.InfoWindow( { content: ""+location, size: new google.maps.Size(50,50) }).open(map,marker); //map.setCenter(location); } function parseAdres() { for (var i = 0; i < markers.length; i++) { var mrklatlng = new google.maps.LatLng(markers[i].lat, markers[i].lng); var mrkicon = new google.maps.MarkerImage("shara.gif", new google.maps.Size(40, 50), new google.maps.Point(0, 0)); var markerOptions = { map: map, position: mrklatlng, visible: true, icon: mrkicon, title: markers[i].toplam + " Satış Noktası, görmek için tıklayınız." }; temp = new google.maps.Marker(markerOptions); temp.il_id = markers[i].id; google.maps.event.addListener(temp, "click", function (e) { map.setCenter(e.latLng); ilsec(this.il_id); }); } } function ilsec(id) { var dataString = "il=" + id; $("#bayiler").html("数据"+id); $("html,body").animate({ scrollTop: $("#bayiler").offset().top - 60 }, 1000); } </script> </head> <body> <div id="map-canvas"> </div> <div id="bayiler">kk</div> </body> </html>