Google Maps Несколько пользовательских маркеров

Question

Итак, я пытаюсь узнать, как сделать карту Google. У меня очень мало понимания javascript, но я стараюсь учиться здесь.

Я ссылался на код онлайн, и я понял, как я могу понять, как добавлять местоположения, маркер и инфо-окно, но я пытаюсь понять, как добавить несколько пользовательских значков для каждого маркера.

Спасибо за помощь.

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

Есть несколько способов, проще всего установить значок-свойство маркеров в URL образа, которое будет отображаться в качестве маркеров.

образец:

//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] 
    ]; 

Местоположение представляет собой массив из районов с последующим их POSICON конкретно по широте и долготе, так что они будут размещены на карте Google, не всегда широты и долготы в этот способ отправляется, поэтому вы можете получать базу данных или json. Надеюсь, я помог.

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>