Google Maps marker, waarde doorgeven aan PHP.

  • Onderwerp starter Onderwerp starter JohnF
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.

JohnF

Nieuwe gebruiker
Lid geworden
12 mrt 2009
Berichten
4
Dag allemaal,

Ik ben helemaal niet thuis in javascript en ik hoop dat iemand mij kan helpen, het gaat om het volgende;
Op mijn website maak ik gebruik van Google Maps waarbij als je op een marker klikt er informatie verschijnt over de marker.

Voorbeeld:
Marker.jpg


Ik wil graag dat de tekst "Muteer" een hyperlink wordt naar een PHP pagina met een mutatieformulier.
Naar deze pagina moet de waarde van het getal helemaal bovenaan, in dit geval 8118, wat in de variabele "Id" staat als hidden field aan het mutatieformulier worden doorgegeven.
Kan iemand mij helpen hoe dit moet?

Bedankt vast.
Groeten,
JohnF
 
HTML:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example</title>
<!-- @refence http://code.google.com/intl/nl-NL/apis/maps/documentation/v3/examples/ 
    //old code from google => http://www.google.com/apis/maps/signup.html
    //http://www.googlegeodevelopers.blogspot.com/2009/05/announcing-google-maps-api-v3.html
    
    
    
       function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(35.681382, 139.766084), 1);
        
        var opts = { text : "Hello! I'm a PopupMarker."};
        
        var marker = new PopupMarker(new GLatLng(35.681382, 139.766084), opts);
        map.addOverlay(marker);
      }
    }

-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
  var geocoder;
  var myCars=new Array();
  var Mgoogle = google.maps;
  var map;
  var infowindow = new Mgoogle.InfoWindow({content:'<div id="content"><h1>test</h1>testdoc</div>'});
  function initialize(){
  	var Gmapid = document.getElementById("map");
  	geocoder = new Mgoogle.Geocoder();
  	//geocoder = new GClientGeocoder();
    var myLatlng = new Mgoogle.LatLng(-25.363882,131.044922);
    var myOptions = {zoom:8,center:myLatlng,mapTypeId: Mgoogle.MapTypeId.ROADMAP}
    map = new Mgoogle.Map(Gmapid, myOptions);
    setadresmarker("gent","BE","tzoe ier moeten zijn ");
    if (GBrowserIsCompatible()){
            map = new GMap2(Gmapid, {draggableCursor:"crosshair"});
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.addControl(new GScaleControl());
            
	    	for(var i=0;(i<Items.length&&typeof(Items[i])!="undefined");i++){
	    		setadresmarker2(Items[i][0],Items[i][1],Items[i][2]);
	    	}
	    	//setmousewheel('map');
     }
   }
   function setadresmarker(address,country,text){
		if (geocoder){
      		geocoder.geocode( { 'address': address}, 
			  function(results, status) {
        		if (status == Mgoogle.GeocoderStatus.OK) {
        			map.setCenter(results[0].geometry.location);
          			var marker = getnewmarker();
        		}
  			  });
    	}

	}
	function setadresmarker2(adres,country,text){
    	if (geocoder){
            geocoder.getLatLng(adres+" "+country,
                function(point){//als het adres niet gevonden is
                    if (point){
                        map.setCenter(point,18,G_HYBRID_MAP);
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        marker.openInfoWindowHtml(text);
                    }
                }
            );
        }
    } 
    function getnewmarker(){
    	return new Mgoogle.Marker({map: map, position: results[0].geometry.location});
    }   
    function zoom(oEvent, s){
        if(s == -120){map.zoomOut();}
		if(s == 120){map.zoomIn();} 
	}
    function setmousewheel(id){
        var d = document.getElementById(id);
        try {
            if (document.body.addEventListener){
                d.addEventListener('DOMMouseScroll', function(oEvent) {zoom(oEvent, oEvent.detail * -40); }, false);
            }else{
                d.onmousewheel = function() { zoom(event, event.wheelDelta); return false; }
            }
        }catch (ex) {
        	
        }
    }
    var marker = new Mgoogle.Marker({position: myLatlng,map: map,title: 'test'});
    Mgoogle.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});
 </script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
      <div id="map" style="width: 100%; height: 400px">
    </div>


</body>
</html>
 
Ik ben waarschijnlijk niet duidelijk genoeg geweest in mijn vraagstelling.
Bij Google staan vele voorbeelden hoe je gebruik kan maken van Maps en markers maar ik maak gebruik van een ander voorbeeld.
De opmaak van de informatie ballon wordt in een javascript variabele gestopt.
[JS] var html = id + "<br/> <b>" + plaats + "</b> <br/>" + oms + "</br> <br/> Muteer";[/JS]
en op deze manier aangeroepen:
[JS] GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html);});[/JS]
In de variabele "html" moet dus op de tekst "Markeer" de hyperlink komen zoals ik beschreef.

Wie kan mij hierbij helpen?
Vr. groet,
JohnF
 
Dit is V3 van google hou u dan ook niet bezig met V2 versie2 onder de knie te krijgen
Code:
    function setadresmarker2(adres,country,text){
        if (geocoder){
            geocoder.getLatLng(adres+" "+country,
                function(point){//als het adres niet gevonden is
                    if (point){
                        map.setCenter(point,18,G_HYBRID_MAP);
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        marker.openInfoWindowHtml(text);
                    }
                }
            );
        }
    }
bij tekst(text) kan je ook je htmltags kwijt.
maar merk op dat je bijna de volledige code nodig hebt.
en let ook op de constante G_HYBRID_MAP die je moet aanpassen bij een ander vieuw
 
Bedankt dat je mij wees op een nieuwe versie, ik was hiervan niet op de hoogte en ga alles omzetten naar V3.

Ook in versie 3 die ik nu gebruik wordt de opmaak van de info ballon in een javascript variabele gestopt, identiek aan wat ik in mijn eerdere reactie omschreef.
Kijk maar op http://code.google.com/intl/nl/apis/maps/articles/phpsqlajax_v3.html , bijna onderaan staat het kopje "Putting It All Together" staat de volledige HTML code van de weer te geven pagina waarin de informatie van de infoballon in een javascript variabele wordt gestopt.
Mijn vraag blijft dus nog steeds, hoe moet dat.

Met vriendelijke groet,
JohnF
 
Opgelost

Het probleem is opgelost.
Ik heb het als volgt gedaan:
[JS]var html ="<b>"+plaats+"</b>" + "<br/>"+oms + "<br/><br/>" + "<a href='http://naam van de site.nl/formulier.php?_N="+id+">" + "Geef wijziging door</a>" ;[/JS]

Groeten,
JohnF
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan