Google मैप्स एपीआई v3: मैं मार्कर आइकन को गतिशील रूप से कैसे बदलूं?

Question

Google Maps API v3 का उपयोग करते हुए, मैं मार्कर आइकन को प्रोग्रामेटिक रूप से कैसे बदलूं?

जब कोई किसी लिंक पर होवर करता है, तो मैं क्या करना चाहता हूं - प्रश्न में मार्कर को निरूपित करने के लिए मानचित्र परिवर्तन रंगों पर संबंधित मार्कर आइकन होना।

अनिवार्य रूप से, वही कार्य जो रोस्ट करता है।

जब आप बाईं ओर एक होम लिस्टिंग पर होवर करते हैं, तो सही परिवर्तन रंग पर संबंधित मार्कर

Comments

आपका जीवंत उदाहरण नीचे चला गया है। बस आपको बताना चाहता था। मुझे लगता है कि यह airbnb.com पर क्या होता है?

— फूजीरॉयले

Answer 1

कॉल करें marker.setIcon('newImage.png')... डॉक्स के लिए यहां देखें ।

क्या आप इसे करने के वास्तविक तरीके के बारे में पूछ रहे हैं? आप बस प्रत्येक बना सकते हैं div, और एक mouseoverऔर mouseoutश्रोता जोड़ सकते हैं जो चिह्न को बदल देगा और मार्करों के लिए वापस आ जाएगा।

Comments

इससे मुझे पता चला कि एक मार्कर के एनीमेशन को कैसे बदलना है:markersArray[0].setAnimation(google.maps.Animation.BOUNCE);

— रे

Answer 2

आप एक आइकन के रूप में एक वृत्त का उपयोग कर सकते हैं, उदाहरण के लिए:

var oMarker = new google.maps.Marker({
    position: latLng,
    sName: "Marker Name",
    map: map,
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 8.5,
        fillColor: "#F00",
        fillOpacity: 0.4,
        strokeWeight: 0.4
    },
});

और फिर, यदि आप मार्कर को गतिशील रूप से बदलना चाहते हैं (जैसे माउसओवर पर), तो आप उदाहरण के लिए, कर सकते हैं:

oMarker.setIcon({
            path: google.maps.SymbolPath.CIRCLE,
            scale: 10,
            fillColor: "#00F",
            fillOpacity: 0.8,
            strokeWeight: 1
        })

Answer 3

यह थ्रेड मृत हो सकता है, लेकिन स्टाइलल्डमेकर एपीआई वी 3 के लिए उपलब्ध है। AddDomListener () पद्धति का उपयोग करके सही DOM इवेंट में इच्छित रंग परिवर्तन को बांधें । यह उदाहरण आप क्या करना चाहते हैं के बहुत करीब है। यदि आप पृष्ठ स्रोत को देखते हैं, तो बदलें:

google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() {
  styleIcon.set("color","#00ff00");
  styleIcon.set("text","Go");
});

कुछ इस तरह से:

google.maps.event.addDomListener("mouseover",function() {
  styleIcon.set("color","#00ff00");
  styleIcon.set("text","Go");
});

आपको साथ ले जाने के लिए पर्याप्त होना चाहिए।

DOM ईवेंट पर विकिपीडिया पृष्ठ आपको उस ईवेंट को लक्षित करने में भी मदद करेगा, जिसे आप क्लाइंट-साइड पर कैप्चर करना चाहते हैं।

सौभाग्य (यदि आपको अभी भी इसकी आवश्यकता है)

Comments

हां, लेकिन मैप्स पॉइंटर को बदलने का काम CSS में कर्सर प्रॉपर्टी को बदलकर किया जाता है, मैप्स API में नहीं - प्रलेखन

— tatlar

यह StackOverflow प्रश्न और उत्तर आपको और मार्गदर्शन कर सकते हैं।

— tatlar 12

Answer 4

GMaps उपयोगिता लाइब्रेरी एक प्लगइन कहा जाता है MapIconMaker आसान मक्खी पर विभिन्न मार्कर शैलियों उत्पन्न करने के लिए बनाता है। यह मार्करों को खींचने के लिए Google चार्ट का उपयोग करता है।

यहां एक अच्छा डेमो है जो दिखाता है कि आप किस तरह के मार्कर से इसे बना सकते हैं।

Comments

MapIconMaker एपीआई v3 के नक्शे के लिए उपलब्ध नहीं है

— benjisail

एपीआई v3 के लिए स्टाइलमेकर हालांकि है। HTH।

— tatlar

दुर्भाग्य से Google चार्ट एपीआई को हाल ही में Google द्वारा:

— डैनी सी

Answer 5

आप इस कोड को आज़मा सकते हैं

    <script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

<script>

    function initialize()
    {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
                            zoom: 10,
                            mapTypeId: google.maps.MapTypeId.ROADMAP    
                         };
        map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
        var markers = [
            ['title-1', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.120850, '<p> Hello - 1 </p>'],
            ['title-2', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.420850, '<p> Hello - 2 </p>'],
            ['title-3', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.720850, '<p> Hello - 3 </p>'],
            ['title-4', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.020850, '<p> Hello - 4 </p>'],
            ['title-5', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.320850, '<p> Hello - 5 </p>']
        ];

        var infoWindow = new google.maps.InfoWindow(), marker, i;
        var testMarker = [];
        var status = [];
        for( i = 0; i < markers.length; i++ ) 
        {
            var title = markers[i][0];
            var loan = markers[i][1];
            var lat = markers[i][2];
            var long = markers[i][3];
            var add = markers[i][4];


            var iconGreen = 'img/greenMarker.png'; //green marker
            var iconRed = 'img/redMarker.png';     //red marker

            var infoWindowContent = loan + "\n" + placeId + add;

            var position = new google.maps.LatLng(lat, long);
            bounds.extend(position);

            marker = new google.maps.Marker({
                map: map,
                title: title,
                position: position,
                icon: iconGreen
            });
            testMarker[i] = marker;
            status[i] = 1;
            google.maps.event.addListener(marker, 'click', ( function toggleBounce( i,status,testMarker) 
            {
                return function() 
                {
                    infoWindow.setContent(markers[i][1]+markers[i][4]);
                    if( status[i] === 1 )
                    {
                        testMarker[i].setIcon(iconRed);
                        status[i] = 0;

                    }
                    for( var k = 0; k <  markers.length ; k++ )
                    {
                        if(k != i)
                        {
                            testMarker[k].setIcon(iconGreen);
                            status[i] = 1;

                        }
                    }
                    infoWindow.open(map, testMarker[i]);
                }
            })( i,status,testMarker));
            map.fitBounds(bounds);
        }
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event)
        {
            this.setZoom(8);
            google.maps.event.removeListener(boundsListener);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="mapDiv" style="width:820px; height:300px"></div>