google api marker + click

Question

I am trying to add a custom marker to my google api: works fine except when I click on that marker, I have no event any more:

var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(0, 0), 5); map.addControl(new GLargeMapControl3D()); map.addControl(new GMenuMapTypeControl()); var myIcon = new GIcon(G_DEFAULT_ICON); myIcon.image = "http://farm3.staticflickr.com/2140/1911601567_49d97f3318.jpg"; myIcon.iconSize = new GSize(80, 60); markerOptions={}; //markerOptions = { icon:myIcon }; // if I uncomment this : no click anymore var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); var marker = new GMarker(point, markerOptions); marker.html = 'hello world'; map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(marker.html); })

If I uncomment //markerOptions = { icon:myIcon };

I have my photo displayed, but I cannot click on marker any more.

Someone can help me? You can see it working on http://www.roulette-chat.fr/google.php.

Regards

why are you using v2 a deprecated api. you can use v3

defau1t
– defau1t

2011-12-29 03:56:38 +00:00
Commented Dec 29, 2011 at 3:56 — defau1t
– defau1t, Commented Dec 29, 2011 at 3:56

defau1t · Accepted Answer · 2011-12-29 04:03:24Z

I would say use api v3 instead. The one you are using is a deprecated. You can use something like below, to have your own image as a marker. To set the marker as clickable you need to use the property clickable:true

<script type="text/javascript"> (function() { window.onload = function(){ // Creating a LatLng object containing the coordinate for the center of the map var latlng = new google.maps.LatLng(56.83, 15.16); // Creating an object literal containing the properties we want to pass to the map var options = { zoom: 7, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; // Calling the constructor, thereby initializing the map var map = new google.maps.Map(document.getElementById('map'), options); var marker = new google.maps.Marker({ position: new google.maps.LatLng(56.8848, 14.7730), map: map, title: 'My workplace', clickable: true, icon: 'url of your image' //this is a custom marker Image }); } })(); </script>

To add an action you have to add an eventListener like this:

google.maps.event.addListener(marker, 'click', function() { //do some action });

Collectives™ on Stack Overflow

google api marker + click

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related