GMap - Kody, triki, sztuczki

11 paź 2013

Wykonanie tiltu mapy w Gmap

<title>Tilt</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  var map;
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(52.217283, 20.972372),
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      heading: 90,
      tilt: 45
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas" style="width:600px; height:500px"></div>

11 paź 2013

Wyrysowanie koła w Gmap

Rysowanie koła. Należy odpowiednio wypełnić właściwości obiektu google.maps.CircleOptions

<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="UTF-8">
  <title>Koło</title>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    var map; var position = new google.maps.LatLng(52.217283, 20.972372);
    function initialize() {
      var mapOptions = {
        center: position,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
      var circleOptions =
      {
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: position,
        radius: 25000
      };
      var cityCircle = new google.maps.Circle(circleOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>
<body>
  <div id="map_canvas" style="width:800px; height:500px"></div>
</body>
</html>

25 kwi 2013

Proste dodawanie markera

var position = new google.maps.LatLng(lat,lng);

var markerOptions = {
position:position,
// draggable:true,
map:map,
title:'Tytuł'
};

var marker = new google.maps.Marker(markerOptions);

8 lut 2013

Rysowanie Rectandle na mapach googla

let bounds=new google.maps.LatLngBounds();
bounds.extend(position);
let rect = new google.maps.Rectangle({map, bounds, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 1});
bounds.extend(position);
rect.setBounds(this.bounds);

22 sty 2013

Zdarzenia klasy google.maps.map

Zdarzenia gmap klasy google.maps.Map v3

bounds_changed
center_changed
click
dblclick
drag
dragend
dragstart
heading_changed
idle
maptypeid_changed
mousemove
mouseout
mouseover
projection_changed
resize
rightclick
tilesloaded
tilt_changed
zoom_changed