Change Google Map Marker

Question

How can I change my marker in google map.is can I add our custome image to display?

Thanks, Companion

Answer 1

it's really easy - see http://code.google.com/intl/en-US/apis/maps/documentation/javascript/overlays.html#SimpleIcons

example directly from google docs

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 }); 

if you want to do more complex things, you can also extend the overlay classes on googles and do personalized rendering ...

Answer 2

This is how I use my own custom markers instead of the default markers on Google.

Add this line of code:

  var icon = new GIcon(); icon.image = "http://yourwebsite.com/logo.png"; icon.shadow = "http://youwebsite.com/shadow.png"; icon.iconSize = new GSize(50, 28); icon.shadowSize = new GSize(68, 28); icon.iconAnchor = new GPoint(37, 59); icon.infoWindowAnchor = new GPoint(31, 8); 

If necessary, adjust GSize for both icons and shadowSize. The first number in parentheses determines the width of your marker, and the second number determines the height (both in pixels).

Now add this line of code:

 var marker = new GMarker(point, icon); 

Only after this line:

 function createMarker(point, name, address) 

Hope this helps! You can see the blog post that I wrote about it at http://icode4you.net/developing-a-custom-store-locator-map-using-your-own-custom-markers-instead-of-googles-default -markers , just leave a comment if you have any questions or concerns.

Answer 3

Yes, you can definitely:

try it

 var map = new GMap2(document.getElementById("YOUR MAP ID")); var icon = new GIcon(); icon.image = "IMAGE PATH - RELETIVE OR ABSOLUTE"; icon.iconSize = new GSize(25, 30); icon.iconAnchor = new GPoint(6, 20); var marker = new GMarker(new GLatLng(Latitude, Longitude), { draggable: false, title: YOURTITLEHERE, icon: icon }); map.addOverlay(marker); 

Answer 4

This can also be easily removed from the Google V2 Maps API using the MarkerOptions object:

 map.addMarker(new MarkerOptions() .position(new LatLng( ...your_lat... , ...your_long... )) .title( "marker title" ) .icon( BitmapDescriptorFactory .fromResource( R.drawable.custom_icon ))); 

Hope this helps!

Answer 5

Or you can

 marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png') 

Or as part of the init token:

 marker = new google.maps.Marker({ icon: 'http://...' });