Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

google maps marker as link api v3

how to add links to the markers to open new pages with target="_self", i found some examples but i dont know how to use it in my code, do help me pls

<script type="text/javascript">   

            var mapa; // obiekt globalny

            function dodajMarker(opcjeMarkera)
            {
                opcjeMarkera.map = mapa;
                var marker = new google.maps.Marker(opcjeMarkera);
            }

            function mapaStart()  
            {  
                var wspolrzedne = new google.maps.LatLng(58.699776,16.984863);
                var opcjeMapy = {
                    zoom: 6,
                    center: wspolrzedne,
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    disableDefaultUI: true,
                    navigationControl: true, // kontrolka nawigacji
    navigationControlOptions:
    {
        style: google.maps.NavigationControlStyle.SMALL 
    }
                };
                mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);

                // wspólne cechy ikon
                var rozmiar = new google.maps.Size(32,32);
                var rozmiar_cien = new google.maps.Size(59,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("markers/marker1.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona2 = new google.maps.MarkerImage("markers/marker2.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona3 = new google.maps.MarkerImage("markers/marker3.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona4 = new google.maps.MarkerImage("markers/marker4.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona5 = new google.maps.MarkerImage("markers/marker5.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona6 = new google.maps.MarkerImage("markers/marker6.png", rozmiar, punkt_startowy, punkt_zaczepienia);


                var cien1 = new google.maps.MarkerImage("http://www.google.com/intl/en_ALL/mapfiles/shadow50.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);

                dodajMarker({position: new google.maps.LatLng(58.203148,16.601637), icon: ikona1, shadow: cien1});
                dodajMarker({position: new google.maps.LatLng(58.3902,16.7202),  icon: ikona2, shadow: cien1});
                dodajMarker({position: new google.maps.LatLng(58.566667,15.166667),  icon: ikona3, shadow: cien1});
                dodajMarker({position: new google.maps.LatLng(58.488553,16.928773), icon: ikona4, shadow: cien1 });
                dodajMarker({position: new google.maps.LatLng(57.899804,16.408064),  icon: ikona5, shadow: cien1});
                dodajMarker({position: new google.maps.LatLng(57.951087,16.55972),  icon: ikona6, shadow: cien1});
                }



        </script> 

does the first marker should look like this ?? where to put url ??

function dodajMarker({position: new google.maps.LatLng(58.203148,16.601637), icon: ikona1, shadow: cien1})
                {
                    opcjeMarkera.map = mapa;
                    var marker = new google.maps.Marker({position: new google.maps.LatLng(58.203148,16.601637), icon: ikona1, shadow: cien1});
                    google.maps.event.addListener(marker, 'click', function() {
                        window.location.href = marker.url;
                    });

                }

this is my code and it dosent work

<script type="text/javascript">   
        <!-- 
            var mapa; // obiekt globalny

            function dodajMarker(opcjeMarkera)
            {
                opcjeMarkera.map = mapa;
                var marker = new google.maps.Marker(opcjeMarkera);
            }

            function mapaStart()  
            {  
                var wspolrzedne = new google.maps.LatLng(58.699776,16.984863);
                var opcjeMapy = {
                    zoom: 6,
                    center: wspolrzedne,
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    disableDefaultUI: true,
                    navigationControl: true, // kontrolka nawigacji
    navigationControlOptions:
    {
        style: google.maps.NavigationControlStyle.SMALL 
    }
                };
                mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);

                // wspólne cechy ikon
                var rozmiar = new google.maps.Size(32,32);
                var rozmiar_cien = new google.maps.Size(59,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("markers/marker1.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona2 = new google.maps.MarkerImage("markers/marker2.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona3 = new google.maps.MarkerImage("markers/marker3.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona4 = new google.maps.MarkerImage("markers/marker4.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona5 = new google.maps.MarkerImage("markers/marker5.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona6 = new google.maps.MarkerImage("markers/marker6.png", rozmiar, punkt_startowy, punkt_zaczepienia);


                var cien1 = new google.maps.MarkerImage("http://www.google.com/intl/en_ALL/mapfiles/shadow50.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);

                dodajMarker({position: new google.maps.LatLng(58.203148,16.601637), icon: ikona1, shadow: cien1, url:'http://www.google.com'});
                dodajMarker({position: new google.maps.LatLng(58.3902,16.7202),  icon: ikona2, shadow: cien1, url:'http://www.google.com'});
                dodajMarker({position: new google.maps.LatLng(58.566667,15.166667),  icon: ikona3, shadow: cien1, url:'http://www.google.com'});
                dodajMarker({position: new google.maps.LatLng(58.488553,16.928773), icon: ikona4, shadow: cien1, url:'http://www.google.com' });
                dodajMarker({position: new google.maps.LatLng(57.899804,16.408064),  icon: ikona5, shadow: cien1, url:'http://www.google.com'});
                dodajMarker({position: new google.maps.LatLng(57.951087,16.55972),  icon: ikona6, shadow: cien1, url:'http://www.google.com'});
                }
        -->
        </script>
like image 559
gidzior Avatar asked Apr 29 '11 20:04

gidzior


1 Answers

You could do something like this.

var marker = new google.maps.Marker({
  url: 'http://www.google.com/',
  map: map
});

google.maps.event.addListener(marker, 'click', function() {
  window.location.href = marker.url;
});

Code untested... just thinking out loud!

To fit it in with your existing code...

        function dodajMarker(opcjeMarkera)
        {
            opcjeMarkera.map = mapa;
            var marker = new google.maps.Marker(opcjeMarkera);
            google.maps.event.addListener(marker, 'click', function() {
                window.location.href = marker.url;
            });

        }

The main thing to note is the marker variable is referenced again in the addListener function.

dodajMarker({position: new google.maps.LatLng(57.951087,16.55972),  icon: ikona6, shadow: cien1, url:'http://www.google.com'});
like image 195
David Avatar answered Sep 18 '22 10:09

David