CODEWITHSUNDEEP
javascriptgoogle-maps
keyur
keyur

Reputation: 493

put my own image as marker instead of pin mark

i want to put my marker pin for this code:

  var map = new GMap2(document.getElementById("map-canvas"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(<?=$lat;?>,<?=$lng;?>), 6);

  var point = new GLatLng(<?=$lat;?>,<?=$lng;?>);
  var marker = createMarker(point,'Welcome:<b></b><br>Second Info Window with an image<br><img src="http://localhost/gps/user_photo/" width=80 height=80>')
  map.addOverlay(marker);

  function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

how can i do that?????

Upvotes: 9

Views: 1120

Answers (2)

Flygenring
Flygenring

Reputation: 3848

I agree that you shouldn't use the API v2, but if you're bound to use it for some reason you can use your own pictures by creating a GIcon and assigning it to the marker, i.e.

var mIcon = new GIcon();
mIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
mIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
mIcon.iconSize = new GSize(12, 20);
mIcon.shadowSize = new GSize(22, 20);
mIcon.iconAnchor = new GPoint(6, 20);
mIcon.infoWindowAnchor = new GPoint(5, 1);

The properties of the GIcon their names should be pretty self explanatory; there are the image files, their sizes and then two anchors - one that specifies where the image will be stuck to the map and one that specifies where the info window will be attached to the marker.

When you create your marker, you pass the icon as an argument and assign it to the marker, so

function createMarker(point,html) {
    var marker = new GMarker(point);

becomes

function createMarker(point, mIcon, html) {
    var markerOptions = {icon: mIcon};
    var marker = new GMarker(point, markerOptions);

and that should take care of business.

Upvotes: 0

Pekka
Pekka

Reputation: 449385

The Google Maps V3 API (Make sure you use only that - you seem to use the V2 API!) has a good documentation - make sure you bookmark this, you'll need it.

There are lots of JavaScript samples. Here is an example for building a custom marker.

Also check out the Demo Gallery for advanced applications.

Upvotes: 5

Related Questions