గూగుల్ మ్యాప్స్ ఓవర్లే

గూగల్ మ్యాప్ - మెడ్ ఆవర్లు

మెడ్ ఆవర్లు అనేది గోళంపై అక్షాంశాలు/రేఖాంశాలకు జతచేసిన వస్తువులు

గూగల్ మ్యాప్ వివిధ రకాల మెడ్ ఆవర్లు ఉన్నాయి:

• మార్కర్ - గోళంపై ఒక స్థానం. మార్కర్ స్వంత ప్రతిమను చూపవచ్చు
• సరళ రేఖ (Polyline) - గోళంపై అంటే కొన్ని రేఖలు
• పలకొన్ని రేఖలు (Polygon) - గోళంపై అంటే 'మూసిన' రూపంలో ఉంటుంది
• గోళాకారం మరియు చతురస్రాకారం (Circle మరియు Rectangle)
• సమాచార పట్టిక (Info Windows) - మాప్ పైన పప్పుపైన కంటెంట్ చూపిస్తుంది
• స్వంత మెడ్ ఆవర్లు (Custom overlays)

గూగల్ మ్యాప్ - మార్కర్ జత చేయడం

Marker నిర్మాణ పద్ధతి మార్కర్ ను సృష్టించగలదు. గమనించండి మార్కర్ ను చూపించడానికి position అంశాన్ని సెట్ చేయవలసి ఉంటుంది.

setMap() పద్ధతిని ఉపయోగించి మార్కర్ ను మాప్ కు జత చేయండి:

ఇన్స్టాన్స్

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

గూగల్ మ్యాప్ - మార్కర్ అనిమేషన్

క్రింది ఉదాహరణలో animation అంశాన్ని మార్కర్ కు సెట్ చేయడం చూడండి:

ఇన్స్టాన్స్

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

గూగల్ మ్యాప్ - మార్కర్ కు ప్రత్యేక ప్రతిమను వాడండి

క్రింది ఉదాహరణలో అప్రమేయ మార్కర్ స్థానానికి ఉపయోగించబడే చిత్రాన్ని (ప్రతిమను) నిర్ధారించబడింది:

ఇన్స్టాన్స్

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

గూగల్ మ్యాప్ - సరళ రేఖ

సరళ రేఖ సంక్రమణంలో కొనసాగే కొన్ని కోణాలతో చిత్రీకరించబడిన రేఖ

సరళ రేఖ దిశాంశాలు మద్దతు చేస్తుంది:

• path నిర్ధారించబడిన మార్గం యొక్క కొన్ని అక్షాంశాలు/రేఖాంశాలు
• strokeColor - పంక్తి యొక్క హెక్సాడెసిమల్ రంగు (ఫార్మాట్: "#FFFFFF") నిర్ణయించుటకు:
• strokeOpacity - పంక్తి యొక్క అనుమతి నిర్ణయించుటకు (0.0 నుండి 1.0 మధ్య విలువలు):
• strokeWeight - కన్నుల రేఖల విస్తరణ పరిమాణం (పిక్సెల్స్ లో) నిర్ణయించుటకు:
• editable - ఈ పంక్తిని వినియోగదారుడు సవరించగలరా అని నిర్ణయించుటకు (true/false):

ఇన్స్టాన్స్

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

గూగుల్ మ్యాప్ - పలకాలు

పలకాలు కర్ణాలను వంటిది, ఇది కొన్ని క్రమబద్ధమైన కోర్డినేట్స్ కొరకు కొరకు ఉంటుంది. అయితే, పలకాలు మూసిన రంగాన్ని నిర్వచించడానికి డిజైన్ చేయబడింది.

పలకాలు ప్రత్యేకించి నెరుగులను కలిగినది, మరియు దాని రూపం "మూసిన" ఉంటుంది (అన్ని లైన్లు కలిసిపోతాయి).

పలకాలు క్రింది అంశాలను మద్దతు చేస్తుంది:

• path - పంక్తి యొక్క అక్షాంశాలు/దూరాలను నిర్ణయించుటకు (మొదటి మరియు చివరి కోర్డినేట్స్ సమానంగా ఉంటాయి):
• strokeColor - పంక్తి యొక్క హెక్సాడెసిమల్ రంగు (ఫార్మాట్: "#FFFFFF") నిర్ణయించుటకు:
• strokeOpacity - పంక్తి యొక్క అనుమతి నిర్ణయించుటకు (0.0 నుండి 1.0 మధ్య విలువలు):
• strokeWeight - కన్నుల రేఖల విస్తరణ పరిమాణం (పిక్సెల్స్ లో) నిర్ణయించుటకు:
• fillColor - పరిపూర్ణ రంగం నిర్మాణం యొక్క హెక్సాడెసిమల్ రంగు (ఫార్మాట్: "#FFFFFF") నిర్ణయించుటకు:
• fillOpacity - పరిపూర్ణ రంగం నిర్మాణం యొక్క అనుమతి నిర్ణయించుటకు (0.0 నుండి 1.0 మధ్య విలువలు):
• editable - ఈ పంక్తిని వినియోగదారుడు సవరించగలరా అని నిర్ణయించుటకు (true/false):

ఇన్స్టాన్స్

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

గూగుల్ మ్యాప్ - గోళం

గోళం క్రింది అంశాలను మద్దతు చేస్తుంది:

• center - గోళం కేంద్రంను google.maps.LatLng లో నిర్ణయించుటకు:
• radius - గోళం వైశాల్యాన్ని మీటర్లలో నిర్ణయించుటకు:
• strokeColor - గోళం చుట్టూ ఉన్న రేఖల హెక్సాడెసిమల్ రంగు (ఫార్మాట్: "#FFFFFF") నిర్ణయించుటకు:
• strokeOpacity - కన్నుల రేఖల అనుమతి నిర్ణయించుటకు (0.0 నుండి 1.0 మధ్య విలువలు):
• strokeWeight - కన్నుల రేఖల విస్తరణ పరిమాణం (పిక్సెల్స్ లో) నిర్ణయించుటకు:
• fillColor - పరిపూర్ణ రంగం లోని రంగం యొక్క హెక్సాడెసిమల్ రంగు (ఫార్మాట్: "#FFFFFF") నిర్ణయించుటకు:
• fillOpacity - పరిపూర్ణ రంగం నిర్మాణం యొక్క అనుమతి నిర్ణయించుటకు (0.0 నుండి 1.0 మధ్య విలువలు):
• editable - వినియోగదారుడు గోళాన్ని సవరించగలరా అని నిర్ణయించుటకు (true/false):

ఇన్స్టాన్స్

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

గూగుల్ మ్యాప్ - సమాచార పట్టిక

మార్కర్ కు పాఠం కలిగిన సమాచార పట్టిక చూపించుటకు:

ఇన్స్టాన్స్

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
infowindow.open(map,marker);