Google Maps

northwest · Czerwiec 5, 2010

Witam serdecznie,

mam taką aplikację:

<!--

var mapa; // obiekt globalny

function dodajMarker(opcjeMarkera)

{

opcjeMarkera.map = mapa;

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

google.maps.event.addListener(marker,'click',function(zdarzenie)

{

dymek.setContent('<strong>Kliknąłeś na marker!</strong><br />Współrzędne GPS markera:<br />'+marker.getPosition());

dymek.setPosition(marker.getPosition());

dymek.open(mapa);

});

}

function mapaStart()

{

var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);

var opcjeMapy = {

zoom: 10,

center: wspolrzedne,

mapTypeId: google.maps.MapTypeId.SATELLITE

};

mapa = new google.maps.Map(document.getElementById("mapa"), opcjeMapy);

// wspólne cechy ikon

var rozmiar = new google.maps.Size(32,32);

var punkt_startowy = new google.maps.Point(0,0);

var punkt_zaczepienia = new google.maps.Point(16,16);

// ikonki

var ikona1 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal2/icon38.png", rozmiar, punkt_startowy, punkt_zaczepienia);

var ikona2 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal4/icon23.png", rozmiar, punkt_startowy, punkt_zaczepienia);

var ikona3 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal3/icon13.png", rozmiar, punkt_startowy, punkt_zaczepienia);

dodajMarker({position: new google.maps.LatLng(53.4203,14.7011), title: 'Restauracja #1', icon: ikona1});

dodajMarker({position: new google.maps.LatLng(13.3902,14.7202), title: 'Restauracja #2', icon: ikona1});

dodajMarker({position: new google.maps.LatLng(53.4101,14.6033), title: 'Myjnia', icon: ikona2});

dodajMarker({position: new google.maps.LatLng(53.4014,14.5104), title: 'Tu byłem 6 razy', icon: ikona3});

}

-->

</script>

Nie wiem jak zrobić:

- dymek z opisem po kliknięciu na markera (dla każdego markera będzie inny text)

- centrowaniem markerów (chciałbym żeby mapka zawsze pokazywała wszystkie markery jakie są na mapie - przy optymalnym zoomie).

Markery (położenie) będę sobie generował w PHP :-)

Wie ktoś może jak to zrobić?

Z góry dzięki za pomoc,

Łukasz

regdos · Czerwiec 6, 2010

Nie wiem jak zrobić:

- dymek z opisem po kliknięciu na markera (dla każdego markera będzie inny text)

- centrowaniem markerów (chciałbym żeby mapka zawsze pokazywała wszystkie markery jakie są na mapie - przy optymalnym zoomie).

Markery (położenie) będę sobie generował w PHP :-)

1.

http://gmaps-samples-v3.googlecode.com/svn/trunk/single-infowindow/single-infowindow.html

http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html

Co do drugiego problemu to musiałbyś przejrzeć po prostu dokumentację http://code.google.com/intl/pl/apis/maps/documentation/javascript/reference.html

northwest · Czerwiec 6, 2010

witam ponownie,

zrobiłem sobie coś takiego:

- plik points.php (generujący pliki):

[{"idobiektu":"points.php?idobiektu=0000","lat":"1.23","lng":"3.45","nazwa":"nazwa","ikonka":"market.png","etykietka":"opis","coto":"punkt"}, 	
{"idobiektu":"points.php?idobiektu=0000","lat":"1.43","lng":"3.15","nazwa":"nazwa","ikonka":"market.png","etykietka":"opis","coto":"punkt"}]

- plik maps.js

var map = null;
var refreshTime = 5000;
var prevData = null;
var map;
var geocoder;
var selectedMarker;

function load(){
   if (GBrowserIsCompatible()) {
       map = new GMap2(document.getElementById("mapa"));
       map.addControl(new GLargeMapControl());
       map.addControl(new GScaleControl());
       map.addControl(new GMapTypeControl());
       geocoder = new GClientGeocoder();
       map.enableContinuousZoom();
       map.enableDoubleClickZoom();
       map.enableScrollWheelZoom();
       map.setCenter(new GLatLng(52.173931692568, 18.8525390625), 	
5);

       reloadPoints();
   }
}

