Работа с Google карти

VoodooNet · 31 Декември 2012

Здравейте! може ли някои да ми съдейства с примери как може да се направи в Google карти да показва повече от една точка, по координати и със сменено изображение?

Имам още един въпрос. Как може на примера по долу да се направи освен това което е направено, при посочване с мишката на дадно място на картата да показва координатите. Ето и кода:

HTML:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>.:: VoodooNet - Търсене по карта ::.</title>


<script type="text/javascript"
   src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=true">
</script>

	<meta name="description" content="Търсене по карта." />
	<meta name="robots" content="all" /> 
	<meta http-equiv="content-language" content="bg" />
	<meta name="author" content="test" />
	<meta name="copyright" content="test" />
	<meta name="keywords" content="Търсене по карта, map, search map, google map" /> 
	<meta name="rating" content="general" />
	<script type="text/javascript" src="../../../master/jquery-1.5.2.js"></script>
	<style type="text/css">
		.content1
		{
			display: block;
			margin: auto auto auto 18%;
			background: blue;
			width: 88%;
			padding: 10px;
			margin-left: auto;
			margin-right: auto;
			-moz-border-radius: 12px; /* FF1+ */ - Mozzila / moz/
			-webkit-border-radius: 12px; /* Saf3+, Chrome */ - Базирани на wekit
			border-radius: 12px; /* Opera 10.5, IE 9 */ - Поддържащи тази дефиниция на CSS 3
			-khtml-border-radius: 12px;
			-moz-box-shadow: 0 0 20px #585858;
			-webkit-box-shadow: 0 0 20px#585858;
			-box-shadow: 0 0 20px #585858;
		}
		.content2
		{
			display: block;
			margin: auto auto auto 14px;
			background: darkblue;
			color: lightblue;
			width: 96%;
			padding: 10px;
			text-align: justify;
			-moz-border-radius: 12px; /* FF1+ */ - Mozzila / moz/
			-webkit-border-radius: 12px; /* Saf3+, Chrome */ - Базирани на wekit
			border-radius: 12px; /* Opera 10.5, IE 9 */ - Поддържащи тази дефиниция на CSS 3
			-khtml-border-radius: 12px;
			-moz-box-shadow: 0 0 20px #585858;
			-webkit-box-shadow: 0 0 20px#585858;
			-box-shadow: 0 0 20px #585858;
		}
	</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("#plavno").fadeIn("8000");
});
</script>
<body bgcolor="#1D1D1D" text="#99CCFF" onload="initialize()">
<div id="plavno" style="display:none;">
<center>
<img src="map.png" border="0" alt="Търсене по карта" />
</center>
	  <div class="content1">
	  <div class="content2">
	  <br />
	  <center>
	  <h1><small>Търсене по карта</small></h1>
	  <br />
      Адрес / Координати:
      <input id="address" type="textbox" size="60" value="">
      <input type="button" value="Провери" onclick="codeAddress()">
      <br /><br />
	  <br />
	  <table border="1">
	  <tr><td>
  
<div id="map_canvas" style="width: 800px; height: 600px;"></div>      



<script type="text/javascript">
      // Defining some global variables
      var map, geocoder, marker, infowindow;
      // Creating Map and Geocoder
      function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(43.40824, 24.620305);
            var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            }
      // Encode Addres to Location
      function codeAddress() {
            // Get geocode from address
            var address = document.getElementById("address").value;
            geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                  map.setCenter(results[0].geometry.location);
            // Create new Marker at position
            var marker = new google.maps.Marker({
           map: map,
           position: results[0].geometry.location
       });
       // Create variables with address, latitud y longitud
       var address = results[0].formatted_address;
       var lat = Math.round((results[0].geometry.location.lat())*1000000)/1000000;
       var lng = Math.round((results[0].geometry.location.lng())*1000000)/1000000;
            
            // Create content to show from results[0].geometry.location
            var content = '<strong>' + address + '</strong><br />';
                  content += 'Ширина: ' + lat + '<br />';
                  content += 'Дължина: ' + lng;
            // Show content in infowindow
            var infowindow = new google.maps.InfoWindow();
            infowindow.setContent(content);
       infowindow.open(map, marker);
              
     } else {
       alert("Геокода не бе успешен поради следните причини: " + status);
     }
            });
      }
</script>
</td></tr>
</table>
</center>
<br />
</div></div>
<a href="../search.php"><font color="orange">Назад</font></a>
<br /><br />
<center><font color="orange" size="3"><i>© test</i></font></center>
</div>
</body>
</html>

Работа с Google карти

VoodooNet

Registered