Is there an easy way to change the marker when embeding a googlemap with Jquery/javascript?
EDIT
bonus Question
Is there a way to use an address instead of LatLng?
Google Maps API V3 is now the official version.
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Icons
When you declare the markers use the "icon" property to set an image.
From the documentation:
var image = 'beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
You can also use the charts API to generate marker images.
E.g. http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000 for a red pin
http://groups.google.com/group/google-chart-api/web/chart-types-for-map-pins?pli=1
This example should help you: http://code.google.com/apis/maps/documentation/javascript/v2/examples/icon-simple.html .
Short description: Create an Icon object and when adding markers set that object as the icon property.
Related
I am using custom markers on Google Maps, and they work perfectly on browser mode, but the problem happens with device, I can't get picture of marker, not sure if I am placing image of marker right.
This is the code I am using.
var marker = new google.maps.Marker({
position: myLatLng,
map:this.map,
title: 'Pumpa',
icon: { url: "../assets/img/2.png",
scaledSize: new google.maps.Size(30, 30)
} });
any clues where should I put marker image and what path should I use then.
Not sure what the downvotes on the previous answer are about, using
url: "assets/img/2.png"
works for me
i think you need to remove the 2 dots in url of icon
I'm trying to change the size of my marker icons with Google Maps API. Here is my code:
new google.maps.Marker({
position: {lat: this.model.get('latitude'), lng: this.model.get('longitude')},
title: this.model.get('name'),
icon: {
url: this.model.get('iconUrl'),
size: google.maps.Size(50, 50)
}
});
The icon image is naturally 512x512. It is appearing in the correct location on the map, but it is 512x512 instead of 50x50. I've read similar questions and answers for this problem, but none of them seem to address setting the marker size with this version of the API. For example, others use the MarkerImage class, but that class no longer exists in this version.
I've also tried including the scaledSize property in the icon object, but that doesn't have any effect either.
Does anyone know what I am doing wrong? Here is the 512x512 image I would like to display as 50x50:
Looks like I was missing a new and also had to use scaledSize instead of size. This works for me:
new google.maps.Marker({
position: {lat: this.model.get('latitude'), lng: this.model.get('longitude')},
title: this.model.get('name'),
icon: {
url: this.model.get('iconUrl'),
scaledSize: new google.maps.Size(50, 50)
}
});
I've disabled streetview controls like so:
var mapOptions = {
zoom: 16,
center: myCenter,
streetViewControl:false
};
var map = new google.maps.Map(
document.getElementById("map"),
mapOptions
);
Which takes the streetview control off of the map BUT if you click on a point of interest with a panoramic image / link to streetview then click that image you are again taken into streetview mode.
I want to keep my points of interest but I want to disable maps from going into streetview mode. Is this possible?
Solution
Using the answer below I added a few more items:
.gm-rev, .gm-sv-label{display:none;}
.gm-iw, .gm-sm, .gm-wsv{pointer-events:none;}
2 possible options(there may be more):
prevent the streetView from being visible:
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function(){
if(this.getVisible()){this.setVisible(false)}
});
try to make the streetview-link in the infowindow un-clickable
.gm-sv-label{display:none;}
.gm-wsv{pointer-events:none;}
I would suggest to use both options together, because the 2nd option may fail in the future(the classNames may change)
in google maps how can weput numbers on map instead of generic (if multiple number of icons listed means number have to increment like 1,2,3 )
instead of
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
is this possible in google maps ???
here i found some link but it's not working.
It's not possible to do with the current API (v3) - but you can use the StyledMarker Library. It extends the marker class and allows you to style the icon and put text inside the icons if you want as well (which is what I believe you're looking for). Just include the script in your application (after you load the Maps API script). And then add the StyledMarker like you would the regular marker object:
var styleMaker1 = new StyledMarker({
styleIcon: new StyledIcon(StyledIconTypes.MARKER, {
color: "FFFFFF",
text: "1" //this is where you'll set your incremented value
}),
position: myLatLng,
map: map
});
Here's a fiddle of how it looks: http://jsfiddle.net/svigna/7L2wY/
I am using Google Map v2 and I only want map view and nothing more. I also would like to get rid of the zoom in and out buttons.
If anyone knows what I need to add to the following that would be great.
function stores()
{
$('#storelist ul#stores').html("");
fetch(203,"task=location&location=vic");
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-37.810013, 144.962683), 8);
map.setUIToDefault();
yellowIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/orange/blank.png";
markerOptions = { icon:yellowIcon };
}
Remove map.setUIToDefault(). It adds the default look and feel to the Map.
(Reference docs: http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMap2.setUIToDefault)
If you want, you can also customise how the map can be interacted with. For example map.disableDoubleClickZoom() or map.disableDragging(). See the reference above for details.