function getAddress(){
   //selectedMarker = this;
   //geocoder.getLocations(this.getLatLng(), showAddress);
}

function showAddress(response){
   var latlng = selectedMarker.getLatLng();
   var place = response.Placemark[0];
   var description = selectedMarker.value + '<br/>Adres: ' + 	
place.address + '<br /><br/>';
   selectedMarker.openInfoWindowHtml(description);
}

function addPoints(data){
   if (prevData != data || data == null) {
       prevData = data;
       eval("points = (" + data + ")");
       pointsCount = points.length;
       map.clearOverlays();
       var maxlng = 0;
       var maxlat = 0;
       var minlng = 0;
       var minlat = 0;
	var licz=0;
       for (var i = 0; i < pointsCount; i++) {
           var etykietka = points[i]['etykietka'];
           var point = new GLatLng(points[i]['lat'], 	
points[i]['lng']);
           map.addOverlay(createMarker(point, points[i]['nazwa'], 	
points[i]['ikonka'], map));
           var label = new ELabel(new GLatLng(points[i]['lat'], 	
points[i]['lng']), "<div 	
style=\"background-color:#ccccff;border:2px solid 	
black\"><small>" + etykietka + 	
"</small></div>", null, new GSize(6, -30), 75);
           map.addOverlay(label);
           if (points[i]['coto'] == 'punkt') {
               if (licz == 0) {
				minlat = points[i]['lat'];
			}
			else {
				minlat = Math.min(points[i]['lat'], minlat);
			}
			if (licz == 0) {
				maxlat = points[i]['lat'];
			}
			else {
				maxlat = Math.max(points[i]['lat'], maxlat);
			}
			if (licz == 0) {
				minlng = points[i]['lng'];
			}
			else {
				minlng = Math.min(points[i]['lng'], minlng);
			}
               if (licz == 0) {
				maxlng = points[i]['lng'];
			}
			else {
				maxlng = Math.max(points[i]['lng'], maxlng);
			}
			licz++;
           }
       }
       var dlat = (maxlat - minlat) * 0.1;
       var dlng = (maxlng - minlng) * 0.1;
       var min = new GLatLng(minlat - dlat, minlng - dlng);
       var max = new GLatLng(maxlat + dlat, maxlng + dlng);
       var bounds = new GLatLngBounds(min, max);



       map.setZoom(map.getBoundsZoomLevel(bounds));
       map.setCenter(bounds.getCenter());


   }
}

function createMarker(point, nazwa, ikonka, map){

   var icon = new GIcon();
   icon.image = ikonka;
   icon.iconAnchor = new GPoint(23, 23);
   icon.infoWindowAnchor = new GPoint(23, 23);
   var marker = new GMarker(point, icon);
   marker.value = nazwa;
   //marker.openExtInfoWindow(marker, "click", getAddress);
   //GEvent.addListener(marker, "click", getAddress);
   GEvent.addListener(marker, "click");
   return marker;
}




function reloadPoints(){
   loadPointData();
   //setTimeout(reloadPoints, refreshTime);
}

Mapka ładnie mi się wyświetla, centruje :lol: problemem jest tylko

to, że jak oddalę zoom, kliknę na ikonkę to wyskakuje js error

jakiś :/

Szczegóły błędu na stronie sieci Web

Agent użytkownika: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT

6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR

3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C;

.NET4.0E)

Sygnatura czasowa: Sun, 6 Jun 2010 11:56:20 UTC

Wiadomość: 'this.Qg' jest pusty lub nie jest obiektem

Wiersz: 241

Znak: 29

Kod: 0

Identyfikator URI:

http://maps.gstatic.com/intl/pl_ALL/mapfiles/225b/maps2.api/main.js

dziwne jest też to, że okienko z informacjami wyświetla się

ciągne, a nie po kliknięciu...

Wie ktoś może co jest źle w tym?

Mogę podać URL do tego...

Dziękuje za pomoc

Zaloguj się

Google Maps

Polecane posty

northwest 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

regdos 1848

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

northwest 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Utwórz konto

Zaloguj się

Przeglądaj

Aktywność