Google मानचित्र एकाधिक कस्टम मार्कर

Question

तो मैं सीखने की कोशिश कर रहा हूं कि Google मानचित्र कैसे बनाएं। मुझे जावास्क्रिप्ट की बहुत कम समझ है लेकिन मैं यहां सीखने की कोशिश कर रहा हूं।

मैंने ऑनलाइन एक कोड का संदर्भ दिया और मुझे उस बिंदु पर पहुंचा जहां मैं समझता हूं कि स्थान, मार्कर और एक इन्फॉइंडो कैसे जोड़ना है, लेकिन मैं यह पता लगाने की कोशिश कर रहा हूं कि प्रत्येक मार्कर के लिए कई कस्टम आइकन कैसे जोड़ें।

सहायता के लिए धन्यवाद।

function initialize() { 

     //add map, the type of map 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 6, 
      center: new google.maps.LatLng(37.7749295, -122.4194155), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     //add locations 
     var locations = [ 
      ['San Francisco: Power Outage', 37.7749295, -122.4194155], 
      ['Sausalito', 37.8590937, -122.4852507], 
      ['Sacramento', 38.5815719, -121.4943996], 
      ['Soledad', 36.424687, -121.3263187], 
      ['Shingletown', 40.4923784, -121.8891586] 
     ]; 

     //declare marker call it 'i' 
     var marker, i; 

     //declare infowindow 
     var infowindow = new google.maps.InfoWindow(); 

     //add marker to each locations 
     for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
       map: map, 
      }); 

      //click function to marker, pops up infowindow 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(locations[i][0]); 
        infowindow.open(map, marker); 
       } 
      })(marker, i)); 
     } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

वहाँ भी कई तरीक़े हैं सबसे आसान एक छवि आप मार्कर के रूप में प्रदर्शित करना चाहते हैं की एक यूआरएल के लिए मार्कर के आइकन-गुण सेट करने के लिए है।

नमूना:

//modified array with icon-URLs 
var locations = [ 
      ['San Francisco: Power Outage', 37.7749295, -122.4194155,'http://labs.google.com/ridefinder/images/mm_20_purple.png'], 
      ['Sausalito', 37.8590937, -122.4852507,'http://labs.google.com/ridefinder/images/mm_20_red.png'], 
      ['Sacramento', 38.5815719, -121.4943996,'http://labs.google.com/ridefinder/images/mm_20_green.png'], 
      ['Soledad', 36.424687, -121.3263187,'http://labs.google.com/ridefinder/images/mm_20_blue.png'], 
      ['Shingletown', 40.4923784, -121.8891586,'http://labs.google.com/ridefinder/images/mm_20_yellow.png'] 
     ]; 



//inside the loop 
marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
       map: map, 
       icon: locations[i][3] 
      }); 

Answer 2

var locations = [ 
     ['San Francisco: Power Outage', 37.7749295, -122.4194155], 
     ['Sausalito', 37.8590937, -122.4852507], 
     ['Sacramento', 38.5815719, -121.4943996], 
     ['Soledad', 36.424687, -121.3263187], 
     ['Shingletown', 40.4923784, -121.8891586] 
    ]; 

स्थान विशेष रूप से अपनी अक्षांश और देशांतर से उनके posicón के बाद जिलों में से एक सरणी का प्रतिनिधित्व करता है, तो वे गूगल के नक्शे पर तैनात किया जाएगा, हमेशा अक्षांश और देशांतर में नहीं इस तरह भेजा जा सकता है, तो आप डेटाबेस या जेसन प्राप्त कर सकते हैं। मुझे उम्मीद है कि मैंने मदद की है।

Answer 3

<div id="map"></div> 

    <script type="text/javascript">   
    function initialize() { 
     //add map, the type of map 
      var mapOptions = { 
       zoom: 5, 
       draggable: true, 
       animation: google.maps.Animation.DROP, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       center: new google.maps.LatLng(51.4964302,-0.1331412), // area location 
       styles:[{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}] 
      }; 
      var mapElement = document.getElementById('map'); 
      var map = new google.maps.Map(mapElement, mapOptions); 

     //add locations 
      var locations = [ 
       ['London office', 51.4964302,-0.1331412,'http://labs.google.com/ridefinder/images/mm_20_red.png'], 
       ['Sausalito', 37.8590937, -122.4852507,'http://labs.google.com/ridefinder/images/mm_20_red.png'], 
       ['Sacramento', 38.5815719, -121.4943996,'http://labs.google.com/ridefinder/images/mm_20_green.png'], 
       ['Soledad', 36.424687, -121.3263187,'http://labs.google.com/ridefinder/images/mm_20_blue.png'], 
       ['Shingletown', 40.4923784, -121.8891586,'http://labs.google.com/ridefinder/images/mm_20_yellow.png'] 
      ]; 
      //declare marker call it 'i' 
      var marker, i; 
      //declare infowindow 
      var infowindow = new google.maps.InfoWindow(); 
      //add marker to each locations 
      for (i = 0; i < locations.length; i++) { 
       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        map: map, 
        icon: locations[i][3] 
      }); 
      //click function to marker, pops up infowindow 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(locations[i][0]); 
        infowindow.open(map, marker); 
       } 
      })(marker, i)); 
     } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script>