Anyone know the URL to this icon, and if you can change the color on the most recent version of Google Maps API ?
I'd like a blue/green icon like below!
EDIT -----------------------------------------
I've found the markers here:
Markers With Text
scale = 2
text = AB
psize = 16
Green Marker
Red Marker
Google Development: Markers
You can custom everything with the API of google map.
To have a different pointer, you must add a specific code and give him the link to the icon you want to assign, and its position.
Something like this for exemple:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: iconBase + 'schools_maps.png'
});
Link to the documentation: https://developers.google.com/maps/tutorials/customizing/custom-markers
I hope it will be able to help you :)
Related
Please let me know how to move customized google map marker above the latitude and longitude point?
Here is the JSBIN : Link, here i have used three object arrays, just used this link to understated the coding structure,
Please let me know where i have to insert "anchor" to position customized icon?
You can use the anchor property of the icon object and add any offset you need for the marker image.
var iconObj = {
url: '/path/to/icon.png', //path to icon image
origin: new google.maps.Point(0, 0), //position of the image within a sprite
anchor: new google.maps.Point(25, 25), //position at which to anchor an icon in correspondance to the position of the marker
};
var markerObj = new google.maps.Marker({
position: point,
map: map,
icon: iconObj
});
Update:
To answer your second question 'where do I put this exactly in my code' - you should put icon as an object in drivers array instead of a string.
Here's modified working version of your code
I'm making a Map where my custom created marker will animate on Polyline from initial point to last point. Currently its working fine with "google.maps.SymbolPath.CIRCLE" icon. But i want to use my custom marker instead of this "google.maps.SymbolPath.CIRCLE" icon. Can someone help to do this.
it will be great if someone help me in short time. Thanks in Advance.
For adding custom icon you have to set icon value in your marker object.
Following is sample how to add custom icon
var marker = new google.maps.Marker({
position: map.getCenter(),
icon:'https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/location-alt-512.png',
draggable: true,
map: map
});
In icon youe have to give path of your custom icon.
Demo for this available here
If you want to add animation on icon on click event than first add click listener
google.maps.event.addListener(marker, 'click', toggleBounce);
and in that function do something like that
if (this.getAnimation() != null) {
this.setAnimation(null);
} else {
this.setAnimation(google.maps.Animation.BOUNCE);
}
New demo here
I have a simple question for someone who is familiar with Google Fusion Tables. Basically I want a user to be able to change a marker style on the map by indirectly altering the numerical column that corresponds to the markerstyle type.
Specifically, I currently have a Fusion Table with approximately 7000 addresses and the corresponding map. I am wondering if there is anyway FROM THE MAP to change the marker type. Here is how I currently have it configured: I have a column in the fusion table that divides the marker types into 'buckets' that plot different marker types. Right now they are all red circles, and as i visit each location I want to individually change the marker type (so in the table I would change the 1 (which corresponds to red) to a 3 (which corresponds to green)) so that I know which houses I visited. But it isnt feasible for me to scroll down the fusion table of 7000 points and change the 1 to 3, so Im wondering if theres anyway I can change it on the map directly EITHER FROM A MAP ON A WEBPAGE OR ON THE FUSION TABLE MAP INSIDE GOOGLE.
Thank you in advance,
David
If you have a fusion table derived map on a page, you could add a button to an info window that updates a value in a the fusion table - so you could change the value from 1 to 3. Take it a bit further you could add a listener to the click on the map marker itself and change the value.
Updating a value (especially if you are an owner of the table) is straightforward (https://developers.google.com/fusiontables/docs/v1/using#updateRow or https://developers.google.com/fusiontables/docs/v1/sql-reference#updateRow) and is basically a fairly standard form of sql manipulation using HTTP to invoke the request.
UPDATE <table_id>
SET <column_name> = <value> {, <column_name> = <value> }*
WHERE ROWID = <row_id>
Adding a listener to a marker to pup up an info window with an updating button is also straightforward:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'button that call some ajax to fire off a column update' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Using Google's example code for detecting a user's location, I setup a basic page that detects a user's location on a map. I also setup a separate page that drops a marker on a map at a specific coordinate. I want to combine these functions into one script. That is, I want to drop a marker on the map at the location detected, but I can't seem to get it to work. My code detects the user's location, but doesn't drop a marker. I'm sure it's something simple, but I'm not familiar with Javascript, so I'm having trouble resolving the problem.
Below is Google's example code. What would I need to add to display the marker at initialLocation? I tried adding the following code:
var marker = new google.maps.Marker({
position: initialLocation,
map: map,
title: "You are here"
});
Try calling setMap() after you've created the marker:
var marker = new google.maps.Marker({
position: initialLocation,
map: map,
title: "You are here"
});
marker.setMap(map);
Hi I am doing a project on Integration of google map v3.0. I finished the integration I am happy with the Output. The Problem is I was trying to change the RED Marker to Custom Marker. I have saved a marker in my solution. And was trying with this piece of code.
The Program is running but i am not getting any marker on the map(either red marker or custom marker). I tried in many blogs but couldnot find a solution.
Please anyone Help me Out.
var icon = new google.maps.MarkerImage("icon55.png");
var marker = new google.maps.Marker({
position: location,
map: map,
icon: icon
});
Thank You
This is how I have been doing markers with customer icons:
var marker = new google.maps.Marker({
position: latlng,
map: theMap,
title: title,
icon: icon
});
Here latlng is a google.maps.LatLng object, theMap is the google.maps.Map object, title is a string, icon is the url to the customer marker image.
Hope this helps.
Bob