|
||||||||
Google Maps: MarkersThis is the ever common "pin points" called markers that you may which to place on maps. You see it used to indicate a point of interest and you can associate with it text and images. An Example
The following code has a map with a marker var map; TRY it ( and the complete code)
Advanced Markerstaken from Goolge website. Markers identify locations on the map. By default, they use a standard icon, though you can set a custom icon within the marker's constructor or by calling setIcon() on the marker. The google.maps.Marker constructor takes a single Marker options object literal specifying the initial properties of the marker. The following fields are particularly important and commonly set when constructing your marker:
Note that within the Marker constructor, you should specify the map on which to add the marker. If you do not specify this argument, the marker is created but is not attached (or displayed) on the map. You may add the marker later by calling the marker's setMap() method. To remove a marker, call the setMap() method passing null as the argument. Markers are designed to be interactive. By default, they receive 'click' events, for example, and are often used within event listeners to bring up info windows. The following example adds a simple marker to a map at Uluru, in the center of Australia:var myLatlng = new google.maps.LatLng(-25.363882,131.044922); This Marker title will show up as a tooltip. If you do not wish to pass any Marker options in the marker's constructor, instead pass an empty object {} in the last argument of the constructor. View example (marker-simple.html) AnimationsYou may also animate markers so that they exhibit dynamic movement in a variety of different circumstances. The way a marker is animated is specified within the marker's animation property, of type google.maps.Animation. The following Animation values are currently supported:
You may initiate an animation on an existing marker by calling setAnimation() on the Marker object. The following example creates a marker in Stockholm, Sweden using a DROP animation. Clicking on the marker toggles the marker between a BOUNCE animation or no animation: var stockholm = new google.maps.LatLng(59.32522, 18.07002);var parliament = new google.maps.LatLng(59.327383, 18.06747); var marker; var map; function initialize() { var mapOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, center: stockholm }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); marker = new google.maps.Marker({ map:map, draggable:true, animation: google.maps.Animation.DROP, position: parliament }); google.maps.event.addListener(marker, 'click', toggleBounce); } function toggleBounce() { if (marker.getAnimation() != null) { marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); } } View example (marker-animations.html) Note: if you have many markers, you might not want to drop them all at once on the map. You can make use of setTimeout() to space your markers' animations apart using a pattern like that shown below: function drop() { View example (marker-animations-iteration.html) IconsMarkers may define an icon to show in place of the default icon. Defining an icon involves setting a number of properties that define the visual behavior of the marker. Simple IconsIn the most basic case, an icon can simply indicate an image to use instead of the default Google Maps pushpin icon by setting the marker's icon property to the URL of an image. The Google Maps API will size the icon automatically in this case. In the example below, we create an icon to signify the position of Bondi Beach in Sydney, Australia: function initialize() { View example (icon-simple.html) Complex IconsMore complex icons will want to specify complex shapes (which indicate regions that are clickable), add shadow images, and specify the "stack order" of how they should display relative to other overlays. Icons specifed in this manner should set their icon and shadow properties to an object of type MarkerImage. Shadow images should generally be created at a 45 degree angle (upward and to the right) from the main image, and the bottom left corner of the shadow image should align with the bottom-left corner of the icon image. Shadow images should be 24-bit PNG images with alpha transparency so that image boundaries appear correctly on the map. MarkerImage objects not only define an image, but also define the size of the icon, the origin of the icon (if the image you want is part of a larger image in a sprite, for example), and the anchor where the icon's hotspot should be located (which is based on the origin). The following example creates complex markers to signify beaches near Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond to the base of the flagpole. function initialize() { |
||||||||
© Lynne Grewe |