RSS

Tag Archives: google map

Google Map InfoBox

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
<script type="text/javascript"> 
    var ib = null;
    var theMap = null; 
function initialize() {
    var latlng = new google.maps.LatLng(55.672962361614566, 12.56587028503418);

    var myMapOptions = {
         zoom: 15
        ,center: latlng
        ,mapTypeId: google.maps.MapTypeId.ROADMAP
        ,streetViewControl: false
    };
    theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
// namn
var name=[];
name.push('Test 1');
name.push('Test 2');

// positioner
var position=[];
position.push(new google.maps.LatLng(55.667093265894245,12.581255435943604));
position.push(new google.maps.LatLng(55.66453963191134, 12.584795951843262));

// infoboxes
var infobox = [];
infobox.push("<div>Hello 1</div>");
infobox.push("<div>Hello 2</div>");

  ib = new InfoBox({});

for (i = 0; i < position.length; i += 1) {
// Call function
createMarkers(position[i], infobox[i], name[i]);
}

function createMarkers(position,content,name) {
    // alert("createMarkers("+position+","+content+","+name+")");
    var marker = new google.maps.Marker({
        map: theMap,
        draggable: false,
        position: position,
        visible: true,
        title: name
    });

    var boxText = document.createElement("div");
    boxText.style.cssText = "background: yellow; width: 300px; height: 70px; padding: 5px;";
    boxText.innerHTML = content;

    var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-37, -120)
        ,zIndex: null
        ,boxStyle: { 
            background: "url('tipbox.gif') no-repeat"
            ,opacity: 1
            ,width: "300px"
         }
        ,closeBoxMargin: "5px 5px 5px 5px"
        ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
    };

    google.maps.event.addListener(marker, "click", function (e) {
     alert("click");
        ib.setOptions(myOptions);
        ib.open(theMap, this);
    });

    ib.open(theMap, marker);
    ib.hide();

    }

}
</script> 

<title>Creating and Using an InfoBox</title> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width: 100%; height: 400px"></div></body>
</html>

Advertisements
 
Leave a comment

Posted by on September 14, 2015 in Geo Programming

 

Tags: ,

jQueryMobile with Google Map

jQueryMobile with Google Map

jQueryMobile with Google Map

Demo

This demo is based on jQuery UI plugin for Google Maps.

<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
<script type="text/javascript">

var colombo = new google.maps.LatLng(26.5727,73.8390);
var delhi = new google.maps.LatLng(28.6100,77.2300);
mobileDemo = { 'center': '28.6100,77.2300', 'zoom': 12 };

function initialize() {
$('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
$('#map_canvas').gmap('addMarker', { 'position': delhi } );
}

$(document).on("pageinit", "#basic-map", function() {
initialize();
});

$(document).on('click', '.add-markers', function(e) {
e.preventDefault();
$('#map_canvas').gmap('addMarker', { 'position': colombo } );
});
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="#">jQuery mobile with Google</a></h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
<a href="#" data-role="button" data-theme="b">Add Some More Markers</a>
</div>
</div>
</body>
</html>
 
1 Comment

Posted by on September 9, 2013 in jQueryMobile

 

Tags:

Reverse Geocoding with Google Map API

Reverse Geocoding

Reverse Geocoding

Demo

If you know the latitude and longitude of a particular location, you can get the relevant address details such as city, state, region, country…etc. This process is known as Reverse Geocoding. In this post I ‘m gonna show you how this could be achieved with famous Google Map API. This entire post is based on one API request. Look at below code.

http://maps.googleapis.com/maps/api/geocode/json?latlng=-37.814251,144.963169&sensor=false

Enter above line in the browser bar to see a whole bunch of location details for the geographical point (-37.814251,144.963169) in lat lng format.
Pretty Simple. Here I’m using Google Map JavaScript API V3. All you need to do is to parse the json response to extract the information whatever you need.

jQuery.ajax({
url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng=-37.814251,144.963169&sensor=false',
type: 'POST',
dataType: 'json',
success: function(data) {
if(data.status == 'OK')
{

alert(data.results[1].formatted_address);
alert(data.results[1].address_components[0].long_name);
alert(data.results[1].address_components[1].long_name);

}

},
error: function(xhr, textStatus, errorThrown) {
alert("Unable to resolve your location");

}
});
 
2 Comments

Posted by on May 13, 2013 in Geo Programming, JavaScript

 

Tags: ,

Google Map Street View

Google Map Street View

Google Map Street View

Demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="<a>utf-8</a>">
    <title>Street View service</title>
    <link href="<a href="view-source:https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css">/maps/documentation/javascript/examples/default.css</a>" rel="<a>stylesheet</a>">
    <script src="<a href="view-source:https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false</a>"></script>
    <script>
function initialize() {
  var fenway = new google.maps.LatLng(42.345573,-71.098326);
  var mapOptions = {
    center: fenway,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(
      document.getElementById('map-canvas'), mapOptions);
  var panoramaOptions = {
    position: fenway,
    pov: {
      heading: 34,
      pitch: 10
    }
  };
  var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
  map.setStreetView(panorama);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="<a>map-canvas</a>" style="<a>width: 400px; height: 300px</a>"></div>
    <div id="<a>pano</a>" style="<a>position:absolute; left:410px; top: 8px; width: 400px; height: 300px;</a>"></div>
  </body>
</html>
 
Leave a comment

Posted by on April 24, 2013 in Geo Programming, JavaScript

 

Tags: ,

Display Information Window in Google Map

Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>codezone4 - Google Maps Simple Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function initialize()
{
var latlng = new google.maps.LatLng(9.931544168615512,76.27632894178791);
var opt =
{
center:latlng,
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableAutoPan:false,
navigationControl:true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL },
mapTypeControl:true,
mapTypeControlOptions: {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}
};
var map = new google.maps.Map(document.getElementById("map"),opt);
var marker= new google.maps.Marker({
position: new google.maps.LatLng(6.9167,79.8333),
title: "codeZone4 Base",
clickable: true,
map: map
});


var infowindow = new google.maps.InfoWindow(
{
content: " We are here! "

});


google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});



}

</script>
</head>
<body onload="initialize()">
<div id="map" style="width:400px;height:300px;margin-top:10px;"></div>
</body>
</html>
 
Leave a comment

Posted by on July 9, 2012 in Geo Programming, JavaScript

 

Tags: ,

HTML5 Geolocation

Demo              Download

<!DOCTYPE html>
<html>
	<head>

		<script src="<a href="view-source:http://maps.googleapis.com/maps/api/js?sensor=false">http://maps.googleapis.com/maps/api/js?sensor=false</a>"></script>
		<script>
			// Integration with google maps
			function loadMap(lat, lng) {
				var latlng = new google.maps.LatLng(lat, lng);

				var settings = {
					zoom: 14,
					center: latlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};

				var map = new google.maps.Map(document.getElementById('map_canvas'), settings);

				var marker = new google.maps.Marker({
					position: latlng,
					map: map,
					title: 'Your Position!'
				});

				document.getElementById('status').innerHTML = 'Position Found!';
			}

			// Initialize geolocation
			function initialize() {
				if (navigator.geolocation) {
					document.getElementById('status').innerHTML = 'Checking...';

					navigator.geolocation.getCurrentPosition(
						onSuccess,
						onError, {
							enableHighAccuracy: true,
							timeout: 20000,
							maximumAge: 120000
						});
				}
				else {
					document.getElementById('status').innerHTML = 'Geolocation not supported.';
				}
			}

			// Map position retrieved successfully
			function onSuccess(position) {
				var data = '';

				data += 'latitude: ' + position.coords.latitude + '<br/>';
				data += 'longitude: ' + position.coords.longitude + '<br/>';
				data += 'altitude: ' + position.coords.altitude + '<br/>';
				data += 'accuracy: ' + position.coords.accuracy + '<br/>';
				data += 'altitudeAccuracy: ' + position.coords.altitudeAccuracy + '<br/>';
				data += 'heading: ' + position.coords.heading + '<br/>';
				data += 'speed: ' + position.coords.speed + '<br/>';

				document.getElementById('data').innerHTML = data;

				loadMap(position.coords.latitude, position.coords.longitude);
			}

			// Error handler
			function onError(err) {
				var message;

				switch (err.code) {
					case 0:
						message = 'Unknown error: ' + err.message;
						break;
					case 1:
						message = 'You denied permission to retrieve a position.';
						break;
					case 2:
						message = 'The browser was unable to determine a position: ' + error.message;
						break;
					case 3:
						message = 'The browser timed out before retrieving the position.';
						break;
				}

				document.getElementById('status').innerHTML = message;
			}
		</script>
	</head>
	<body onload="<a>initialize()</a>">
		<div id="<a>status</a>"></div>
		<div id="<a>data</a>"></div>
		<div id="<a>map_canvas</a>" style="<a>width: 640px; height: 480px</a>"></div>
	</body>
</html>

 
1 Comment

Posted by on April 19, 2012 in Geo Programming, JavaScript

 

Tags: , , ,

Calculate Distance between two points, Get Driving Time – Advanced Distance Finder Tutorial

So you need to find distance between two places on the map and the shortest route. You need to get the driving time between these places

Demo              Download

<html>
<head>
<title>Distance finder</title>
<meta type="<a>description</a>" content="<a>Find the distance between two .</a>"/>

<script type="<a>text/javascript</a>" src="<a href="view-source:http://maps.google.com/maps/api/js?sensor=true">http://maps.google.com/maps/api/js?sensor=true</a>"></script>
<script type="<a>text/javascript</a>">

	var location1;
	var location2;

	var address1;
	var address2;

	var latlng;
	var geocoder;
	var map;

	var distance;

	// finds the coordinates for the two locations and calls the showMap() function
	function initialize()
	{
		geocoder = new google.maps.Geocoder(); // creating a new geocode object

		// getting the two address values
		address1 = document.getElementById("address1").value;
		address2 = document.getElementById("address2").value;

		// finding out the coordinates
		if (geocoder)
		{
			geocoder.geocode( { 'address': address1}, function(results, status)
			{
				if (status == google.maps.GeocoderStatus.OK)
				{
					//location of first address (latitude + longitude)
					location1 = results[0].geometry.location;
				} else
				{
					alert("Geocode was not successful for the following reason: " + status);
				}
			});
			geocoder.geocode( { 'address': address2}, function(results, status)
			{
				if (status == google.maps.GeocoderStatus.OK)
				{
					//location of second address (latitude + longitude)
					location2 = results[0].geometry.location;
					// calling the showMap() function to create and show the map
					showMap();
				} else
				{
					alert("Geocode was not successful for the following reason: " + status);
				}
			});
		}
	}

	// creates and shows the map
	function showMap()
	{
		// center of the map (compute the mean value between the two locations)
		latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);

		// set map options
			// set zoom level
			// set center
			// map type
		var mapOptions =
		{
			zoom: 1,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.HYBRID
		};

		// create a new map object
			// set the div id where it will be shown
			// set the map options
		map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

		// show route between the points
		directionsService = new google.maps.DirectionsService();
		directionsDisplay = new google.maps.DirectionsRenderer(
		{
			suppressMarkers: true,
			suppressInfoWindows: true
		});
		directionsDisplay.setMap(map);
		var request = {
			origin:location1,
			destination:location2,
			travelMode: google.maps.DirectionsTravelMode.DRIVING
		};
		directionsService.route(request, function(response, status)
		{
			if (status == google.maps.DirectionsStatus.OK)
			{
				directionsDisplay.setDirections(response);
				distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
				distance += "<br/>The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
				document.getElementById("distance_road").innerHTML = distance;
			}
		});

		// show a line between the two points
		var line = new google.maps.Polyline({
			map: map,
			path: [location1, location2],
			strokeWeight: 7,
			strokeOpacity: 0.8,
			strokeColor: "#FFAA00"
		});

		// create the markers for the two locations
		var marker1 = new google.maps.Marker({
			map: map,
			position: location1,
			title: "First location"
		});
		var marker2 = new google.maps.Marker({
			map: map,
			position: location2,
			title: "Second location"
		});

		// create the text to be shown in the infowindows
		var text1 = '<div id="content">'+
				'<h1 id="firstHeading">First location</h1>'+
				'<div id="bodyContent">'+
				'<p>Coordinates: '+location1+'</p>'+
				'<p>Address: '+address1+'</p>'+
				'</div>'+
				'</div>';

		var text2 = '<div id="content">'+
			'<h1 id="firstHeading">Second location</h1>'+
			'<div id="bodyContent">'+
			'<p>Coordinates: '+location2+'</p>'+
			'<p>Address: '+address2+'</p>'+
			'</div>'+
			'</div>';

		// create info boxes for the two markers
		var infowindow1 = new google.maps.InfoWindow({
			content: text1
		});
		var infowindow2 = new google.maps.InfoWindow({
			content: text2
		});

		// add action events so the info windows will be shown when the marker is clicked
		google.maps.event.addListener(marker1, 'click', function() {
			infowindow1.open(map,marker1);
		});
		google.maps.event.addListener(marker2, 'click', function() {
			infowindow2.open(map,marker1);
		});

		// compute distance between the two points
		var R = 6371;
		var dLat = toRad(location2.lat()-location1.lat());
		var dLon = toRad(location2.lng()-location1.lng());

		var dLat1 = toRad(location1.lat());
		var dLat2 = toRad(location2.lat());

		var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
				Math.cos(dLat1) * Math.cos(dLat1) *
				Math.sin(dLon/2) * Math.sin(dLon/2);
		var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
		var d = R * c;

		document.getElementById("distance_direct").innerHTML = "<br/>The distance between the two points (in a straight line) is: "+d;
	}

	function toRad(deg)
	{
		return deg * Math.PI/180;
	}
</script>

</head>

<body bgcolor="<a>#eeeeee</a>">
	<div id="<a>form</a>" style="<a>width:100%; height:20%</a>">
		<table align="<a>center</a>" valign="<a>center</a>">
			<tr>
				<td colspan="<a>7</a>" align="<a>center</a>"><b>Find the distance between two locations</b></td>
			</tr>
			<tr>
				<td colspan="<a>7</a>">&nbsp;</td>
			</tr>
			<tr>
				<td>First address:</td>
				<td>&nbsp;</td>
				<td><input type="<a>text</a>" name="<a>address1</a>" id="<a>address1</a>" size="<a>50</a>"/></td>
				<td>&nbsp;</td>
				<td>Second address:</td>
				<td>&nbsp;</td>
				<td><input type="<a>text</a>" name="<a>address2</a>" id="<a>address2</a>" size="<a>50</a>"/></td>
			</tr>
			<tr>
				<td colspan="<a>7</a>">&nbsp;</td>
			</tr>
			<tr>
				<td colspan="<a>7</a>" align="<a>center</a>"><input type="<a>button</a>" value="<a>Show</a>" onclick="<a>initialize();</a>"/></td>
			</tr>
		</table>
	</div>
	<center><div style="<a>width:100%; height:10%</a>" id="<a>distance_direct</a>"></div></center>
	<center><div style="<a>width:100%; height:10%</a>" id="<a>distance_road</a>"></div></center>

	<center><div id="<a>map_canvas</a>" style="<a>width:70%; height:54%</a>"></div></center>
</body>
</html>
 
4 Comments

Posted by on April 19, 2012 in Geo Programming, JavaScript

 

Tags: , ,