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 mar 2009

Utworzenie div i dodanie do mapy

var div = document.createElement('div');
div.style.width = '1px';
div.style.height = '1px';
div.style.background = 'gray';
map.getContainer().appendChild(div);

7 lut 2009

Zmiana rozmiaru mapy

map = new GMap2(document.getElementById("mapcan"));

map.getContainer().style.width = 500+'px';
map.getContainer().style.height = 500+'px';
map.checkResize();

Kod należy umieścić w funkcji JS.
Wywołanie funkcji powoduje zmiane rozmiaru mapy.

19 sty 2009

Dodanie przesuwalnego markera

var color = "red";
var f = new GIcon();
f.image = "http://labs.google.com/ridefinder/images/mm_20" + color + ".png";
f.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
f.iconSize = new GSize(12, 20);
f.shadowSize = new GSize(22, 20);
f.iconAnchor = new GPoint(6, 20);
f.infoWindowAnchor = new GPoint(6, 1);
f.infoShadowAnchor = new GPoint(13, 13);

newMarker = new GMarker(point,
  { icon: f, draggable: true }
);