i want to place a label below the marker (my marker is a circle). Now it is in the middle and it is not what I want, my code:
var circle = new google.maps.Marker({
position: circle,
map: map,
icon: '<?php echo get_stylesheet_directory_uri().'/images/circle.png'; ?>',
label: "My city"
});
Set the labelOrigin property of the Icon appropriately for your icon.
from the documentation:
labelOrigin | Type: Point
The origin of the label relative to the top-left corner of the icon image, if a label is supplied by the marker. By default, the origin is located in the center point of the image.
Related
I'm an HTML novice, but here goes...
When zoomed way in, this is what I see at the center of various text line insertions:
You can see this live here: https://becketbroadband.org/fsa-map%2Fstatus
The apparently-responsible code looks like this:
addOverlay(Map, FSA05_Border, '49d834', 0.3, 'FSA-05', { lat: 42.305200, lng: -73.058500}, 'Service Available Now');
Ideas? Thanks!
I see this in the code for addOverlay, at fsa-map/status on your site:
new google.maps.Marker({
position: labelPoint,
map: BecketMap,
icon: {
path: google.maps.SymbolPath.CIRCLE, // anything, required
fillOpacity: 0, // hide the symbol leaving just the label
},
label: {
text: FSAlabel,
color: '#000000', // black
fontSize: '20px',
fontWeight: 'bold',
},
});
What happens if you don't supply an icon property at all?
The guy who wrote the original code came up with the answer. (He didn't have any ideas till I pointed out the icon property details addressed in this thread.)
The "fillOpacity" value addresses the inside of the circle. This new line of code addresses and hides the circle itself:
"strokeOpacity: 0,"
Thank you, AakashM, for getting me on the path to a solution! :) You da man!
I am trying to use FontAwesome icon on FabricJs text object but can't get it to render the icon. It works with regular canvas on the same page.
My code:
const text = new fabric.IText('\uf0c2',{
left: this.centerX, //Take the block's position
top: this.centerY,
fill: 'white',
originX: 'center', originY: 'center',
fontSize:60,
fontFamily:'FontAwesome',
selectable: false
});
The result is a white rectangle (should be a cloud icon).
Is there a way to use FontAwesome icons with fabricJS?
I notice the buttons "plan" and "sattelite" moved from the bottom left corner to the top, but I already use the top left corner to display input, button, data, etc. How can I move them where they were before and not have to remake all my css ?
Use mapTypeControlOptions google.maps.ControlPositiion
var mapOptions = {
.....
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.LEFT_TOP
},
I am using Angular UI's Google Maps directives.
I would like to use a text box for the user to enter a location and with auto-complete, load the location in the maps canvas when user selects from auto-complete drop down.
How would i go about doing that using these directives ?
Thanks
This feature is not supported yet and is under construction. Refer: https://github.com/nlaplante/angular-google-maps/issues/383
The auto-complete location is supported by Angular UI Google Maps directives
Here's your search textbox and map canvas.
<input id="pac-input" class="controls" type="text" placeholder="Search for a location" ng-model="model.searchAddress" />
<div ui-map="model.locationMap" ui-options="mapOptions" id="map_canvas" class="map"
style="height: 420px; width: 420px;" ui-event="{'map-click': 'setMarker($event, $params)'}"></div>
Here's JS code that you should put into controller associated with your map and search textbox. This code taps into Google Maps API,
var searchAddressInput = document.getElementById('pac-input');
var mapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(53.5085011, -6.2154598), //south east corner
new google.maps.LatLng(53.5585011, -6.2654598) //north west corner
);
var mapOptions = {
center: new google.maps.LatLng(53.5085011, -6.2154598),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
bounds: mapBounds
};
var autocomplete = new google.maps.places.Autocomplete(searchAddressInput, mapOptions);
//set the bounds of autocomplete to map's current viewport
autocomplete.bindTo('bounds', $scope.model.locationMap);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
onPlaceChanged();
});
In the code above you are associating autocomplete object with your searchbox, then binding the onPlaceChanged() function to it, once one of the suggested locations is clicked.
This is the code that will be executed
function onPlaceChanged() {
var place = autocomplete.getPlace();
$scope.model.locationMap.panTo(place.geometry.location);
$scope.model.locationMap.setZoom(14);
//place pin on the map
marker.setPosition(new google.maps.LatLng(place.geometry.location.k, place.geometry.location.B));
}
That would be all. One more word of advice though. If you happen to be using an autocomplete for a Google Map in the modal window, you have to add this snippet into your CSS:
div.pac-container {
z-index: 1050 !important;
}
Bootstrap modal has a z-index of 900 something, so the autocomplete suggestions would appear behind it. You wouldn't get any JS errors, so it's not an ideal situation, cause you donn't know what the hell is going on. Changing z-index ensures that autocomplete suggestions are on the top.
is it possible to set the height and the width for the google maps infoWindow?
I ask this because i have an ugly scrollbar on the right side
Thanks in advance!
Just wrap the infowindow content in a div:
var infoWindow = new google.maps.InfoWindow({
position: map.getCenter(),
content: '<div id="iw"><strong>Nachtclub Bar Rouge</strong><br />Französische Straße 15<br />10117 Berlin Mitte</div>'
});
infoWindow.open(map);
example