Skip to content

Instantly share code, notes, and snippets.

@ffflabs

ffflabs/README.md

Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ffflabs/f4e5bd78b214ff081254 to your computer and use it in GitHub Desktop.
Save ffflabs/f4e5bd78b214ff081254 to your computer and use it in GitHub Desktop.
Download ZIP
Styling unoptimized markers in Google Maps
Raw
README.md

Unoptimized markers exist as img elements inside the markerLayer mapPane.

(If your markers didn't had the optimized:false property, they will render inside a canvas element and won't be CCS stylable)

To get a reference to the markerLayer mapPane

  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);

if you defined a CSS style for #markerLayer img, it will be applied to your markers.

Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment