google-maps-api-3 - w3toppers.com

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=”http://maps.google.com/maps/api/js?sensor=false”></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

Google Maps, open info window after click on a link

What that example does is it creates an array where it stores the markers. So when the markers are created, they get pushed to that markers array. When you click on the link you send an index with the function that is a reference to the marker in the array. So JavaScript looks like this: … 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

Google maps API V3 method fitBounds()

This happens because LatLngBounds() does not take two arbitrary points as parameters, but SW and NE points use the .extend() method on an empty bounds object var bounds = new google.maps.LatLngBounds(); bounds.extend(myPlace); bounds.extend(Item_1); map.fitBounds(bounds); Demo at http://jsfiddle.net/gaby/22qte/

Google Maps API Multiple Markers with Infowindows

You could use a closure. Just modify your code like this: google.maps.event.addListener(marker,’click’, (function(marker,content,infowindow){ return function() { infowindow.setContent(content); infowindow.open(map,marker); }; })(marker,content,infowindow)); Here is the DEMO

Google maps responsive resize

Move your map variable into a scope where the event listener can use it. You are creating the map inside your initialize() function and nothing else can use it when created that way. var map; //<– This is now available to both event listeners and the initialize() function function initialize() { var mapOptions = { … 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=”http://maps.google.com/maps/api/js?sensor=false”> </script> <script> //adapded from this example http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays //text overlays function TxtOverlay(pos, txt, cls, map) { // Now initialize all … Read more

Change map opacity outside circle of Google Maps JavaScript API v3

An example that puts a circular “hole” over New York City (modified from this Google Example): var citymap = {}; citymap[‘newyork’] = { center: new google.maps.LatLng(40.714352, -74.005973), population: 8143197 }; var cityCircle; var bounds = new google.maps.LatLngBounds(); function drawCircle(point, radius, dir) { var d2r = Math.PI / 180; // degrees to radians var r2d = … Read more

How to connect two points in Google map..?

Geocoding is asynchronous. Try something like this (call the second geocoder operation from the call back of the first, use the results of both inside the call back of the second). function createLine() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(7.5653, 80.4303); var mapOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } … Read more

Google Maps API map doesn’t appear [duplicate]

Give your map_canvas div a fixed width and height, and your example will work fine: <div id=”map_canvas” style=”width: 500px; height: 400px;”></div> Otherwise, set the height to your html and body as Google does in the API tutorials: <style type=”text/css”> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { … Read more