Reflect Me !: Google maps

Change : Satellite and Street View

Drop Down to Change Between satellite and Street view using gmap3 jQuery Plugin:

Gmaps3 Plugin Provides us mapTypeControlOptions to change between the satellite view and street view in google maps which is demonstrated in this post , initially when the map is loaded the maps loads in satellite which is done is using static mapTypeId : 'google.maps.MapTypeId.SATELLITE' and then using map type control options drop down the view can be changed :

mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},

<html>

<head>

<style>

.gmap3 {

margin: 20px auto;

border: 1px dashed #C0C0C0;

width: 1000px;

height: 500px;

}

</style>

$(function(){

$('#test1').gmap3({

action: 'init',

options:{

center:[22.49156846196823, 89.75802349999992],

zoom:2,

mapTypeId: google.maps.MapTypeId.SATELLITE,

mapTypeControl: true,

mapTypeControlOptions: {

style: google.maps.MapTypeControlStyle.DROPDOWN_MENU

navigationControl: true,

scrollwheel: true,

streetViewControl: true

}

});

</script>

</head>

<body>

</body>

</html>

Add Info Window in Google Maps

Adding an info window forms a integral part in the places where some note has to be placed , so inorder to use that inside Google maps this post will aid you !!!

<html>

<head>

<style>

.gmap3{margin: 20px auto;border: 1px dashed #C0C0C0;width: 500px;height: 250px;}

</style>

$(function(){

$('#test1').gmap3({

action: 'addInfoWindow',

address: "Coimbatore,India",

map:{

center: true,

zoom: 14

infowindow:{

options:{

size: new google.maps.Size(50,50),

content: 'Hello World !'

events:{

closeclick: function(infowindow){

alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());

}

apply:[

{action:'setContent', args:['Here is a new content !']}

]

}

{action: 'setOptions', args:[{scrollwheel:true}]}

);

});

</script>

</head>

<body>

</body>

</html>

Use Forms in Maps

Fill in an address, a marker will be added and the map will be centered on it :

Show places on the button click event, that is achieved using jQuery $('#test-ok').click(function(){} once its done the value in the text box is passed to the gmaps3 plugin and action 'getlatlng' is done , In the call back method of that action marker is added to the respective address typed its actually center it which makes the map look Cool :) :)

<html>

<head>

<style>

body {text-align: center;}

#ctrl {width: 500px;margin: 0 auto;}

.gmap3 {margin: 20px auto;border: 1px dashed #C0C0C0;width: 500px;

height: 250px;}

</style>

$(function(){

$("#test").gmap3();

$('#test-ok').click(function(){

var addr = $('#test-address').val();

if ( !addr || !addr.length ) return;

$("#test").gmap3({

action: 'getlatlng',

address: addr,

callback: function(results){

if ( !results ) return;

$(this).gmap3({

action:'addMarker',

latLng:results[0].geometry.location,

map:{

center: true

}

});

}

});

$('#test-address').keypress(function(e){

if (e.keyCode == 13){

$('#test-ok').click();

}

});

</script>

</head>

<body>

<div id="ctrl">Address : <input type="text" id="test-address" size="60">

</div>

Fill in an address, a marker will be added and the map will be centered on it

</body>

</html>

Fix Panel to take boundaries

Use Fix Panel to Take Boundaries in Google Maps :

This post is intended in using fix panel to determine the boundaries from Google maps !!!

<html>

<head>

<style>

.gmap3{margin: 20px auto;border: 1px dashed #C0C0C0;width: 500px;height: 250px;}

#box{border: 1px solid #FF0000;background-color: #AFAFAF;width: 160px;height: 64;font-size: 11px;}

#box .line{border-bottom: 1px solid #FF0000;overflow: auto;clear: both;height: 16px;}

#box #lng-west{border-bottom: 0px;}

#box .name{width: 30px;border-right: 1px solid #FF0000;float: left;}

#box .value{float: left;}

</style>

$(function(){

var box = '<div id="box">' +

'<div id="lat-north" class="line"><div class="name">North</div><div class="value"></div></div>' +

'<div id="lng-east" class="line"><div class="name">East</div><div class="value"></div></div>' +

'<div id="lat-south" class="line"><div class="name">South</div><div class="value"></div></div>' +

'<div id="lng-west" class="line"><div class="name">West</div><div class="value"></div></div>' +

'</div>';

$('#test1').gmap3(

{action: 'addFixPanel',options:{content: box,middle: true},

events:{

bounds_changed: function(map){

var bounds = map.getBounds();

var ne = bounds.getNorthEast();

var sw = bounds.getSouthWest();

$("#lat-north .value").html(ne.lat());

$("#lng-east .value").html(ne.lng());

$("#lat-south .value").html(sw.lat());

$("#lng-west .value").html(sw.lng());

}

});

</script>

</head>

<body>

</body>

</html>

Find Elevation Path

Find elevation Path using jQuery maps3 API and display as a Chart using Google Column Charts :

In My previous post i have explained how to find the elevation at a place ,
Now in this post i am gonna aid you in comparing the elevation between 2 points, which is marked in maps , you can now compare between the points and display it using the Google visualization charts component as column charts .

Component used :
1.gmaps3 jQuery plugin
2.Google Column Charts visualization Component.

Map is Invoked in Satellite view using the mapId google.maps.MapTypeId.SATELLITE

The data to the chart is build as mentioned :

var data = new google.visualization.DataTable();

data.addColumn('string', 'Sample');

data.addColumn('number', 'Elevation');

for (var i = 0; i < results.length; i++) {

data.addRow(['', results[i].elevation]);

}

chart.draw(data, {

width: 500,

height: 300,

legend: 'none',

titleY: 'Elevation (m)',

focusBorderColor: '#00ff00'

});

<html>

<head>

<style>

#container{overflow: auto;margin: 0 auto;width: 1200px;}

#test1{border: 1px dashed #C0C0C0;width: 500px;height: 400px;float: left;}

#chart{float: left;}

</style>

var chart;

var path = [

[36.012196, -112.100348],

[36.221866, -112.098975]

];

google.load("visualization", "1", {packages: ["columnchart"]});

$(function(){

chart = new google.visualization.ColumnChart(document.getElementById('chart'));

$('#test1').gmap3(

{action: 'init',center: [36.112196, -112.100348],zoom:10,mapTypeId: google.maps.MapTypeId.SATELLITE},

{action: 'addMarker',latLng: path[0]},{ action: 'addMarker',latLng: path[1]},

{action: 'getElevation',path: path,samples: 500,

callback: function (results) {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Sample');

data.addColumn('number', 'Elevation');

for (var i = 0; i < results.length; i++) {

data.addRow(['', results[i].elevation]);

}

chart.draw(data, {

width: 500,

height: 300,

legend: 'none',

titleY: 'Elevation (m)',

focusBorderColor: '#00ff00'

});

}

});

</script>

</head>

<body>

</div>

</body>

</html>

Reflect Me !

Tuesday, October 23, 2012

Change : Satellite and Street View

Add Info Window in Google Maps

Use Forms in Maps

Fix Panel to take boundaries

Find Elevation Path

Science News

Blog Archive