I'm looking how to add specific markers to my gmap.
This is the code:
LatLng coord1 = new LatLng (y, x);
advancedModel.addOverlay(new Marker(coord1, "test", "orange.png", "http://maps.google.com/mapfiles/ms/micons/blue-dot.png"));
I want to add my specific marker which is in /resources/images not this one http://maps.google.com/mapfiles/ms/micons/blue-dot.png
Can you help?
You can add custom markers in Google Maps and you can also change the marker icon, depending on the type of feature the marker's being added to. Each point of interest in the list of campus features has a type attribute.
Below code is a sample code snippet how to add custom markers:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
You can do something like this:
Marker newMarker = new Marker(new LatLng(latitude, longitude));
newMarker.setIcon("resources/media/marker-blue-dot.png");
simpleModel.addOverlay(newMarker);
Related
I have successfully added a custom image for the marker on the google map. The problem is such that the default marker that is balloon still appears along with the new image.
How should remove the default marker and only use the custom image?
The following is the code block that I have used :
var image = "image url";
marker = createMarker(point, address1, town, postcode, SiteName);
marker = new google.maps.Marker({
position: point,
map: map,
icon: image
});
The code for createMarker function is as follows:
function createMarker(point, address1, town, postcode, sitename) {
var html;
var infowindow;
html = '<b>' + sitename + '</b>' + '<br/>' + address1 + '<br/>' + town + '<br/>' + postcode;
var marker = new google.maps.Marker({ position: point, map: map });
google.maps.event.addListener(marker, "mouseover", function () {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({ content: html });
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, "click", function () {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({ content: html });
infowindow.open(map, marker);
});
return marker;
}
Icon property- can be set an image OR vector path:
Example-
marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363882, 131.044922),
icon: {
path: google.maps.SymbolPath.CIRCLE,
},
or
icon: url of an image,
draggable: true,
map: map,
animation: google.maps.Animation.DROP
});
This icon property will override the default ballon icon
Or if you want to set the icon later in the code- just write- marker.setIcon("your url");
UPDATE: You are actually creating two markers at the same location, one with the custom icon and with default icon.
Here-
marker = createMarker(point, address1, town, postcode, SiteName);`// marker1`
marker = new google.maps.Marker({ `...... //marker 2`
So combine these both-
function createMarker(point, address1, town, postcode, sitename, image) {
//code
var marker = new google.maps.Marker({ position: point, map: map, icon:image });
Can somebody help me put the current location in front of all others? I have read about MAX_ZINDEX and setZindex() but I cannot understand it. This is my code:
var latlng = new google.maps.LatLng(lat,lng);
var image = "";
var currentplace = "Ohla Hotel";
var zInd = "";
if( name == currentplace ) {
image = "../img/hotel_icon.png";
}
else {
image = "../img/home_icon.png";
}
//alert();
var maxZindex = google.maps.Marker.MAX_ZINDEX;
if( name == currentplace ) {
zInd = (maxZindex + 1);
}
var locationDescription = this.locationDescription;
var marker = new google.maps.Marker({
map: map,
position: latlng,
title:'pk:'+name,
MAX_ZINDEX: zInd,
icon: image
});
bounds.extend(latlng);
setMarker(map, marker, name, locationDescription);
MAX_ZINDEXis a constant, not an attribute of a marker.
The relevant MarkerOption is zIndex:
var marker = new google.maps.Marker({
map: map,
position: latlng,
title:'pk:'+name,
zIndex: zInd,
icon: image
});
This sets the marker's zIndex attribute to the value you have calculated, which is one more than the API's maximum value.
Most of your code makes sense, but your definition of the MarkerOptionsapi-doc object doesn't make sense. Try changing your marker creation code to this:
var marker = new google.maps.Marker({
map: map,
position: latlng,
title:'pk:'+name,
zIndex: zInd,
icon: image
});
Since you have already set the value of zInd higher than google.maps.Marker.MAX_ZINDEX, making this change should place the marker higher in the zIndex and thus above the other markers on the map.
How can I add label to my marker if my markers are populated on ajax success each result.
map.gmap('addMarker', { 'position': new google.maps.LatLng(result.latitude, result.longitude) });
I tried like this, but with no success:
map.gmap('addMarker', {
'position': new google.maps.LatLng(result.latitude, result.longitude),
'bounds': true,
'icon': markerIcon,
'labelContent': 'A',
'labelAnchor': new google.maps.Point(result.latitude, result.longitude),
'labelClass': 'labels', // the CSS class for the label
'labelInBackground': false
});
If you just want to show label below the marker, then you can extend google maps Marker to add a setter method for label and you can define the label object by extending google maps overlayView like this..
<script type="text/javascript">
var point = { lat: 22.5667, lng: 88.3667 };
var markerSize = { x: 22, y: 40 };
google.maps.Marker.prototype.setLabel = function(label){
this.label = new MarkerLabel({
map: this.map,
marker: this,
text: label
});
this.label.bindTo('position', this, 'position');
};
var MarkerLabel = function(options) {
this.setValues(options);
this.span = document.createElement('span');
this.span.className = 'map-marker-label';
};
MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
onAdd: function() {
this.getPanes().overlayImage.appendChild(this.span);
var self = this;
this.listeners = [
google.maps.event.addListener(this, 'position_changed', function() { self.draw(); })];
},
draw: function() {
var text = String(this.get('text'));
var position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
this.span.innerHTML = text;
this.span.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) + 10 + 'px';
this.span.style.top = (position.y - markerSize.y + 40) + 'px';
}
});
function initialize(){
var myLatLng = new google.maps.LatLng(point.lat, point.lng);
var gmap = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
map: gmap,
position: myLatLng,
label: 'Hello World!',
draggable: true
});
}
</script>
<style>
.map-marker-label{
position: absolute;
color: blue;
font-size: 16px;
font-weight: bold;
}
</style>
This will work.
I doubt the standard library supports this.
But you can use the google maps utility library:
http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new MarkerWithLabel({
position: myLatlng,
map: map,
draggable: true,
raiseOnDrag: true,
labelContent: "A",
labelAnchor: new google.maps.Point(3, 30),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
The basics about marker can be found here: https://developers.google.com/maps/documentation/javascript/overlays#Markers
Support for single character marker labels was added to Google Maps in version 3.21 (Aug 2015). See the new marker label API.
You can now create your label marker like this:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(result.latitude, result.longitude),
icon: markerIcon,
label: {
text: 'A'
}
});
If you would like to see the 1 character restriction removed, please vote for this issue.
Update October 2016:
This issue was fixed and as of version 3.26.10, Google Maps natively supports multiple character labels in combination with custom icons using MarkerLabels.
The way to do this without use of plugins is to make a subclass of google's OverlayView() method.
https://developers.google.com/maps/documentation/javascript/reference?hl=en#OverlayView
You make a custom function and apply it to the map.
function Label() {
this.setMap(g.map);
};
Now you prototype your subclass and add HTML nodes:
Label.prototype = new google.maps.OverlayView; //subclassing google's overlayView
Label.prototype.onAdd = function() {
this.MySpecialDiv = document.createElement('div');
this.MySpecialDiv.className = 'MyLabel';
this.getPanes().overlayImage.appendChild(this.MySpecialDiv); //attach it to overlay panes so it behaves like markers
}
you also have to implement remove and draw functions as stated in the API docs, or this won't work.
Label.prototype.onRemove = function() {
... // remove your stuff and its events if any
}
Label.prototype.draw = function() {
var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); // translate map latLng coords into DOM px coords for css positioning
var pos = this.get('position');
$('.myLabel')
.css({
'top' : position.y + 'px',
'left' : position.x + 'px'
})
;
}
That's the gist of it, you'll have to do some more work in your specific implementation.
You can now add a class name to the marker label via google.maps.MarkerLabel interface.
For example:
const marker = new google.maps.Marker({
position: position_var,
map,
label: {
text: 'label text',
className: "my-label-class",
},
title: "Marker Title",
});
For a full list of options see the google map reference doc:
https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
I have a map I am developing. The basic Google RED DROPLET icon shows up as my marker image. How can I get my own custom image to come up? I have individual images for just about all 50 of my markers (will be company's logo).
Can someone help? Here's the link.
Any help setting custom markers with the code I have presently would be great.
From actual code:
var image = './beachflag.png';
[...]
var marker=new google.maps.Marker({
position: myPosition,
map: map,
icon: image
});
Your code:
var point = new google.maps.LatLng(37.984798,-121.312094);
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>');
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]
What you need to do:
var point = new google.maps.LatLng(37.984798,-121.312094);
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>', image);
And change CreateMarker:
function createMarker(latlng, html, img) {
// Note here the addition of the img parameter
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
***icon: img,***
zIndex: Math.round(latlng.lat()*-100000)<<5
});
[...]
EDIT
A quick test with your code and my mods.
You can select the image and later associated that image with your lat and long, in this case there is one function that creates the marker.
if(location.category=="TEAMNAME"){
var image='img/blueMarker.png';
}
if(location.category=="TEAMNAME2"){
var image='img/redMarker.png';
}
function displayLocation(location){
var content = '<strong><p>Team: ' +location.category + '</strong>';
var latLng = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true,
visible: true,
title: location.category,
icon: image
});
/*Content window asociated to created markers*/
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(content);
infowindow.open(map, marker);
});
return marker;
}
I've 2 function as below:
function addMarker() {
marker = new google.maps.Marker({
position: Gpoint,
map: map,
draggable: true,
animation: google.maps.Animation.DROP
});
map.panTo(Gpoint);
google.maps.event.addListener(marker, "rightclick",
function (point) {
showContextMarker(point.latLng); } );
$('.contextmenu').remove();
};
function delMarker() { marker.setMap(null); $('.contextmenu').remove(); };
So, as may understand I have a Context Menu having "Delete Marker" option on it.
I am binding a "rightclick" listener during adding a marker, to show this menu.
Everything is working without any problem till this moment.
But when I try to click on a marker to delete; it is effecting only the last added marker.
When I try again; nothing happens.
So my idea is to get the clicked marker's id (or something that may well be useful) and run this deleting function according to this.
Briefly; I want to delete the marker that I clicked on, from a map having multiple markers.
Do you have any approach to solve this problem ?
Thanks in advance!
SOLVED!
Here is the solution. Thank you Fatih. it was impossible without your guidance:
var id;
var markers = {};
var addMarker = function () {
marker = new google.maps.Marker({
position: Gpoint,
map: map,
draggable: true,
animation: google.maps.Animation.DROP
});
map.panTo(Gpoint);
id = marker.__gm_id
markers[id] = marker;
google.maps.event.addListener(marker, "rightclick", function (point) { id = this.__gm_id; delMarker(id) });
}
var delMarker = function (id) {
marker = markers[id];
marker.setMap(null);
}
Calling delete function by: delMarker(id)
Ps: "Right clicking is enough on this case"
Thank you!
Working Sample on jsFiddle
Google Maps doesn't manage your markers. So all your markers should be managed by yourself.
Make a global marker object and push all markers to this object. And give unique id to each marker when getting a marker instance. Then when you want to delete a marker take its id and find this marker in global marker object and finally call this marker instance's setMap method with passing null argument.
Also I've added a demo that works on jsFiddle. Code is heavily documented.
Your psuedo code should be like this. For more detailed code please look the demo.
var currentId = 0;
var uniqueId = function() {
return ++currentId;
}
var markers = {};
var createMarker = function() {
var id = uniqueId(); // get new id
var marker = new google.maps.Marker({ // create a marker and set id
id: id,
position: Gpoint,
map: map,
draggable: true,
animation: google.maps.Animation.DROP
});
markers[id] = marker; // cache created marker to markers object with id as its key
return marker;
}
var deleteMarker = function(id) {
var marker = markers[id]; // find the marker by given id
marker.setMap(null);
}
Complementing the #Fatih answer you should manage the markers. For example you could add each marker in a array and then to remove, you could find this marker into the array and set the val in the map null.
Just pass your marker in the rightclick function. For example:
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: true,
title: 'Hello World!'
});
google.maps.event.addListener(marker, "rightclick", function (point) {delMarker(marker)});
And make the function look this:
var delMarker = function (markerPar) {
markerPar.setMap(null);
}
Your markers will be removeable on the rightclicks.
this worked for me:
a second currentId, if you have a better idea, let me know
var actualMarkerId = 0;
var currentId = 0;
if (actualMarkerId>0) {
deleteMarker(actualMarkerId);
console.log(actualMarkerId);
}
var id = uniqueId(); // get new id
actualMarkerId = id;
For minimal changes
var newid=0;
for (var index in results){
var marker = new google.maps.Marker({
map: map,
icon: image,
__gm_id: = newid+1,
});
}
Now marker['__gm_id'] still has a value
Simple,Use Global array for marker Objects.
Push marker object in that array on plotting marker.
Yes,We can use Id in Marker Object for Unique Reference.
Code As Below
MarkerArray = []
marker = new google.maps.Marker({
Id: 1,
position: new google.maps.LatLng(Lat,Long),
type: 'info'
});
MarkerArray.push(marker);
To remove particular Marker,Find that Element Index using Unique Id for Each Marker.
var MarkerIndex = MarkerArray.findIndex(function GetIndex(element) {
return element.Id == 1;
});
MarkerArray[MarkerIndex].setMap(null);
MarkerArray.splice(MarkerIndex, 1); // to remove element from global array