Zmiana ikonek na googlemaps

Odpowiedz Nowy wątek
2012-02-22 10:50
north
0

Witam serdecznie,
Mam taki prosty skrypcik do wyświetlania trasy z punktu A do punktu B:

        <script type="text/javascript">
            var map;
            var gdir;
            var geocoder = null;
            var addressMarker;
            function printpage() {
                window.print();
            }

            function initialize() {
                if (GBrowserIsCompatible()) {
                    map = new GMap2(document.getElementById("map_canvas"));
                    gdir = new GDirections(map, document.getElementById("directions"));
                    GEvent.addListener(gdir, "load", onGDirectionsLoad);
                    GEvent.addListener(gdir, "error", handleErrors);
                    map.addControl(new GLargeMapControl ());
                    map.addControl(new GScaleControl());
                    map.addControl(new GMapTypeControl());

                    map.enableContinuousZoom();
                    map.enableDoubleClickZoom();
                    map.enableScrollWheelZoom();
                        setDirections("Warszawa, iołka", "Warszawa, maczka", "pl");
                    }
                }

                function setDirections(fromAddress, toAddress, locale) {
                    gdir.load("from: " + fromAddress + " to: " + toAddress,
                    { "locale": locale });
                }

                function handleErrors(){
                    if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
                        alert("Nie mozna odnalezc szukanej lokalizacji!");
                    else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
                        alert("Nie mozna odnalezc szukanej lokalizacji!");

                    else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
                        alert("Nie mozna odnalezc szukanej lokalizacji!");

                    //   else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS)  <--- Doc bug... this is either not defined, or Doc is wrong
                    //     alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);

                    else if (gdir.getStatus().code == G_GEO_BAD_KEY)
                        alert("Nie mozna odnalezc szukanej lokalizacji!");
                    else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
                        alert("Nie mozna odnalezc szukanej lokalizacji!");
                    else alert("An unknown error occurred.");

                }

                function onGDirectionsLoad(){

                }
        </script>
    </head>
    <body onload="initialize()">
        <h2>Mapa trasy</h2><br/>
        <form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">
            <small><b>Zalecana forma wprowadzonego adresu:</b> Gdynia, Podgorska 22<br/><br/>
                <table>
                    <tr>
                        <td>
                            <th align="right">Wyjazd z:&nbsp;</th>
                        </td>
                        <td>
                            <input type="text" size="55" id="fromAddress" name="from" value="Warszawa, iołka"/>
                        </td>
                    </tr>
                    <tr>
                        <td>   
                            <th align="right">&nbsp;&nbsp;Adres docelowy:&nbsp;</th>
                        </td>
                        <td>
                            <input type="text" size="55" id="toAddress" name="to" value="Warszawa, maczka" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3"><input type ="hidden" id="locale" name="locale" value="pl">
                                <input name="submit" type="submit" value="Pokaż trasę" />
                        </td></tr>
                </table>
        </form>
        <br/>    
        <div id="map_canvas" style="width: 95%; height: 400px"></div>
        <div id="directions" style="width: 95%"></div>
    </body>
</html>

Wszystko pięknie chodzi :-) Chciałbym zmienić domyslną ikonke dla punktu A na np. myname.pl/a.png i dla punktu B na myname.pl/b.png...

Wiecie może jak to zrobić?

Z góry dziękuje za poomoc :-)
Northwest

Pozostało 580 znaków

2012-02-22 11:07
0

dokumentacja?
albo google i "change marker icon", np: http://nhw.pl/wp/2007/09/19/c[...]rs-icons-with-google-maps-api


Pozostało 580 znaków

2012-02-22 11:26
north
0

To ja wiem, wklejam sobie definicję ikonek:


var new_icon = new GIcon(); 
new_icon.image = "http://myname.pl/a.png";  
new_icon.size = new GSize(16,16);  
new_icon.iconAnchor = new GPoint(8,9);  
new_icon.infoWindowAnchor = new GPoint(7,7);

var new_icon2 = new GIcon(); 
new_icon2.image = "http://myname.pl/b.png";  
new_icon2.size = new GSize(16,16);  
new_icon2.iconAnchor = new GPoint(8,9);  
new_icon2.infoWindowAnchor = new GPoint(7,7);

ale jak to później w tym kodzie "przykleić" do tych punktów?

Pozostało 580 znaków

2012-02-22 21:31
0

No tak, tu nie tworzysz zwykłych markerów. Czyli jak mniemam udało Ci się wpisać "change marker icon" w Google i samemu znaleźć, ale już "google directions maps change icon" Cię przerasta?

O, widzę, że równolegle na forum.php.pl to samo Ci podali __


Pozostało 580 znaków

2012-02-23 11:08
north
0

