2017-01-20 19 views
-3

私はこれを行うしたいと思います:例ではhttp://bl.ocks.org/amenadiel/f4e5bd78b214ff081254Google Maps APIでさまざまなマーカーのCSSをカスタマイズするにはどうすればよいですか?

を、markerLayerは、地図上のすべてのマーカーをオーバーライドし、私はそれが特定のマーカーに適用したいと思います。

var myoverlay = new google.maps.OverlayView(); 
 
myoverlay.draw = function() { 
 
    //this assigns an id to the markerlayer Pane, so it can be referenced by CSS 
 
    this.getPanes().markerLayer.id = 'markerLayer'; 
 
}; 
 
myoverlay.setMap(map);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Simple Map</title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
    html, 
 
    body, 
 
    #map-canvas { 
 
     height: 500px; 
 
     width: 960px; 
 
     margin: 0px; 
 
     padding: 0px 
 
    } 
 
    #markerLayer img { 
 
     border: 2px solid red !important; 
 
     width: 85% !important; 
 
     height: 90% !important; 
 
     border-radius: 5px; 
 
    } 
 
    </style> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
    <script> 
 
    var map; 
 

 
    function initialize() { 
 
     var mapOptions = { 
 
     zoom: 9, 
 
     center: new google.maps.LatLng(40.6, -74) 
 
     }; 
 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
     // I create 3 markers using http://ruralshores.com/assets/marker-icon.png as icon 
 
     var myIcon = 'http://ruralshores.com/assets/marker-icon.png'; 
 
     var marker1 = new google.maps.Marker({ 
 
     position: { 
 
      lat: 40.8, 
 
      lng: -74 
 
     }, 
 
     map: map, 
 
     icon: myIcon, 
 
     optimized: false 
 
     }); 
 
     var marker2 = new google.maps.Marker({ 
 
     position: { 
 
      lat: 40.6, 
 
      lng: -74.5 
 
     }, 
 
     map: map, 
 
     icon: myIcon, 
 
     optimized: false 
 
     }); 
 
     var marker3 = new google.maps.Marker({ 
 
     position: { 
 
      lat: 40.5, 
 
      lng: -74.3 
 
     }, 
 
     map: map, 
 
     icon: myIcon, 
 
     optimized: false 
 
     }); 
 

 
     // I create an OverlayView, and set it to add the "markerLayer" class to the markerLayer DIV 
 
     var myoverlay = new google.maps.OverlayView(); 
 
     myoverlay.draw = function() { 
 
     this.getPanes().markerLayer.id = 'markerLayer'; 
 
     }; 
 
     myoverlay.setMap(map); 
 

 
    } 
 

 

 
    google.maps.event.addDomListener(window, 'load', initialize); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="map-canvas"></div> 
 
</body> 
 

 
</html>

JS-リッチマーカーのライブラリを使用すると、この種のもののために前方の最良の方法です、それが簡単と「標的可能になりようです'を各マーカーに適用します。

はここのリンクです:あなたは「通常の」を作成する必要がAnimate Google API Map Marker with CSS?

答えて

1

:JS-リッチマーカーのライブラリーを操作する方法を探している人のためにもhttps://libraries.io/bower/js-rich-marker

、この質問にはきちんと答えを持っていますマーカー、私の例では第三のように:

var marker3 = new google.maps.Marker({ 
    position: { 
      lat: 40.5, 
      lng: -74.3 
    }, 
    map: map, 
    optimized: true // This will NOT draw the marker in the custom `draw` function 
}); 

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Simple Map</title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
    html, 
 
    body, 
 
    #map-canvas { 
 
     height: 500px; 
 
     width: 960px; 
 
     margin: 0px; 
 
     padding: 0px 
 
    } 
 
    #markerLayer img { 
 
     border: 2px solid red !important; 
 
     width: 85% !important; 
 
     height: 90% !important; 
 
     border-radius: 5px; 
 
    } 
 
    </style> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
    <script> 
 
    var map; 
 

 
    function initialize() { 
 
     var mapOptions = { 
 
     zoom: 9, 
 
     center: new google.maps.LatLng(40.6, -74) 
 
     }; 
 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
     // I create 3 markers using http://ruralshores.com/assets/marker-icon.png as icon 
 
     var myIcon = 'http://ruralshores.com/assets/marker-icon.png'; 
 
     var marker1 = new google.maps.Marker({ 
 
     position: { 
 
      lat: 40.8, 
 
      lng: -74 
 
     }, 
 
     map: map, 
 
     icon: myIcon, 
 
     optimized: false 
 
     }); 
 
     var marker2 = new google.maps.Marker({ 
 
     position: { 
 
      lat: 40.6, 
 
      lng: -74.5 
 
     }, 
 
     map: map, 
 
     icon: myIcon, 
 
     optimized: false 
 
     }); 
 
     var marker3 = new google.maps.Marker({ 
 
     position: { 
 
      lat: 40.5, 
 
      lng: -74.3 
 
     }, 
 
     map: map, 
 
     optimized: true 
 
     }); 
 

 
     // I create an OverlayView, and set it to add the "markerLayer" class to the markerLayer DIV 
 
     var myoverlay = new google.maps.OverlayView(); 
 
     myoverlay.draw = function() { 
 
     this.getPanes().markerLayer.id = 'markerLayer'; 
 
     }; 
 
     myoverlay.setMap(map); 
 

 
    } 
 

 

 
    google.maps.event.addDomListener(window, 'load', initialize); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="map-canvas"></div> 
 
</body> 
 

 
</html>

関連する問題