Apologies for the rather simple question.... I'm fairly new to both coffeescript and Google Maps API.
I'm trying to replicate the circle symbol for a Marker in this example using coffeescript, but I'm struggling with the syntax on the icon statement.
Can anyone show me how to do write the following code in coffeescript, specifically the icon part?
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
}
})
You could just drop the var and be done with it:
marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
}
})
Function-calling parentheses and object braces are often optional in CoffeeScript but you can still include them if it makes the code clearer to you.
Or you could drop the optional commas, parentheses, and braces:
marker = new google.maps.Marker
position: map.getCenter()
icon:
path: google.maps.SymbolPath.CIRCLE
scale: 10
Note that the parentheses on the map.getCenter call are not optional since that function is called without any arguments.
Or you could say:
marker = new google.maps.Marker(
position: map.getCenter()
icon:
path: google.maps.SymbolPath.CIRCLE
scale: 10
)
to make the nesting a little clearer. This is probably the one I'd use. If there was more nesting then I'd probably start adding braces to make the structure clearer or break it into pieces:
icon =
path: google.maps.SymbolPath.CIRCLE
scale: 10
marker = new google.maps.Marker(
position: map.getCenter()
icon: icon
)
Related
marker = new google.maps.Marker({
icon: image,
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
flat: true,
optimized: false,
map: map,
visible: true,
customInfo: locations[i][0]
});
I have the above to build my Marker in my Google Map but when the marker is clicked, the map zooms to the location and I'd like to make the marker non clickable.
I have tried the following with no success
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(17);
map.setCenter(this.getPosition());
marker.MarkerOptions ({
clickable: false
});
});
Read the documentation - the name of the method you are looking for is called setOptions
marker.setOptions({clickable:false});
I found it and its actually quite a simple way of doing it.
marker.setClickable (true);
Wanting to suppress infoWindow if mobile so that content can be shown in sidebar as per example.
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: point,
suppressInfoWindows: true,
icon: icon
});
I don't know Javascript well enough to be able to do it.
I have Js to detect mobile. if( isMobile.any() ) alert('Mobile');
Any assistance would be appreciated.
Instead of suppress an InfoWindow, just create one only when your're not on mobile.
if (!isMobile.any()){
//createInfoWindow
}
I'm trying to create a View for Google Maps, and actually got it to work according to some examples I found.
the problem is that the map draws correctly only the first time the page is displayed,
if routes are changed and then a map is being drawn again it looks "distorted".
the examples I found are "one page" part of apps.
View:
App.LocationView = Ember.View.extend({
templateName: 'location',
MapView: Ember.View.extend({
map: null,
latitudeBinding: 'controller.content.geometry.lat',
longitudeBinding: 'controller.content.geometry.lng',
didInsertElement: function() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(this.$().get(0),mapOptions);
this.set('map',map); //save for future updations
this.$().css({ width: "550px", height: "400px" });
},
reRenderMap : function(){
var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
this.get('map').setCenter(newLoc);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
map: this.get('map')
});
}.observes('latitude','longitude')
})
});
I show the map with {{view view.MapView}} inside a div#map-holder, in my 'location' template.
I also apply this CSS to the div to "fix" Bootstrap messing with the map controls:
#map-holder img {
max-width: none;
}
how can I fix this ?
EDIT: jsfiddle - http://jsfiddle.net/bsphere/jYfg3/
go to 'settings' and then back to 'map' to see the distorted map
It seems like this is not exactly related to Ember, but to the map redrawing and resizing. With your fiddle, if you resize the browser window, you can see the map displays correctly.
When I saw it, I tried to put the this.$().css({ width: "550px", height: "400px" }); before the contrusction of the map, and it seems to work.
When I add more Markers to Google Map with different icon types like:
...
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: "http://www.test.com/marker.png",
zIndex: 10
});
...
and
...
var resultIcon = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "black",
strokeColor: "black",
strokeWeight: 1,
};
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: resultIcon,
zIndex: 5
});
...
Than the zIndex doesn't work and the Symbol marker appears on the top.
Am I wrong with my code or how can I make the zIndex working?
You have to both specify a zIndex and add
optimized: false
to every marker constructor, eg.
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: resultIcon,
optimized: false,
zIndex: 5
})
This seems to be an issue with the new canvas based rendering of the markers.
Edit:
This really solves the issue.
One thing to mention though is that every marker has to have the "optimized: false" attribute. As long as one marker does not have it, it will not work.
Remove any of the "optimized: false" attributes from LeJared's fiddle and you will encounter the bug.
http://jsfiddle.net/BNWYq/1/
Setting zIndex of the circle to -99 seems to help: http://jsfiddle.net/rq4vs/2/
I've made a little fiddl:
http://jsfiddle.net/gSRmV/
Looks like a bug, that has to be fixed by google.
Adding optimized: false doesn't change anything.
Edit: Still looks like bug, but the two solutions from tborychowski and Codetoffel seem to work.
I want to display Markers on Google map with title displayed under them as shown in picture:
Now this I read was possible in v2 using ELabel but is deprecated in v3. Is there any possible way to show some text under icons of markers in Google Maps V3?
Since at least October 2016, the official API provides a way to add permanently visible labels that are longer than one letter. See this reply by a Google project member.
var m = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
label: 'Hello world',
});
By default, the result looks like:
Pretty unreadable. Fortunately the API also allows a MarkerLabel object instead of a plain string:
var m = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
label: {
color: 'white',
fontWeight: 'bold',
text: 'Hello world',
},
});
Snippet above yields the following result:
However, the original question asked if the label could be located below the marker. The MarkerLabel docs mention this is possible with a custom icon and labelOrigin property. If we want to use the default icon, one is available at GitHub. Let us add the icon object:
var m = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
label: {
color: 'white',
fontWeight: 'bold',
text: 'Hello world',
},
icon: {
labelOrigin: new google.maps.Point(11, 50),
url: 'default_marker.png',
size: new google.maps.Size(22, 40),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(11, 40),
},
});
This results:
Pretty good! However, this whole approach has a shortcoming that the box in the original question does not have: readability with each map type. If the map type is changed from the satellite to the default the resulting label is hard to read:
An easy but not perfect way to avoid the low contrast in the both types is to set color: 'gray':
However, the gray color fails near urban areas. A better option would be to apply text-shadow CSS property to draw black linings for the white text. However, I cannot find a way to apply the property to the labels because few DOM elements created by Google Maps define a class:
The best option I came up to is to detect changes in the map type and update label color for each marker:
map.addListener('maptypeid_changed', function () {
var typeToColor, type, color, k, label;
typeToColor = {
'terrain': 'black',
'roadmap': 'black',
'hybrid': 'white',
'satellite': 'white',
};
type = map.getMapTypeId();
color = typeToColor[type];
for (k in markers) {
if (markers.hasOwnProperty(k)) {
label = markers[k].getLabel();
label.color = color;
markers[k].setLabel(label);
}
}
});
However, even this would fail on snowy or cloudy satellite imagery. I think it is still good enough in most of the cases. Nevertheless, it is nice to have the ability to display visible labels with the official API, without any plugins :)
I found the solution in an other post which worked perfectly for me.
Add numbering label to google map marker
You can't! But there's another part of maps API you can use to have permanently displayed text attached to your markers (without requiring any third party component), it's called infoWindow. Have a look at this for sample code & see it in action: https://developers.google.com/maps/documentation/javascript/examples/event-closure
If you dare using third party code, then here's something that is closer from the look & feel you want: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html
I use the following:
MarkerWithLabel.js
( the image is just a flag.png file)
Using javascript in my X.html document
it looks something like this....
<style type="text/css">
.labels {
color: black;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 0.8em;
font-weight: bold;
text-align: center;
width: 6em;
border: 1px solid black;
white-space: normal;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&sensor=true"></script>
<!--MarkerwithLabelClass - adjust the path!! -->
<script src="YourPathHere/markerwithlabel.js"></script>
<script type="text/javascript">
//insert standaard initializing of googlemaps here
//and other windows.onload function
window.onload = function Initialize() {
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function CreateMarker(lat, long, titel, label, image, anchorY, anchorX){
var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(long));//I use parseFloat cause my parameters are strings(coming from JSON-string)
var marker = new MarkerWithLabel({
zIndex: 1,
title: titel,
position: latlng,
draggable: false,
icon: image,
labelContent: label,
labelAnchor: new google.maps.Point(30, -2),
labelClass: "labels", // the CSS class for the label
labelStyle: { opacity: 0.80 }
});
return marker;
}
</script>
Read up on license info for google maps API here : https://www.google.com/intx/en_uk/work/mapsearth/products/mapsapi.html
You should be able to use the same principle as in this example. Instead of listening to the mouse events you should create a new custom control for each marker and then position it below the marker. Hope it works out.