<!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>
Tag Archives: google map
Google Map InfoBox
jQueryMobile with Google Map
jQueryMobile with Google Map
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>
Reverse Geocoding with Google Map API
Reverse Geocoding
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");
}
});
Google Map Street View
Google Map Street View
<!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>
codezone4 