Invisible style on my Map - google-maps

I'm using Google Maps For Javascript. I reorganized all options and working true location. But when i add style and marker, I don't see the effects. How can I fix it?
var locations = [
['MyLocation', 41.084951,29.016048],
];
var waStyle = [
{
featureType: "all",
stylers: [
{ saturation: -100 }
]
}
];
var map = new google.maps.StyledMapType(waStyle,{name: "MyLoc"});
var img = new google.maps.MarkerImage("/themes/bc/images/bc_pin.png");
var map = new google.maps.Map(document.getElementById('map_detail'), {
zoom: 10,
center: new google.maps.LatLng(41.084951,29.016048),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
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
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

Using your code, I see the marker. The style isn't visible because you don't use it on the map.
documentation
To actually use the style (your code with some comments and added code from the documentation referenced above):
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(waStyle,{name: "MyLoc"});
var img = new google.maps.MarkerImage("mapIcons/marker1.png");
// Create a map object, and include the MapTypeId to add
// to the map type control.
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(41.084951,29.016048),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
To use the marker icon you have defined, include it in the google.maps.Marker constructor:
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: img,
map: map
});
Note that if you have more than one marker, you are going to have issues with associating the infoWindow with the marker which can be fixed with function closure (a createMarker function) and is a FAQ.
working example based off your code

Related

Creating Geotagged Marker Alongside a Multiple Markers in Google Maps

I've been stuck on this issue for a while now and could really use some help. In a Google Map, I have a list of markers which are being treated as a markerArray, with their own custom icons. But along with displaying those markers, I would like for it to create a marker which is placed at the users geotagged location. I have tried merging the suggestions I've come across here on stack overflow, and have successfully gotten the users browser to center the map based off of geolocation, but whenever I try to add a marker outside of the standard var=locations, all of the markers disappear. I am providing my working code, which simply lacks the feature to add the "current location" marker. If anyone has any input, I'd be thrilled.
var map = null;
var markerArray = [];
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(40.746613, -73.990109),
mapTypeControl: false,
navigationControl: false,
streetViewControl: false,
zoomControl: false,
styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
});
}
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var locations = [
['90 West Apartment', 40.709943, -74.014430, 7, 'images/pin2.png'],
['Caffe Vita', 40.719652, -73.988411, 6, 'images/pin1.png'],
['Croxleys Ale House', 40.722480, -73.983386, 5, 'images/pin1.png'],
['Grays Papaya', 40.778291, -73.981829, 4, 'images/pin2.png'],
['The Back Room', 40.718723, -73.986913, 3, 'images/pin1.png'],
['MUD Coffee', 40.729912, -73.990678, 2, 'images/pin1.png'],
['Nurse Bettie', 40.718820, -73.986863, 1, 'pin2.png']];
for (var i = 0; i < locations.length; i++) {
createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
}
mc.addMarkers(markerArray, true);
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function createMarker(latlng, myTitle, myNum, myIcon) {
var contentString = myTitle;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: myIcon,
zIndex: Math.round(latlng.lat() * -100000) << 5,
title: myTitle
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
markerArray.push(marker);
}
window.onload = initialize;
Let's try this.
Put this in your initialize(): navigator.geolocation.getCurrentPosition(showPosition);
Then define showPosition:
var showPosition = function (position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Do whatever you want with userLatLng.
var marker = new google.maps.Marker({
position: userLatLng,
title: 'Your Location',
map: map
});
}

Applying Grayscale in Google Map Terrain Only

I tried doing a Google Map with multiple marker, it works without applying the Google Map style but when i set the background to grayscale it does not seem to display the map. I would like to maintain the marker colored so CSS styling is not an option. The code can be seen below
function initialize() {
// Create an array of styles.
var styles = [
{
stylers: [
{ saturation: -20 }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var locations = [
['United States', 38.976492, -103.875732, 3],
['Europe', 54.747569, 112.421105,346.289063, 3]
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 3,
center: new google.maps.LatLng(45.92, 1.25),
mapTypeId: [google.maps.MapTypeId.ROADMAP, 'map_style']
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
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
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
This part of your code is wrong, it will prevent the map from loading:
mapTypeId: [google.maps.MapTypeId.ROADMAP, 'map_style']
mapTypeId has to be exactly 1 valid mapType, not an array .
You may remove this line completely.
When you want to draw the controls for these mapTypes, you must set the mapTypeIds-option of the mapTypeControlOptions-property instead:
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 3,
center: new google.maps.LatLng(45.92, 1.25),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
});
your map should be displayed now with the 2 desired mapType-controls.
To apply a grayscale set the saturation to -100

Change pin label in google maps?

How can I change the label for pins in an embedded google maps?
Ive figured out how to change the marker to my icon, but I need to restyle the A, B, C etc similar to how travelodge do for there map http://www.travelodge.co.uk/hotels/book/edinburgh-hotels
UPDATE this is the code that successfully uses a custom marker:
function addMarker(latlng, myTitle) {
markers.push(new google.maps.Marker({
position: latlng,
map: map,
title: myTitle,
icon: "www.linkto/myPin.png"
}));
}
Ive included markerwithlabel.js However this doesn't create any markers at all:
function addMarker(latlng, myTitle) {
markers.push(new MarkerWithLabel({
position: latlng,
map: map,
title: myTitle,
icon: "www.linkto/myPin.png",
labelContent: "$425K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels",
labelStyle: {opacity: 0.75}
}));
}
This is the code I was tying to adapt:
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/examples/basic.html
If you managed to change the marker icon, then you did all the work.
A marker does not have a label. What travelodge does is that it has markers for each letter and then sets them according to the search results.
EDIT:
It seems there's a special library to do what you want (go to "Styled Marker"):
http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel
To see the code click in "Development versions", then "Examples" and then look at the source code of the pages. Here's the Simple example code:
function initialize() {
var myLatLng = new google.maps.LatLng(37.313477473067, -121.880502070713);
var myOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"ff0000",text:"I'm a marker!"}),position:new google.maps.LatLng(37.383477473067, -121.880502070713),map:map});
var styleMaker1 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"00ff00",text:"A"}),position:myLatLng,map:map});
var styleMaker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"0000ff"}),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});
}
You can read more about markers on this link

