google-maps snippets

Google Maps Version 3 Example with Markers and InfoWindow

Tagged google-maps, maps, google  Languages html
<style media="screen" type="text/css">
  #map { width:960px; height:330px; }
</style>


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<div id="map"></div>

<script type="text/javascript">
  var map;
  var marker;
  var initialized = false;

  var infowindow = new google.maps.InfoWindow({
    content: '',
    //disableAutoPan: true // Not compatible with InfoWindows. They are cropped...
  });

  // Triggered when map is loaded or moved
  var boundsChangedListener = function() {
    if(initialized == true) { return };

    initialized = true;

    addMarkers();
  };

  function addMarkers() {
    var bounds = map.get_bounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();

    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();

    var icon = '/images/icons/xxx-club-16.gif';

    for (var i = 0; i < 10; i++) {
      var point = new google.maps.LatLng(
        southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random()
      );

      var marker = new google.maps.Marker({
        position: point, 
        map:      map, 
        icon:     icon, 
        title:    "Marker"
      });   

      addMarker(marker);
    }
  }

  function addMarker(marker) {
    google.maps.event.addListener(marker, 'mouseover', function() {
      marker.html = 'Marker xxx';
      infowindow.open(map, marker);
    });

    google.maps.event.addListener(marker, 'mouseout', function() {
      infowindow.close();
    });
  }
</script>

How to find a Google Map marker's exact position

Tagged google-maps, marker, position, relative  Languages javascript

You need a custom OverlayWindow:

function ProjectionHelperOverlay(map) {
  this.set_map(map);
}

ProjectionHelperOverlay.prototype = new google.maps.OverlayView();
ProjectionHelperOverlay.prototype.draw = function () {
  if (!this.ready) {
    this.ready = true;
    google.maps.event.trigger(this, 'ready');
  }
}; 

overlay = new ProjectionHelperOverlay(map);

And you need to find the markers position relative to the overlay:

google.maps.event.addListener(marker, 'mouseover', function(event) {
  var p = overlay.get_projection().fromLatLngToDivPixel(marker.get_position());

  // map world relative to map container
  var container = overlay.get_panes().mapPane.parentNode;
  var x = p.x + parseInt(container.style.left);
  var y = p.y + parseInt(container.style.top);
});

Code found in this thread on Google Groups.

How to draw a circle on a Google map (API V3)

Tagged circle, google-maps  Languages javascript
var latlng = new google.maps.LatLng(lng, lat);
// 200km radius
var circle = new google.maps.Circle({radius: 200*1000, center: latlng}); 
circle.setCenter(map.getCenter());
circle.setMap(map);
//map.fitBounds(circle.getBounds());

How to draw driving directions on a Google map (API V3)

Tagged driving, directions, google-maps  Languages javascript

This snippet gives you the driving directions from the center of the map to Dubai:

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

var request = {
  origin:  map.getCenter(), 
  destination: 'Dubai',
  travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(result, status) {
  if (status == google.maps.DirectionsStatus.OK) {
     // Display the distance:
     $('#distance').html(result.routes[0].legs[0].distance.value + " meters");
     // Display the duration:
     $('#duration').html(result.routes[0].legs[0].duration.value + " seconds");
    directionsDisplay.setDirections(result);
    directionsDisplay.setMap(map);
  }
});

How to embed Google Maps driving directions on your site

Tagged google-maps, driving, directions  Languages html
<form action="http://maps.google.com/maps" method="get">
  <label for="saddr">Where are you starting your trip?</label>
  <input type="text" name="saddr" id="saddr" value="Adelaide, Australia" />
  <input type="submit" value="Go" />
  <input type="hidden" name="daddr" value="Melbourne, Australia" />
  <input type="hidden" name="hl" value="en" />
</form>