I've been reading https://developers.google.com/maps/documentation/javascript/overlays for a while now and I can't seem to get a custom icon for my map working.
Here is my javascript:
var simplerweb = new google.maps.LatLng(55.977046,-3.197118);
var marker;
var map;
function initialize() {
var myOpts = {
center: simplerweb,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOpts);
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: simplerweb
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
Any pointers for a complete beginner with gmaps?
This question is related to
javascript
google-maps-api-3
google-maps-markers
LatLng hello = new LatLng(X, Y); // whereX & Y are coordinates
Bitmap icon = BitmapFactory.decodeResource(getApplicationContext().getResources(),
R.drawable.university); // where university is the icon name that is used as a marker.
mMap.addMarker(new MarkerOptions().icon(BitmapDescriptorFactory.fromBitmap(icon)).position(hello).title("Hello World!"));
mMap.moveCamera(CameraUpdateFactory.newLatLng(hello));
Symbol You Want on Color You Want!
I was looking for this answer for days and here it is the right and easy way to create a custom marker:
'http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=xxx%7c5680FC%7c000000&.png' where xxx is the text and 5680fc is the hexadecimal color code of the background and 000000 is the hexadecimal color code of the text.
Theses markers are totally dynamic and you can create whatever balloon icon you want. Just change the URL.
Try
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: 'http://imageshack.us/a/img826/9489/x1my.png',
map: map
});
from here
https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom
Source: Stackoverflow.com