GoldenLine
Zaloguj się

konto usunięte

Temat: Google Maps - centrowanie markerów

Witam serdecznie,
mam taką aplikację:


<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>



<body onload = "mapaStart()";>

<script type="text/javascript">     

        <!--   

            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
Link do wypowiedziLink

konto usunięte

Temat: Google Maps - centrowanie markerów

Poszukaj tutaj: http://www.gmapsapi.com/
Link do wypowiedziLink

konto usunięte

Temat: Google Maps - centrowanie markerów

no właśnie nie ma nic podobnego :( walcze z tym co mam, ale utknąłem :/ wiesz może jak to zrobić?
Link do wypowiedziLink
Jarek Tkaczyk

Jarek Tkaczyk www.GoHolidays.pl -
siła napędowa

Temat: Google Maps - centrowanie markerów

Łukasz Peta:
no właśnie nie ma nic podobnego :( walcze z tym co mam, ale utknąłem :/ wiesz może jak to zrobić?

A patrzysz chociaż na odp do twojego pytania na innych grupach?

To tak:
-Tworzysz LatLngBounds
-tworząc markery pętlą dla współrzędnych każdego z nich dopasowujesz LatLngBounds
-po utworzeniu wszystkich markerów czyli określeniu LatLngBounds korzystając z pierwszej metody mapy w dokumentacji dopasowujesz center i zoom do LatLngBounds

et voila!

po szczegóły racz zajrzeć:
http://code.google.com/intl/pl-PL/apis/maps/documentat...

A jak będziesz miał problem to pisz konkretnie gdzie.
Link do wypowiedziLink

konto usunięte

Temat: Google Maps - centrowanie markerów

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 :) 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/maps...

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
Link do wypowiedziLink
Marcin Laber

Marcin Laber internet
technologies
magician

Temat: Google Maps - centrowanie markerów

To może ja podpowiem tak:
- tworzysz nową instancję obiektu GLatLngBounds
- dla każdego elementu w tablicy (punktów) rozszerzasz powyższy obiekt o współrzędne punktu (metodą extend), tworzysz marker, przypinasz do niego InfoWindow, dodajesz na mapę
- poza pętlą dopasowujesz instancję GLatLngBounds do aktualnego widoku mapy
Link do wypowiedziLink
Jarek Tkaczyk

Jarek Tkaczyk www.GoHolidays.pl -
siła napędowa

Temat: Google Maps - centrowanie markerów

Łukasz Peta:
...

Ech Łukasz, przeskoczyłeś dla odmiany na api 2?

Po załączonych kodach nie wiem, co tak naprawdę chcesz osiągnąć, więc napisałem kod dla api 3 odnoszący się do twojego pierwszego pytania.

p.s. dowody wdzięczności, jak młody zając u Kondrata, w kapuście przyjmuję..



<!DOCTYPE html>

<html lang="en">

    <head>

		<title>mapa z Bounds</title>

		<meta charset="UTF-8">

		<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

		<script type="text/javascript">

			//lets create markers' test array

			markers = [

				{

					options:

					{

						position: new google.maps.LatLng(50.01,20.01)

					},

					content: 'first marker info window'

				},

				{

					options:

					{

						position: new google.maps.LatLng(52.015,20.015)

					},

					content: '2nd marker info window'

				},

				{

					options:

					{

						position: new google.maps.LatLng(51.02,20.02)

					},

					content: '3rd marker info window'

				},

				{

					options:

					{

						position: new google.maps.LatLng(40.015,25.015)

					},

					content: '4th marker info window'

				}

			];



			function addMarker(options, content)

			{

				options.map = map;

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

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

				{

					info.setContent(content);

					info.open(map, marker);

				});

			}



			function initialize()

			{

				var mapOptions = {

					zoom: 16,

					center: new google.maps.LatLng(20.0000,10.0000),

					mapTypeId: google.maps.MapTypeId.SATELLITE

				}

				var map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);

				var info = new google.maps.InfoWindow();

				var bounds = new google.maps.LatLngBounds();



				//add markers to the map in loop

				for (i in markers)

				{

					addMarker(markers[i]['options'], markers[i]['content']);

					bounds.extend(markers[i]['options']['position']);

				}



				// fit the map to the bounds rectangle containing all markers

				map.fitBounds(bounds);

			}

		</script>

    </head>

    <body onload="initialize()">

		<div id="mapCanvas" style="width: 700px; height: 500px; background: #aaa;"></div>

    </body>

</html>


Zoptymalizuj sobie ten kod w ramach ćwiczeń :)Jarek Tkaczyk edytował(a) ten post dnia 06.06.10 o godzinie 17:24
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj