Google map driving direction source code for their example?

Here’s a very basic example using the v3 API: <!DOCTYPE html> <html> <head> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/> <title>Google Maps API v3 Directions Example</title> <script type=”text/javascript” src=””></script> </head> <body style=”font-family: Arial; font-size: 12px;”> <div style=”width: 600px;”> <div id=”map” style=”width: 280px; height: 400px; float: left;”></div> <div id=”panel” style=”width: 300px; float: right;”></div> </div> <script type=”text/javascript”> var directionsService = … Read more

GoogleMaps v3 API Create only 1 marker on click

var marker; function placeMarker(location) { if ( marker ) { marker.setPosition(location); } else { marker = new google.maps.Marker({ position: location, map: map }); } } google.maps.event.addListener(map, ‘click’, function(event) { placeMarker(event.latLng); }); You have to work on the same marker all the time – do not create new ones. Here you have a global variable marker … Read more

Is it possible to write custom text on Google Maps API v3?

To show custom text you need to create a custom overlay. Below is an example adapted from official Google documentation. You could also use this library for more “stylish” info windows <html> <head> <script type=”text/javascript” src=””> </script> <script> //adapded from this example //text overlays function TxtOverlay(pos, txt, cls, map) { // Now initialize all … Read more

Loading google maps asynchronously

The map appears twice because you’re calling initialize twice. Before fixing that, let’s simplify your code a bit. Never let yourself repeat blocks of code like that; instead make it into a common function. Also, don’t load infobox.js from; Google Code is not a CDN. Load your own copy. So, the code may look … Read more

MarkerCluster V3 stopped working properly

As Google moved the source over to GitHub a while back, the new GitHub version can be accessed from RawGit by using the following script url: You’ll also need to specify the imagePath option when instantiating your MarkerClusterer to access the images from GitHub: var mc = new MarkerClusterer(map, markers, { imagePath: ‘’ }); … Read more

An elegant way to find shortest and fastest route in Google Maps API v3?

To obtain the shortest route from A to B I would suggest to make different queries with the “alternatives=true” parameter, playing with the “avoid” parameter between avoid=toll, avoid=highways, and then I would compare all results to pick the shortest route. directionsService = new google.maps.DirectionsService; //avoiding tolls directionsService.route({ origin: { ‘placeId’: originId }, destination: { ‘placeId’: … Read more

Box/Rectangle Draw Selection in Google Maps

I found a Library keydragzoom ( and used it to draw a rectangle on the page. Later, I edit the library and stopped it from zooming the selected area and instead made it return the correct co-ordinates in ‘dragend’ event. Then I manually looped through all the marker on the map to find the markers … Read more