जावास्क्रिप्ट, Google मानचित्र मार्कर रंग बदलें

Question

क्या मुझे जावास्क्रिप्ट के माध्यम से Google मानचित्र मार्कर रंग बदलने का तरीका पता है .. मैं इस पर नया हूं और किसी भी मदद की बहुत सराहना की जाएगी, धन्यवाद।

मैं एक मार्कर

marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], 
    locations[i][2]), 
    animation: google.maps.Animation.DROP, 
    map: map 
}); 

Answer 1

गूगल मैप्स एपीआई में बनाने के लिए v3 आप मार्कर आइकन को बदलने की कोशिश कर सकते निम्नलिखित कोड का इस्तेमाल किया। हरे रंग के आइकन उपयोग के लिए उदाहरण के लिए:

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png') 

या मार्कर init के हिस्से के रूप:

marker = new google.maps.Marker({ 
    icon: 'http://...' 
}); 

अन्य रंग:

• http://maps.google.com/mapfiles/ms/icons/blue-dot.png
• http://maps.google.com/mapfiles/ms/icons/red-dot.png

आदि

Answer 2

आप strokeColor संपत्ति का उपयोग कर सकते हैं:

var marker = new google.maps.Marker({ 
    id: "some-id", 
    icon: { 
     path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
     strokeColor: "red", 
     scale: 3 
    }, 
    map: map, 
    title: "some-title", 
    position: myLatlng 
}); 

अन्य संभावनाओं के लिए this page देखें।

Answer 3

आप इस कोड का उपयोग कर सकते हैं यह ठीक काम करता है।

var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/"); 

var marker = new google.maps.Marker({ 
      position: yourlatlong, 
      icon: pinImage, 
      map: map 
     }); 

see Example here

Answer 4

मैं एक ही नक्शे पर स्थापित करने के लिए 4 जहाजों है, इसलिए मैं गूगल डेवलपर्स उदाहरण का उपयोग और फिर इसे मुड़

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

समारोह में bellow मैं 3 सेट अधिक रंग विकल्प:

function setMarkers(map, locations) { 
... 
var image = { 
    url: 'img/bullet_amarelo.png', 
    // This marker is 20 pixels wide by 32 pixels tall. 
    size: new google.maps.Size(40, 40), 
    // The origin for this image is 0,0. 
    origin: new google.maps.Point(0,0), 
    // The anchor for this image is the base of the flagpole at 0,32. 
    anchor: new google.maps.Point(0, 40) 
    }; 
    var image1 = { 
      url: 'img/bullet_azul.png', 
      // This marker is 20 pixels wide by 32 pixels tall. 
      size: new google.maps.Size(40, 40), 
      // The origin for this image is 0,0. 
      origin: new google.maps.Point(0,0), 
      // The anchor for this image is the base of the flagpole at 0,32. 
      anchor: new google.maps.Point(0, 40) 
      }; 
    var image2 = { 
      url: 'img/bullet_vermelho.png', 
      // This marker is 20 pixels wide by 32 pixels tall. 
      size: new google.maps.Size(40, 40), 
      // The origin for this image is 0,0. 
      origin: new google.maps.Point(0,0), 
      // The anchor for this image is the base of the flagpole at 0,32. 
      anchor: new google.maps.Point(0, 40) 
     }; 
    var image3 = { 
      url: 'img/bullet_verde.png', 
      // This marker is 20 pixels wide by 32 pixels tall. 
      size: new google.maps.Size(40, 40), 
      // The origin for this image is 0,0. 
      origin: new google.maps.Point(0,0), 
      // The anchor for this image is the base of the flagpole at 0,32. 
      anchor: new google.maps.Point(0, 40) 
     }; 
... 
} 

एन के लिए में घ bellow मैं हर जहाज के लिए एक रंग सेट:

for (var i = 0; i < locations.length; i++) { 
... 
    if (i==0) var imageV=image; 
    if (i==1) var imageV=image1; 
    if (i==2) var imageV=image2; 
    if (i==3) var imageV=image3; 
... 
# remember to change icon: image to icon: imageV 
} 

अंतिम परिणाम:

http://www.mercosul-line.com.br/site/teste.html

Answer 5

मैं Google Charts API उपयोग करने का सुझाव है क्योंकि आप पाठ, पाठ रंग निर्दिष्ट कर सकते हैं, को भरने के रंग और रूपरेखा रंग, सभी हेक्स रंग कोड का उपयोग, उदाहरण के लिए लाल के लिए # एफएफ 0000। इस प्रकार आप इसे कॉल कर सकते हैं:

function getIcon(text, fillColor, textColor, outlineColor) { 
    if (!text) text = '•'; //generic map dot 
    var iconUrl = "http://chart.googleapis.com/chart?cht=d&chdp=mapsapi&chl=pin%27i\\%27[" + text + "%27-2%27f\\hv%27a\\]h\\]o\\" + fillColor + "%27fC\\" + textColor + "%27tC\\" + outlineColor + "%27eC\\Lauto%27f\\&ext=.png"; 
    return iconUrl; 
} 

तब, जब आप अपने मार्कर बनाने तुम सिर्फ इस तरह के, जहां myColor चर स मान (ऋण हैश चिह्न) कर रहे हैं के रूप में आइकन गुण सेट:

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    animation: google.maps.Animation.DROP, 
    map: map, 
    icon: getIcon(null, myColor, myColor2, myColor3) 
}); 

आप http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000 का उपयोग कर सकते हैं, जो एक वैकल्पिक यूआरएल के रूप में समझने के लिए थोड़ा आसान है, अगर आपको केवल पाठ सेट करने और रंग भरने की आवश्यकता है।

खुर्रम का उत्तर एक तृतीय पक्ष साइट को संदर्भित करता है जो Google चार्ट एपीआई पर रीडायरेक्ट करता है। इसका मतलब है कि अगर वह व्यक्ति अपना सर्वर लेता है तो आप को रोक दिया जाता है। मैं Google API की लचीलापन के साथ-साथ सीधे Google पर जाने की विश्वसनीयता को पसंद करता हूं। बस सुनिश्चित करें कि आप प्रत्येक रंग के लिए एक मान निर्दिष्ट करते हैं या यह काम नहीं करेगा।

Answer 6

आप करने वाले लाइन चार्ट का उपयोग करें और मक्खी पर rgb कोड के साथ किसी भी रंग उत्पन्न कर सकते हैं:

उदाहरण:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd 

शामिल के रूप में

var marker = new google.maps.Marker({ 
    position: marker, 
    title: 'Hello World', 
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd' 
}); 

साथ ऊपर कहा गया है: #ddd रंग के साथ मार्कर

Answer 7

var map_marker = $ ("। Map-marker")। बच्चे ("img")। Attr ("src") var pinImage = new google.maps.MarkerImage (map_marker);

 var marker = new google.maps.Marker({ 
     position: uluru, 
     map: map, 
     icon: pinImage 
    }); 
    }