Implementing MarkerClusterer to Google Maps API

I know this has been covered a lot before and its a simple tweak to make it work but that's making it all the more frustrating.
I'm new to Google Maps API V3 and Javascript as a whole. I've managed to make a map with markers on but I'm wanting to implement the marker clusterer feature.
My code is as follows:
<script type="text/javascript">
var markers = [
['Wathegar', 58.443420, -3.247061, '/Projects/Wathegar/', '/images/MapsIcons/operational.png'],
['Wathegar 2', 58.436726, -3.216505, '/Projects/Wathegar_2/', '/images/MapsIcons/consented.png'],
['Sibmister', 58.570869, -3.429623, '/Projects/Sibmister/', '/images/MapsIcons/planning.png'],
['Humbleburn', 54.851982, -1.651425, '/Projects/Humbleburn/', '/images/MapsIcons/planning.png'],
['Achlachan', 58.449348, -3.452797, '/Projects/Achlachan/', '/images/MapsIcons/pre-planning.png'],
['Bonwick', 53.955025, -0.227451, '/Projects/Bonwick/', '/images/MapsIcons/pre-planning.png'],
['Garton', 54.033081, -0.494127, '/Projects/Garton/', '/images/MapsIcons/pre-planning.png'],
['Hill of Lybster', 58.603081, -3.679004, '/Projects/Hill-of-Lybster/', '/images/MapsIcons/planning.png'],
['Moota', 54.710442, -3.331947, '/Projects/Moota/', '/images/MapsIcons/pre-planning.png'],
['Sherburn Stone', 54.770432, -1.4593797, '/Projects/Sherburn-Stone/', '/images/MapsIcons/pre-planning.png'],
['Spring Brook', 53.498360, -1.624646, '/Projects/Spring_Brook/', '/images/MapsIcons/pre-planning.png'],
['Sunnyside', 55.387691, -3.949585, '/Projects/Sunnyside/', '/images/MapsIcons/pre-planning.png'],
['Thacksons Well', 52.955578, -0.759824, '/Projects/Thacksons_Well/', '/images/MapsIcons/pre-planning.png'],
];
function initializeMaps() {
var latlng = new google.maps.LatLng( 56.2, -2,5);
var myOptions = {
zoom: 6,
center:latlng,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
streetViewControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
url:markers[i][3],
icon:markers[i][4]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
}
}
</script>
I've tried rebuilding it in the format used in this example along with a few other blogs but I don't have a good enough understanding of JS to know what I need to do.
Any help would be greatly appreciated.
Thanks!
The format of the JSON is OK, it doesn't have any effect to the MarkerClusterer.
What you are missing is to create a instance of the MarkerClusterer and to add the markers to this instance:
var mc = new MarkerClusterer(map),//MarkerClusterer-instance
marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
url:markers[i][3],
icon:markers[i][4]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
mc.addMarker(marker);//add the marker to the MarkerClusterer
}
Please note: the linked page uses the MarkerClusterer for Maps-API-V2, for V3 use this updated Version:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js
You can also push all markers at single go to MarkerClusterer
var marker, i;
var markersArray = [];
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
url:markers[i][3],
icon:markers[i][4]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
markersArray.push(marker);
}
var mc = new MarkerClusterer(map,markersArray),//MarkerClusterer-instance which add all markers to the MarkerClusterer

GoogleMap Markers are Not Clickable on the Mobile Devices

GoogleMap Markers are Not Clickable on the Mobile Devices (Touch Screens).
But, ok on any PC, so I can't figure out what is the point.
Here is my code:
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(60.037760, -44.100494),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var locations = [
['4lvin', 60.074433, -44.011917],
['5irius', 60.037760, -44.100494]
];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<h2>'+locations[i][0]+'</h2>\n<a>Read more..</a>');
infowindow.open(map, this);
}
})(marker, i));
}
But then, when i use the following codes (the formal way of google for "google.maps.event.addListener"), Markers are showing only the same InfoWindows.
var infowindow = new google.maps.InfoWindow({content: locations[i][0]});
new google.maps.event.addListener( marker, 'click', function() {
infowindow.open(map,this);
});
The problem is because you're doing a loop, you need to use a closure, otherwise all markers will just get the content you want to associate with the last marker. Your first bit of code is doing this correctly. Suggest you change to do the same again:
var infowindow = new google.maps.InfoWindow({content: locations[i][0]});
google.maps.event.addListener( marker, 'click', function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map,this);
}
})(marker, i));
I found the following solution :
1. create marker with option
"optimized: false" : ex => new google.maps.Marker({..., optimized: false, ...});
adding another event listener
google.maps.event.addDomListener(marker, "click", function() {...});
From google forum