Sayfayı Yazdır | Pencereyi Kapat

Google Maps Example

Nereden Yazdırıldığı: Datakent
Kategori: Diğer bölümler
Forum Adı: C# & ASP.NET
Forum Tanımlaması: C# ve ASP.NET ile ilgili soru / sorun ve paylaşım bölümü
URL: http://forum.datakent.com/forum_posts.asp?TID=2780
Tarih: 23.Mayis.2024 Saat 22:06


Konu: Google Maps Example
Mesajı Yazan: murat turan
Konu: Google Maps Example
Mesaj Tarihi: 19.Nisan.2015 Saat 10:07
Google Maps Kullanım Örneği (Koordinat bulma ve Belirli bir alanın çizilerek belirtilmesi)


<!DOCTYPE html>
<html>
  <head>
    <title>Liman Map</title>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

    <script>
        // help
        // https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays
        // https://developers.google.com/maps/documentation/javascript/maptypes
        //
        var map;

        var xpoins = [
           new google.maps.LatLng(41.010731, 39.768925),
           new google.maps.LatLng(41.006469, 39.761147),
           new google.maps.LatLng(41.004031, 39.758264),
           new google.maps.LatLng(41.012083, 39.762886),
           new google.maps.LatLng(41.0084, 39.756206),
           new google.maps.LatLng(41.005319, 39.755806),
           new google.maps.LatLng(41.005328, 39.75),
           new google.maps.LatLng(41.012475, 39.746764),
           new google.maps.LatLng(41.012772, 39.740344),
           new google.maps.LatLng(41.009444, 39.738056),
           new google.maps.LatLng(41.006833, 39.738906),
           new google.maps.LatLng(41.004142, 39.741275),
           new google.maps.LatLng(41.001003, 39.757106)
        ];

        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(41.010731, 39.768925)
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);


        function showCoordinates() {

            for (var i = 0; i < xpoins.length; i++) {
                var info1 = new google.maps.InfoWindow({ map: map, position: xpoins, content: 'D' + (i + 1) });

                map.setCenter(xpoins);
            }

            map.setZoom(15);
            map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
            
        }

        function DrawPolygon() {
            var bermudaTriangle = new google.maps.Polygon({
                paths: xpoins,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 3,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            });

            bermudaTriangle.setMap(map);
        }

    </script>
  </head>
  <body>
      <div>

          <input type="button" id="Button1" name="Button1" value="Show" onclick="showCoordinates();" />
          <input type="button" id="Button2" name="Button2" value="Draw" onclick="DrawPolygon();" />

      </div><br />
    <div id="map-canvas"></div>
  </body>
</html>


-------------
http://www.kasatakip.com - Kasa Takip  |  http://www.caritakip.com - Cari Takip  |  http://www.evraktakip.com - Evrak Takip  |  http://www.etasqlmobil.com - ETA SQL Mobil


Sayfayı Yazdır | Pencereyi Kapat