I'm trying to apply an array of styles to a map with markers. This is based on two functioning examples that I'm struggling to combine in any possible way. Needless to say, I haven't yet succeeded.
Here is my idea:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px; }
#map_canvas { height: 80% ; width:100%; //*position:(100,0);*//}
#content {}
</style>
<script type="text/javascript"
src="http://maps-api-tt.appspot.com/apilite/styled/apiv3.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.795624, 15.724284);
var settings = {
zoom: 18,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT},
navigationControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
var styles = {
"map_canvas": [
{
featureType: 'all',
rules: [
{ "invert_lightness": true },
{ "weight": 0.5 },
{ "lightness": 5 },
{ "gamma": 1.58 },
{ "saturation": 2 }
]
}
]
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">heading</h1>'+
'<div id="bodyContent">'+
'<p>sample txt</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var companyImage = new google.maps.MarkerImage('images/logoo.png',
new google.maps.Size(337,191),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('images/logoo_shadow.png',
new google.maps.Size(337,191),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyPos = new google.maps.LatLng(51.796414, 15.724155);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"Kacza Górka Park Sportowy",
zIndex: 3});
var skateImage = new google.maps.MarkerImage('images/skate.png',
new google.maps.Size(100,100),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var skateShadow = new google.maps.MarkerImage('images/skate_shadow.png',
new google.maps.Size(100,100),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var skatePos = new google.maps.LatLng(51.795623, 15.724286);
var skateMarker = new google.maps.Marker({
position: skatePos,
map: map,
icon: skateImage,
shadow: skateShadow,
title:"skate park",
zIndex: 2
});
var parkingImage = new google.maps.MarkerImage('images/parking.png',
new google.maps.Size(50,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var parkingShadow = new google.maps.MarkerImage('images/parking_shadow.png',
new google.maps.Size(70,50),
new google.maps.Point(0,0),
new google.maps.Point(60, 50)
);
var parkingPos = new google.maps.LatLng(57.0437, 9.9147);
var parkingMarker = new google.maps.Marker({
position: parkingPos,
map: map,
icon: parkingImage,
shadow: parkingShadow,
title:"Parking Lot",
zIndex: 1
});
google.maps.event.addListener(companyMarker, 'click', function() {
infowindow.open(map,companyMarker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
Iv'e been trying a while now, but couldn't figure it out, I'll appreciate all input.
You may find below a clean example of a styled map. When you press the "Add Some Markers" link then new markers are added on the map.
In order to create new styles for your map you may use the Google Style Maps Wizard which automatically produces the JSON object to pass to the style property of your MapOptions object in order to apply the style to a Maps API v3 Map.
<!doctype html>
<html lang="en">
<head>
<title>Google Maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177, -89.406738, 2]
],
demoCenter = new google.maps.LatLng(41, -87),
map,
styles = [{
stylers: [{
hue: "#00ffe6"
}, {
saturation: -20
}]
}, {
featureType: "road",
elementType: "geometry",
stylers: [{
lightness: 100
}, {
visibility: "simplified"
}]
}, {
featureType: "road",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}];
function initialize() {
var styledMap = new google.maps.StyledMapType(styles, {
name: "Styled Map"
}),
mapOptions = {
zoom: 7,
center: demoCenter,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
function addMarkers() {
var marker,
i,
infowindow = new google.maps.InfoWindow();
for (i = 0; i < cityList.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(cityList[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
$(document).ready(function () {
initialize();
});
$(document).on('click', '.add-markers', function (e) {
e.preventDefault();
addMarkers();
});
</script>
</head>
<body>
<div id="basic-map">
<div id="map_canvas" style="height:350px;"></div>
<a href="#" class="add-markers">Add Some Markers</a>
</div>
</body>
</html>
I hope this helps.