udało mi się zmontować taka mapkę :)

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=pl"></script>
        <script type="text/javascript">
    //<![CDATA[
      var side_bar_html = ""; 
      var gmarkers = [];
      var map = null;
      var startLocation = null;
      var endLocation = null;

            function initialize() {
                var center = new google.maps.LatLng(24.7756,121.0062);
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                center: center,
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                });

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

                var directionsService = new google.maps.DirectionsService(); 
                var request = { 
                    origin: "Warszawa, Maczka", 
                    destination: "Warszawa, Ciołka", 
                    travelMode: google.maps.DirectionsTravelMode.WALKING 
                }; 

                var polyline = new google.maps.Polyline({
                    path: [],
                    strokeColor: '#FF0000',
                    strokeWeight: 3
                });     

    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        var bounds = new google.maps.LatLngBounds();
        var route = response.routes[0];
        var summaryPanel = document.getElementById("directions_panel");
        var detailsPanel = document.getElementById("direction_details");
        startLocation = new Object();
        endLocation = new Object();
        summaryPanel.innerHTML = "";
        detailsPanel.innerHTML = '<ul>';

        for (var i = 0; i < route.legs.length; i++) {
          var routeSegment = i + 1;
          summaryPanel.innerHTML += "<b>Plan trasy: " + routeSegment + "</b><br />";
          summaryPanel.innerHTML += route.legs[i].start_address + " do ";
          summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
          summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
        }

    var path = response.routes[0].overview_path;
    var legs = response.routes[0].legs;
        for (i=0;i<legs.length;i++) {
          if (i == 0) { 
            startLocation.latlng = legs[i].start_location;
            startLocation.address = legs[i].start_address;
            createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
          }
          endLocation.latlng = legs[i].end_location;
          endLocation.address = legs[i].end_address;
          var steps = legs[i].steps;
          for (j=0;j<steps.length;j++) {
            var nextSegment = steps[j].path;
            detailsPanel.innerHTML += "<li>"+steps[j].instructions;
            var dist_dur = "";
            if (steps[j].distance && steps[j].distance.text) dist_dur += "&nbsp;"+steps[j].distance.text;
            if (steps[j].duration && steps[j].duration.text) dist_dur += "&nbsp;"+steps[j].duration.text;
            if (dist_dur != "") {
              detailsPanel.innerHTML += "("+dist_dur+")<br /></li>";
            } else {
              detailsPanel.innerHTML += "</li>";
            }
            for (k=0;k<nextSegment.length;k++) {
              polyline.getPath().push(nextSegment[k]);
              bounds.extend(nextSegment[k]);
            }
          }
        }
        detailsPanel.innerHTML += "</ul>"
        polyline.setMap(map);
        map.fitBounds(bounds);
        createMarker(endLocation.latlng,"end",endLocation.address,"red");
        // == create the initial sidebar ==
        makeSidebar();                                       
      }
    });
  }

var icons = new Array();
icons["red"] = new google.maps.MarkerImage("http://wafao.com/taxometr/postoj.png",
      new google.maps.Size(28, 31),
      new google.maps.Point(0,0),
      new google.maps.Point(28, 31));

function getMarkerImage(iconColor) {
   if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
      iconColor = "red"; 
   }

   if (!icons[iconColor]) {
      icons[iconColor] = new google.maps.MarkerImage("http://wafao.com/taxometr/taxi.png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(48, 31),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 6,20.
      new google.maps.Point(22, 20));
   } 
   return icons[iconColor];
}

  var iconImage = new google.maps.MarkerImage('http://wafao.com/taxometr/taxi.png',
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(48, 31),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));

  var iconShadow = new google.maps.MarkerImage('http://wafao.com/taxometr/taxi.png',

      new google.maps.Size(37, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(37, 34));

  var iconShape = {
      coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
      type: 'poly'
  };

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

function createMarker(latlng, label, html, color) {
// alert("createMarker("+latlng+","+label+","+html+","+color+")");
    var contentString = '<b>'+label+'</b><br>'+html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
       // shadow: iconShadow,
        icon: getMarkerImage(color),
        shape: iconShape,
        title: label,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
        marker.myname = label;
        gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}
    //]]>
        </script>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
            #map_canvas { height: 100% }
        </style>
    </head>
    <body onload="initialize()">
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<table border="1"><tr><td>
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
</td></tr><tr><td>
<div id="direction_details" style="margin:20px;"></div>
</td></tr></table>
</div>
<br/><br/>
<form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">
            <small><b>Zalecana forma wprowadzonego adresu:</b> Gdynia, Podgorska 22<br/><br/>
                <table>
                    <tr>
                        <td>
                            <th align="right">Wyjazd z:&nbsp;</th>
                        </td>
                        <td>
                            <input type="text" size="55" id="fromAddress" name="from" value=""/>
                        </td>
                    </tr>
                    <tr>
                        <td>   
                            <th align="right">&nbsp;&nbsp;Adres docelowy:&nbsp;</th>
                        </td>
                        <td>
                            <input type="text" size="55" id="toAddress" name="to" value="" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3"><input type ="hidden" id="locale" name="locale" value="pl">
                                <input name="submit" type="submit" value="Pokaż trasę" />
                        </td></tr>
                </table>
        </form>

Tylko nie wiem jak podłączyć ten formularz żeby mapka pokazywała trasę także po wpisaniu w nim adresów :-( Wiecie może jak to zrobić?

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0