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>

Wyrysowanie koła w Gmap

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

<!DOCTYPE html>
<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>

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);

Rysowanie Rectandle na mapach googla


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

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

Wyszukiwanie elementów tablicy po nazwie

var name=’polska’;
markersArray=[];
name=name.toLowerCase();
for (var i=0; i<markers.length; i++)
{
 if( markers[i].s==1 &&
 markers[i].title.toLowerCase().indexOf(name)!=-1)
 {
  var marker=newMarker(new GLatLng(markers[i].g, markers[i].l), markers[i].id, markers[i].title, markers[i].c);
  markersArray.push(marker);
 } 
}

Wyszukiwanie elementów tablicy po nazwie

var name=’polska’;
markersArray=[];
name=name.toLowerCase();
for (var i=0; i<markers.length; i++)
{
 if( markers[i].s==1 &&
 markers[i].title.toLowerCase().indexOf(name)!=-1)
 {
  var marker=newMarker(new GLatLng(markers[i].g, markers[i].l), markers[i].id, markers[i].title, markers[i].c);
  markersArray.push(marker);
 } 
}

Rysowanie boxa na mapie

function rysowanieBoxa() {
 if (boxes != null) {
  for (var i = 0; i < boxes.length; i++) {
   var vertices = [
   boxes[i].getSouthWest(),
   new GLatLng(boxes[i].getSouthWest().lat(),
    boxes[i].getNorthEast().lng()),
   boxes[i].getNorthEast(),
   new GLatLng(boxes[i].getNorthEast().lat(),
    boxes[i].getSouthWest().lng()),
   boxes[i].getSouthWest()
   ];
   var polygon = new GPolyline(vertices, ‚#ff0000’, 1, 1.0);
   map.addOverlay(polygon);
  }
 }
}

Przygotownie boxa w obrębie punktu

var marker = new GMarker(point,{title: address});
map.addOverlay(marker);

boxes=[];
boxes[0]=
new google.maps.LatLngBounds(
new google.maps.LatLng(point.lat()-dist*0.01,point.lng()-dist*0.02),
new google.maps.LatLng(point.lat()+dist*0.01,point.lng()+dist*0.02)
);

Odczyt danych z json i dodanie dymka na mapie

var jsonData = eval(‚(‚ + doc + ‚)’);
var t_markers = jsonData.markers;
for (var i=0; i<t_markers.length; i++)
{
map.openInfoWindowHtml(new GLatLng(t_markers[i].lng, t_markers[i].lat),
‚<b>’+ t_markers[i].title+”</b><br><br>” + t_markers[i].description);
}