Api google maps

matusaires3 · Maio 22, 2015

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>

Entrar

Arquivado

Api google maps

Recommended Posts

matusaires3 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante