Publicado em 22 de mai.

Api google maps

Boa tarde galera, tenho esse mapa em javascript e a api do google maps está funcionando beleza, eu sou queria saber se algum ja colocou titulo aos pontos que são marcados no mapa, como eu faria para colocar?

<!DOCTYPE html>

<html>
<head>
<title>Cinturão Digital</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {

	var mapCenter = new google.maps.LatLng(-7.231750, -39.322842); //Google map Coordinates
	var map;
	var tecnico_20m = 'Está no local em 20 Minutos: ';
	var tecnico_2h = 'Levar o Gerador em 2 Horas: ';
	var infra = 'Infraestrutura: ';
	var rompimento = 'Rompimento de Fíbra: '; //variaveis que eu definir para evitar problemas de organização

	map_initialize(); // initialize google map

	//############### Google Map Initialize ##############
	function map_initialize()
	{
 var googleMapOptions =
 {
 center: mapCenter, // map center
 zoom: 8, //zoom level, 0 = earth view to higher value
 zoomControlOptions: {
 style: google.maps.ZoomControlStyle.SMALL //zoom control size
 },
 scaleControl: true, // enable scale control
 mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
 };

 map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);

 //Load Markers from the XML File, Check (map_process.php)
 $.get("map_process.php", function (data) {
 $(data).find("marker").each(function () {
 var name = $(this).attr('name');
 var type = $(this).attr('type');
 var tecnico_secundario= '<p>'+ '<b>' + tecnico_2h + '</b>' +$(this).attr('tecnico_secundario')+'</p>';
 var tecnico_primario = '<p>'+ '<b>'+tecnico_20m + '</b>' + $(this).attr('tecnico_primario') +'</p>';
 var empresa = '<p>' + '<b>' + infra + '</b>' + $(this).attr('empresa'); + '</p>';
 var address = '<p>'+ '<b>' + rompimento + '</b>' + $(this).attr('address') +'</p>';
 var point = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lng')));
 create_marker(point, name, address, tecnico_primario,tecnico_secundario, empresa, false, false, false, "marcador.png");
 });
 });

 //Right Click to Drop a New Marker
 google.maps.event.addListener(map, 'rightclick', function(event) {
 //Edit form to be displayed with new marker
 var EditForm = '<p><div class="marker-edit">'+
 '<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+
 '<label for="pName"><span>Nome do CPD :</span><input type="text" name="pName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+
 '<label for="pType"><span>Tipo :</span> <select name="pType" class="save-type"><option value="Auto">Auto</option></select></label>'+
 '<label for="pTecnico_primario"><span>Tecnico :</span> <select name="pTecnico_primario" class="save-tecnico_primario"><option value="Auto"></option></select></label>'+
 '<label for="pTecnico_secundario"><span>2º Técnico :</span> <select name="pTecnico_secundario" class="save-tecnico_secundario"><option value="Auto">Auto</option></select></label>'+
 '<label for="pEmpresa"><span>Empresa:</span> <select name="pEmpresa" class="save-empresa"><option value="Auto">Auto</option></select></label>'+
 '<label for="pDesc"><span>Contatos :</span><textarea name="pDesc" class="save-desc" placeholder=Observações maxlength="150"></textarea></label>'+

 '</form>'+
 '</div></p><button name="save-marker" class="save-marker">Salvar Ponto</button>';

 //Drop a new Marker with our Edit Form
 create_marker(event.latLng, 'Novo Ponto', EditForm, true, true, true, "marcador.png");
 });

	}

	//############### Create Marker Function ##############
	function create_marker(MapPos, MapTitle, MapDesc, MapTecnico_primario, MapTecnico_secundario, MapEmpresa, InfoOpenDefault, DragAble, Removable, iconPath)
	{

 //new marker
 var marker = new google.maps.Marker({
 position: MapPos,
 map: map,
 draggable:DragAble,
 animation: google.maps.Animation.DROP,
 title:"Ponto de Marcação",
 icon: iconPath
 });

 //Content structure of info Window for the Markers
 var contentString = $('<div class="marker-info-win">'+
 '<div class="marker-inner-win"><span class="info-content">'+
 '<b><h1 class="marker-heading">'+MapTitle+'</h1></b>'+
 MapDesc+MapTecnico_primario+MapTecnico_secundario+ MapEmpresa+
 '</span><button name="remove-marker" class="remove-marker" title="Remove Marker"></button>'+ // caso precise habilitar para remover !
 '</div></div>');

 //Create an infoWindow
 var infowindow = new google.maps.InfoWindow();
 //set the content of infoWindow
 infowindow.setContent(contentString[0]);

 //Find remove button in infoWindow
 var removeBtn = contentString.find('button.remove-marker')[0];
 var saveBtn = contentString.find('button.save-marker')[0];

 //add click listner to remove marker button
 google.maps.event.addDomListener(removeBtn, "click", function(event) {
 remove_marker(marker);
 });

 if(typeof saveBtn !== 'undefined') //continue only when save button is present
 {
 //add click listner to save marker button
 google.maps.event.addDomListener(saveBtn, "click", function(event) {
 var mReplace = contentString.find('span.info-content'); //html to be replaced after success
 var mName = contentString.find('input.save-name')[0].value; //name input field value
 var mDesc = contentString.find('textarea.save-desc')[0].value; //description input field value
 var mType = contentString.find('select.save-type')[0].value; //type of marker
 var mTecnico_primario = contentString.find('select.save-tecnico')[0].value; //salvando o tecnico
 var mTecnico_secundario = contentString.find('select.save-tecnico_secundario')[0].value; //type of marker
 var mEmpresa = contentString.find('select.save-empresa')[0].value; //type of marker

 if(mName =='' || mDesc =='')
 {
 alert("Por favor digita a descrição");
 }else{
 save_marker(marker, mName, mDesc, mType, mTecnico_primario, mTecnico_secundario, mEmpresa, mReplace); //call save marker function
 }
 });
 }

 //add click listner to save marker button
 google.maps.event.addListener(marker, 'click', function() {
 infowindow.open(map,marker); // click on marker opens info window
 });

 if(InfoOpenDefault) //whether info window should be open by default
 {
 infowindow.open(map,marker);
 }
	}

	//############### Remove Marker Function ##############
	function remove_marker(Marker)
	{

 /* determine whether marker is draggable
 new markers are draggable and saved markers are fixed */
 if(Marker.getDraggable())
 {
 Marker.setMap(null); //just remove new marker
 }
 else
 {
 //Remove saved marker from DB and map using jQuery Ajax
 var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
 var myData = {del : 'true', latlang : mLatLang}; //post variables
 $.ajax({
 type: "POST",
 url: "map_process.php",
 data: myData,
 success:function(data){
 Marker.setMap(null);
 alert(data);
 },
 error:function (xhr, ajaxOptions, thrownError){
 alert(thrownError); //throw any errors
 }
 });
 }

	}

	//############### Save Marker Function ##############
	function save_marker(Marker, mName, mAddress, mType, replaceWin)
	{
 //Save new marker using jQuery Ajax
 var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
 var myData = {name : mName, address : mAddress, latlang : mLatLang, type : mType,tecnico : mTecnico_primario, tecnico_secundario: mTecnico_secundario,empresa: mEmpresa }; //post variables
 console.log(replaceWin);
 $.ajax({
 type: "POST",
 url: "map_process.php",
 data: myData,
 success:function(data){
 replaceWin.html(data); //replace info window with new html
 Marker.setDraggable(false); //set marker to fixed
 Marker.setIcon('marcador.png'); //replace icon
 },
 error:function (xhr, ajaxOptions, thrownError){
 alert(thrownError); //throw any errors
 }
 });
	}

});
</script>

<style type="text/css">

h1.heading{padding:0px;margin: 10px 10px 10px 0px;text-align:center;font: 25px Georgia, "Times New Roman", Times, serif;}

/ width and height of google map /
#google_map {width: 100%; height: 1000px;margin-top:0px;margin-left:auto;margin-right:auto;}

/ Marker Edit form /
.marker-edit label{display:block;margin-bottom: 5px;}
.marker-edit label span {width: 200px;float: left;}
.marker-edit label input, .marker-edit label select{height: 40px;}
.marker-edit label textarea{height: 80px;}
.marker-edit label input, .marker-edit label select, .marker-edit label textarea {width: 80%;margin:0px;padding-left: 5px;border: 1px solid #DDD;border-radius: 3px;}

/ Marker Info Window /
h1.marker-heading{color: #585858;margin: 0px;padding: 0px;font: 25px "Trebuchet MS", Arial;border-bottom: 1px dotted #D8D8D8;}
div.marker-info-win {max-width: 500px;margin-right: 40px;}
div.marker-info-win p{padding: 0px;margin: 10px 0px 20px 0;}
div.marker-inner-win{padding: 5px;}

button.save-marker, button.remove-marker{border: none;background: rgba(0, 0, 0, 0);color: #00F;padding: 0px;text-decoration: underline;margin-right: 10px;cursor: pointer;
}
</style>
</head>
<body>
<div id="google_map"></div>
</body>
</html>

Discussão (0)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...