10/10/2014

Criar Google Maps com gmaps.js

CriarGoogleMapscomgmaps.js

ComousarGMaps.js
GMapsumpluginjavascriptquefazcomquesejamuitofcildeusar oGoogle
Maps paraexibirummapaparaoseuusurio.Existemvriasopesquetornam
maisfcilparaadicionarponteiroscomomapa,direes,caixasdeinformaoe
muitomais.
Estepluginenorme,hummontedeopesparapassar,nestetutorialeuno
voupassarportodoseles.Eusvoupassarasopesqueseroasqueesto
maisprovvelvaiusar.
Sevocquiservertodasasopesparaestepluginvocpodevisualizara
documentaonoGithubRepository.

Documentao

http://www.paulund.co.uk/create-google-maps-with-gmaps-js

1/13

10/10/2014

Criar Google Maps com gmaps.js

ParacomearausarGMap.jsvocprecisabaixaraversomaisrecentedo
Github.

BaixeGMap

UmavezquevoctemaltimaagoraincluiroarquivoJavascriptejQuerynasua
pginadentrodesuamarcadecabea.
<! DOCTYPE html>
< html >
< head >

< script src = " http://ajax.googleapis.com/ajax/libs/jquery/1.

< script type = " text/javascript " src = " http://maps.google

< script src = " gmaps.js " > </ script >
</ head >
< body >
</ corpo >
</ html >

Aoadicionarosgmap.jsparaapginaqueircriarumobjetoJavascriptchamado
GMapsquevocirusarparacriarseusmapas.
$ ( documento ) . prontos ( funo ( ) {
var mapa = novas GMaps ( {
el : '#Map' ,
lat : 51,5073346 ,
lng : - 0,1276831 ,
});
});
http://www.paulund.co.uk/create-google-maps-with-gmaps-js

2/13

10/10/2014

Criar Google Maps com gmaps.js

MapaBsico
Nesteexemplo,elesvaiserummapabsicodentrodeumadiv.Estaa
maneiramaisfcildeusarGMaps.jstudoquevocprecisaumpoucode
Javascripteumdivnapgina.
Primeiro,adicioneoGMaparquivoJavaScriptparaapginacomoacimaecriar
umdivHTML.
< div id = " basic_map " > </ div >
AgorapodemoscriaroJavascriptparaadicionarummapabsicoparaapgina,
paraestemapa,vamosdefinirocentrodomapaparamostrarLondres.
Podemosatribuirdiferentesopesparaincluircontrolesdezoom,vistaparaa
rua,configuraesdesobreposioetc
/ **
* Mapa Bsico
*/
$ ( document ) . ready ( function ( ) {
var map = new GMaps ( {
el : '#basic_map' ,
lat : 51.5073346 ,
lng : - 0.1276831 ,
zoom : 12 ,
zoomControl : true ,
zoomControlOpt : {
style : 'SMALL' ,
position : 'TOP_LEFT'
},
panControl : false ,
});
});
http://www.paulund.co.uk/create-google-maps-with-gmaps-js

3/13

10/10/2014

Criar Google Maps com gmaps.js

MapaBsicodedemonstrao

Eventosdomousesobreomapa
Tendooseumapaderespostainteraodousuriopodeserrealmentetilna
maioriadasaplicaes,porissoqueoGMap.jsincluiudiferenteseventosde
mouseparaoseumapa.Nesteexemplovamosusaroeventocliqueearrasteo
eventoparaexibirumalertanatela.
MaisumavezoHTMLmuitosimples.
< div id = " mouse_event_map " > </ div >
Paraissopodemosusaromesmomapaacima,mastemopesdiferentespara
cliquesedragendeventos.Podemosentoatribuirumafunoaserexecutada
sobreosdiferenteseventos.
/ **
* Eventos do mouse no Google Maps
*/
$ ( document ) . ready ( function ( ) {
var map = new GMaps ( {
el : '#mouse_event_map' ,
lat : 51.5073346 ,
lng : - 0.1276831 ,
http://www.paulund.co.uk/create-google-maps-with-gmaps-js

4/13

10/10/2014

Criar Google Maps com gmaps.js

zoom : 12 ,
zoomControl : true ,
zoomControlOpt : {
style : 'SMALL' ,
position : 'TOP_LEFT'
},
panControl : false ,
click : function ( e ) {
alert ( 'Click evento " ) ;
},
dragend : funo ( e ) {
alert ( 'Drag Evento' ) ;
}
});
});

EventosdomouseDemonstrao

CriarMapaPointerComInformaes
Oprximorecursoquevamosolharacapacidadedeadicionarrefernciaspara
oseumarcadoremlongitudeelatitudeexata.
ComGMapfazessafuncionalidademuitosimples,voctambmpodecriaruma
caixadeinformaesHTMLparaaparecerquandovocclicarnosmarcadores.
http://www.paulund.co.uk/create-google-maps-with-gmaps-js

5/13

10/10/2014

Criar Google Maps com gmaps.js

OHTMLnovamenteapenasumadivcomumID.
< div id = " pointers_map " > </ div >
ParaesteexemploeuestouusandoalgumasdasmaioresatracesdeLondres
comoponteirosparaomapa.
AdicionandoumponteirotofcilquantousaromtodoaddMarker().
mapa . addMarker ( {
lat : 51,5007396 ,
lng : - 0,1245299 ,
ttulo : 'Big Ben' ,
InfoWindow : {

contedo : '<p> Big Ben o apelido para o grande sin

}
});

UsamosestemtodonoobjetoqueretornadoapartirdaclasseGMap.
/ **
* Mapa Ponteiros
*/
$ ( document ) . ready ( function ( ) {
var map = new GMaps ( {
el : '#pointers_map' ,
lat : 51.5073346 ,
lng : - 0.1276831 ,
zoom : 13 ,
zoomControl : true ,
zoomControlOpt : {
style : 'SMALL' ,
position : 'TOP_LEFT'
http://www.paulund.co.uk/create-google-maps-with-gmaps-js

6/13

10/10/2014

Criar Google Maps com gmaps.js

},
panControl : false ,
});
mapa . addMarker ( {
lat : 51,503324 ,
lng : - 0,119543 ,
ttulo : 'London Eye' ,
InfoWindow : {

contedo : '<p> A London Eye uma roda gigante situado

});
mapa . addMarker ( {
lat : 51,5007396 ,
lng : - 0,1245299 ,
ttulo : 'Big Ben' ,
InfoWindow : {

contedo : '<p> Big Ben o apelido para o grande sino

}
});
mapa . addMarker ( {
lat : 51,518856 ,
lng : - 0,1263371 ,
ttulo : "British Museum" ,
InfoWindow : {

contedo : ". <p> O Museu Britnico um museu em Londr

}
});
mapa . addMarker ( {
lat : 51,5085822 ,
http://www.paulund.co.uk/create-google-maps-with-gmaps-js

7/13

10/10/2014

Criar Google Maps com gmaps.js

lng : - 0,1283169 ,
ttulo : 'National Gallery' ,
InfoWindow : {

contedo : . '<p> A Galeria Nacional um museu de arte

}
});
mapa . addMarker ( {
lat : 51,5228316 ,
lng : - 0,1553503 ,
ttulo : 'Madame Tussauds' ,
InfoWindow : {

contedo : '<p> Madame Tussauds um museu de cera em L

}
});
mapa . addMarker ( {
lat : 51,5089465 ,
lng : - 0,0764269 ,
ttulo : "Tower Of London ' ,
InfoWindow : {

contedo : '<p> Sua Majestade \' s Palcio Real e Forta

}
});

IstoircriarummapadoGooglequeseparececomisso.

http://www.paulund.co.uk/create-google-maps-with-gmaps-js

8/13

10/10/2014

Criar Google Maps com gmaps.js

MapaPonteirosDemonstrao

UsandoGeoLocation
Geolocationpermitirqueoseunavegadorparalocalizarasualongitudee
latitudeexata ,issomuitotilparamapasem dispositivosmveis .Seoseu
perguntandopordireesapartirdeumdispositivomvelquevocmaisdo
queprovavelmentevaipedirindicaesdesualocalizaoatual.
ComGMap.jspodemosfacilmenteusaroutrapropriedadenoobjetoparaobtera
sualocalizaoecolocarummarcadoremsualocalizaoexacta.
Primeiro,crieseumapadiv.
< div id = " geolocation_map " > </ div >
UseoJavascriptabaixoparacriarummarcadoremsualocalizaoatual.Este
utilizaummtodonoGMapsobjetochamadogeograficamente().
/ **
* Geolocation
*/
var map ;
$ ( document ) . ready ( function ( ) {
var map = new GMaps ( {
el : '#geolocation_map' ,
lat : 51.5073346 ,
lng : - 0.1276831 ,
});
GMaps . geolocate ( {
success : function ( position ) {
http://www.paulund.co.uk/create-google-maps-with-gmaps-js

9/13

10/10/2014

Criar Google Maps com gmaps.js

map . setCenter ( position . coords . latitude , position

mapa . addMarker ( {
lat : posio . coords . latitude ,
lng : posio . coords . longitude ,
ttulo : 'Voc est aqui'. ,
InfoWindow : {
contedo : '! <p> Voc est aqui </ p>'
}
});
},
erro : funo ( erro ) {
alert ( 'Geolocation falharam:' + erro . mensagem ) ;
},
not_supported : funo ( ) {
alert ( "Seu navegador no suporta geolocalizao" ) ;
}
});
});

GeolocationMapaDemonstrao

Directions
http://www.paulund.co.uk/create-google-maps-with-gmaps-js

10/13

10/10/2014

Criar Google Maps com gmaps.js

NoexemploanteriordeGeolocalizaofaleisobrecomoousode
Geolocalizaorealmentetilparaaspessoasusaremcomasdireespara
quevocpossareceberasorientaesdesuaposioatual.
UsandoGMaps.jsrecebendooGeolocationedesenhandoarotadireoso
ambosmuitofcil.Primeirousamosomtodogeograficamenteparaobtera
posioatualdousurio,emseguida,usamosomtododrawRoutepara
desenhararotadasuaposioactualataodestino.
/ **
* Como chegar em Londres
*/
var map ;
$ ( document ) . ready ( function ( ) {
var map = new GMaps ( {
el : '#directions_map' ,
lat : 51.5073346 ,
lng : - 0.1276831 ,
zoom : 8
});
GMaps . geolocate ( {
success : function ( position ) {

map . setCenter ( position . coords . latitude , position

map . drawRoute ( {
origin : [ position . coords . latitude , position
destination : [ 51.5073346 , - 0.1276831 ] ,
travelMode : 'driving' ,
strokeColor : '#000' ,
strokeOpacity : 0.6 ,
strokeWeight : 6
});
},
http://www.paulund.co.uk/create-google-maps-with-gmaps-js

11/13

10/10/2014

Criar Google Maps com gmaps.js

error : function ( error ) {

alert ( 'Geolocation falharam: ' + erro . mensagem ) ;
},
not_supported : funo ( ) {
alert ( "Seu navegador no suporta geolocalizao" ) ;
}
});
});

ComochegarMapadedemonstrao

StaticMaps
svezes,quandovocexibirummapaemumapginaquevocnoquerqueo
usuriotenhaqualquerinteraocomele,vocapenasdesejaexibiruma
imagemdeumlocal.
ComGMaps.jsvocpodefazeropluginapresentarumaimagemdequalquer
local.
Vocpodedefinirotamanhodaimagemquevocdesejausaredalocalizao,
apenasforneclocomumespaoreservadodiveisso.
/ **
* Static Maps
*/
http://www.paulund.co.uk/create-google-maps-with-gmaps-js

12/13

10/10/2014

Criar Google Maps com gmaps.js

$ ( document ) . ready ( function ( ) {

var url = GMaps . staticMapURL ( {
size : [ 610 , 350 ] ,
lat : - 33.858290691930996 ,
lng : 151.21517658233643
});

$ ( '<img/>' ) . attr ( 'src' , url ) . appendTo ( '#static_ma

});

StaticMapDemonstrao

Concluso
Comovocpodeverapartirdesteexemplodecdigorealmentefcildeusar
GMapemsuaspginas.Estessoapenasalgunsexemplosdecomousaro
pluginGMap.js,exemplosdecomousartodasasopesdopluginpodeser
encontradonoprojetoGithub.

ExemplosGMap

Parabaixaraversomaisrecentedogmap.jsvocdeveirparaorepositrio
Github.

BaixeGMap

http://www.paulund.co.uk/create-google-maps-with-gmaps-js

13/13