Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Google Maps iconen worden niet geladen

GroundZero - 30/09/2013 15:28

Lid

Beste,

ik wil enkele iconen laten zien op mijn maps. Hij laat echter één icoon zien en niet alle icoontjes. In de bron code staat echter wel alles correct.

Hebben jullie enig idee wat er fout kan zijn?
Een kopie van de broncode:

php code - Bekijk de code zonder highlighting - Klap code in

                <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script language="javascript">
function displayLocation(latitude,longitude)
{
	function initialize()
	{
		var myLatlng = new google.maps.LatLng(latitude, longitude);
		
		var mapOptions = {
		zoom: 13,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

		var myLatlng1 = new google.maps.LatLng(51.764377, 5.5193147);
		var image1 = 'images/ik-zelf.png';
		var Marker1 = new google.maps.Marker({
			position: myLatlng1,
			map: map,
			icon: image1,
			title: 'Janneke'
		});
		
		var myLatlng2 = new google.maps.LatLng(51.764376, 5.5193148);
		var image2 = 'images/ik-zelf.png';
		var Marker2 = new google.maps.Marker({
			position: myLatlng2,
			map: map,
			icon: image2,
			title: 'Liza'
		});
		
		var myLatlng3 = new google.maps.LatLng(51.764375, 5.5193149);
		var image3 = 'images/ik-zelf.png';
		var Marker3 = new google.maps.Marker({
			position: myLatlng3,
			map: map,
			icon: image3,
			title: 'Jasper'
		});
		
			}

google.maps.event.addDomListener(window, 'load', initialize);
};

displayLocation(51.764377, 5.5193148);
</script>
            
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script language="javascript">
function displayLocation(latitude,longitude)
{
	function initialize()
	{
		var myLatlng = new google.maps.LatLng(latitude, longitude);
 
		var mapOptions = {
		zoom: 13,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
 
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
		var myLatlng1 = new google.maps.LatLng(51.764377, 5.5193147);
		var image1 = 'images/ik-zelf.png';
		var Marker1 = new google.maps.Marker({
			position: myLatlng1,
			map: map,
			icon: image1,
			title: 'Janneke'
		});
 
		var myLatlng2 = new google.maps.LatLng(51.764376, 5.5193148);
		var image2 = 'images/ik-zelf.png';
		var Marker2 = new google.maps.Marker({
			position: myLatlng2,
			map: map,
			icon: image2,
			title: 'Liza'
		});
 
		var myLatlng3 = new google.maps.LatLng(51.764375, 5.5193149);
		var image3 = 'images/ik-zelf.png';
		var Marker3 = new google.maps.Marker({
			position: myLatlng3,
			map: map,
			icon: image3,
			title: 'Jasper'
		});
 
			}
 
google.maps.event.addDomListener(window, 'load', initialize);
};
 
displayLocation(51.764377, 5.5193148);
</script>
 

Mijn eigen PHP code:

php code - Bekijk de code zonder highlighting - Klap code in

<?php
$user = explode("|", $_COOKIE['mijnsite']);

$query = mysql_query('SELECT id, latitude, longitude FROM site_gebruikers
					  WHERE
					  email = "'.mysql_real_escape_string($user[0]).'" 
					  AND
					  logcode = "'.mysql_real_escape_string($user[1]).'"');
$fetch = mysql_fetch_assoc($query);

$lati = $fetch['latitude'];
$long = $fetch['longitude'];
	
$amount = 10;
	
$temp_lat	= explode(".", $fetch['latitude']);
$new_lat	= $temp_lat[1] - $amount;
$temp_lat	= $temp_lat[0].'.'.$new_lat;

$temp_lon	= explode(".", $fetch['longitude']);
$new_lon	= $temp_lon[1] - $amount;
$temp_lon	= $temp_lon[0].'.'.$new_lon;



$temp_lat_p	= explode(".", $fetch['latitude']);
$new_lat_p	= $temp_lat_p[1] + $amount;
$temp_lat_p	= $temp_lat_p[0].'.'.$new_lat_p;

$temp_lon_p	= explode(".", $fetch['longitude']);
$new_lon_p	= $temp_lon_p[1] + $amount;
$temp_lon_p	= $temp_lon_p[0].'.'.$new_lon_p;

$query = 'SELECT id, voornaam, latitude, longitude FROM site_gebruikers
		  WHERE
		  (latitude <= "'.$temp_lat_p.'"
		  AND
		  latitude >= "'.$temp_lat.'")
		  AND
		  (longitude <= "'.$temp_lon_p.'"
		  AND
		  longitude >= "'.$temp_lon.'")
		  AND
		  email != "'.mysql_real_escape_string($user[0]).'"';

$exe = mysql_query($query);
?>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script language="javascript">
function displayLocation(latitude,longitude)
{
	function initialize()
	{
		var myLatlng = new google.maps.LatLng(latitude, longitude);
		
		var mapOptions = {
		zoom: 13,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

		<?php
		$i = 1;
		
		while($fetch = mysql_fetch_assoc($exe))
		{
			$imgQuery = mysql_query('SELECT foto FROM site_fotos
									 WHERE
									 gebruikers_id = "'.mysql_real_escape_string($fetch['id']).'"
									 AND
									 profiel = 1');
			$imgFetch = mysql_fetch_assoc($imgQuery);
			
			echo 'var myLatlng'.$i.' = new google.maps.LatLng('.$fetch['latitude'].', '.$fetch['longitude'].');
		var image'.$i.' = \'images/ik-zelf.png\';
		var Marker'.$i.' = new google.maps.Marker({
			position: myLatlng'.$i.',
			map: map,
			icon: image'.$i.',
			title: \''.$fetch['voornaam'].'\'
		});
		
		';
			$i++;
		}
		?>
	}

google.maps.event.addDomListener(window, 'load', initialize);
};

displayLocation(<?=$lati?>, <?=$long?>);
</script>

<span id="map-canvas" style="width:100%; height:550px; float:left;"></span>

<?php
$user = explode("|", $_COOKIE['mijnsite']);
 
$query = mysql_query('SELECT id, latitude, longitude FROM site_gebruikers
					  WHERE
					  email = "'.mysql_real_escape_string($user[0]).'" 
					  AND
					  logcode = "'.mysql_real_escape_string($user[1]).'"');
$fetch = mysql_fetch_assoc($query);
 
$lati = $fetch['latitude'];
$long = $fetch['longitude'];
 
$amount = 10;
 
$temp_lat	= explode(".", $fetch['latitude']);
$new_lat	= $temp_lat[1] - $amount;
$temp_lat	= $temp_lat[0].'.'.$new_lat;
 
$temp_lon	= explode(".", $fetch['longitude']);
$new_lon	= $temp_lon[1] - $amount;
$temp_lon	= $temp_lon[0].'.'.$new_lon;
 
 
 
$temp_lat_p	= explode(".", $fetch['latitude']);
$new_lat_p	= $temp_lat_p[1] + $amount;
$temp_lat_p	= $temp_lat_p[0].'.'.$new_lat_p;
 
$temp_lon_p	= explode(".", $fetch['longitude']);
$new_lon_p	= $temp_lon_p[1] + $amount;
$temp_lon_p	= $temp_lon_p[0].'.'.$new_lon_p;
 
$query = 'SELECT id, voornaam, latitude, longitude FROM site_gebruikers
		  WHERE
		  (latitude <= "'.$temp_lat_p.'"
		  AND
		  latitude >= "'.$temp_lat.'")
		  AND
		  (longitude <= "'.$temp_lon_p.'"
		  AND
		  longitude >= "'.$temp_lon.'")
		  AND
		  email != "'.mysql_real_escape_string($user[0]).'"';
 
$exe = mysql_query($query);
?>
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script language="javascript">
function displayLocation(latitude,longitude)
{
	function initialize()
	{
		var myLatlng = new google.maps.LatLng(latitude, longitude);
 
		var mapOptions = {
		zoom: 13,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
 
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
		<?php
		$i = 1;
 
		while($fetch = mysql_fetch_assoc($exe))
		{
			$imgQuery = mysql_query('SELECT foto FROM site_fotos
									 WHERE
									 gebruikers_id = "'.mysql_real_escape_string($fetch['id']).'"
									 AND
									 profiel = 1');
			$imgFetch = mysql_fetch_assoc($imgQuery);
 
			echo 'var myLatlng'.$i.' = new google.maps.LatLng('.$fetch['latitude'].', '.$fetch['longitude'].');
		var image'.$i.' = \'images/ik-zelf.png\';
		var Marker'.$i.' = new google.maps.Marker({
			position: myLatlng'.$i.',
			map: map,
			icon: image'.$i.',
			title: \''.$fetch['voornaam'].'\'
		});
 
		';
			$i++;
		}
		?>
	}
 
google.maps.event.addDomListener(window, 'load', initialize);
};
 
displayLocation(<?=$lati?>, <?=$long?>);
</script>
 
<span id="map-canvas" style="width:100%; height:550px; float:left;"></span>

6 antwoorden

Gesponsorde links

marten - 30/09/2013 15:55
Beheerder		Wil je de uitkomst van je query eens dumpen en hier plaatsen?

Maarten - 30/09/2013 22:51
Erelid		Toont hij de icoontjes gewoon niet, of echt de volledige marker niet? Je bent zeker dat je genoeg uitgezoomd bent om alle markers te zien?

marten - 01/10/2013 07:58
Beheerder		Anders kan het misschien nog een escape verhaal zijn met de quotes zeg maar.

Wijnand - 01/10/2013 16:57
Moderator		Is er een voorbeeld online, zodat we mee kunnen kijken?

GroundZero - 07/10/2013 16:43 (laatste wijziging 07/10/2013 18:54)

Lid

Hoi, sorry voor de late reactie. Nee geen online voorbeeld helaas. Dit omdat de website nog niet online is. Ik zal mijn complete code plaatsen hier.

De query is ook correct, wanneer ik deze gewoon in een loop gooi, zie ik netjes allemaal resultaten te voorschijn komen, ook in de broncode staat alles netjes in de google maps code, alleen word het niet op de kaart weergegeven.

De query is dus correct dat kan ik met 100% zekerheid zeggen.

Mijn volledige code:

php code - Bekijk de code zonder highlighting - Klap code in

<?php
$user = explode("|", $_COOKIE['mijn-website-cookie']);

$query = mysql_query('SELECT id, latitude, longitude FROM site_gebruikers
					  WHERE
					  email = "'.mysql_real_escape_string($user[0]).'" 
					  AND
					  logcode = "'.mysql_real_escape_string($user[1]).'"');
$fetch = mysql_fetch_assoc($query);

$lati = $fetch['latitude'];
$long = $fetch['longitude'];
	
$amount = 10;
	
$temp_lat	= explode(".", $fetch['latitude']);
$new_lat	= $temp_lat[1] - $amount;
$temp_lat	= $temp_lat[0].'.'.$new_lat;

$temp_lon	= explode(".", $fetch['longitude']);
$new_lon	= $temp_lon[1] - $amount;
$temp_lon	= $temp_lon[0].'.'.$new_lon;



$temp_lat_p	= explode(".", $fetch['latitude']);
$new_lat_p	= $temp_lat_p[1] + $amount;
$temp_lat_p	= $temp_lat_p[0].'.'.$new_lat_p;

$temp_lon_p	= explode(".", $fetch['longitude']);
$new_lon_p	= $temp_lon_p[1] + $amount;
$temp_lon_p	= $temp_lon_p[0].'.'.$new_lon_p;

$query = 'SELECT id, voornaam, latitude, longitude FROM site_gebruikers
		  WHERE
		  (latitude <= "'.$temp_lat_p.'"
		  AND
		  latitude >= "'.$temp_lat.'")
		  AND
		  (longitude <= "'.$temp_lon_p.'"
		  AND
		  longitude >= "'.$temp_lon.'")
		  AND
		  email != "'.mysql_real_escape_string($user[0]).'"';

$exe = mysql_query($query);
?>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script language="javascript">
function displayLocation(latitude,longitude)
{
	function initialize()
	{
		var myLatlng = new google.maps.LatLng(latitude, longitude);
		
		var mapOptions = {
		zoom: 13,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

		<?php
		$i = 1;
		
		while($fetch = mysql_fetch_assoc($exe))
		{
			$imgQuery = mysql_query('SELECT foto FROM site_fotos
									 WHERE
									 gebruikers_id = "'.mysql_real_escape_string($fetch['id']).'"
									 AND
									 profiel = 1');
			$imgFetch = mysql_fetch_assoc($imgQuery);
			
			echo 'var myLatlng'.$i.' = new google.maps.LatLng('.$fetch['latitude'].', '.$fetch['longitude'].');
		var image'.$i.' = \'images/ik-zelf.png\';
		var Marker'.$i.' = new google.maps.Marker({
			position: myLatlng'.$i.',
			map: map,
			icon: image'.$i.',
			title: \''.$fetch['voornaam'].'\'
		});
		
		';
			$i++;
		}
		?>
	}

google.maps.event.addDomListener(window, 'load', initialize);
};

displayLocation(<?=$lati?>, <?=$long?>);
</script>

<span id="map-canvas" style="width:100%; height:550px; float:left;"></span>

<?php
$user = explode("|", $_COOKIE['mijn-website-cookie']);
 
$query = mysql_query('SELECT id, latitude, longitude FROM site_gebruikers
					  WHERE
					  email = "'.mysql_real_escape_string($user[0]).'" 
					  AND
					  logcode = "'.mysql_real_escape_string($user[1]).'"');
$fetch = mysql_fetch_assoc($query);
 
$lati = $fetch['latitude'];
$long = $fetch['longitude'];
 
$amount = 10;
 
$temp_lat	= explode(".", $fetch['latitude']);
$new_lat	= $temp_lat[1] - $amount;
$temp_lat	= $temp_lat[0].'.'.$new_lat;
 
$temp_lon	= explode(".", $fetch['longitude']);
$new_lon	= $temp_lon[1] - $amount;
$temp_lon	= $temp_lon[0].'.'.$new_lon;
 
 
 
$temp_lat_p	= explode(".", $fetch['latitude']);
$new_lat_p	= $temp_lat_p[1] + $amount;
$temp_lat_p	= $temp_lat_p[0].'.'.$new_lat_p;
 
$temp_lon_p	= explode(".", $fetch['longitude']);
$new_lon_p	= $temp_lon_p[1] + $amount;
$temp_lon_p	= $temp_lon_p[0].'.'.$new_lon_p;
 
$query = 'SELECT id, voornaam, latitude, longitude FROM site_gebruikers
		  WHERE
		  (latitude <= "'.$temp_lat_p.'"
		  AND
		  latitude >= "'.$temp_lat.'")
		  AND
		  (longitude <= "'.$temp_lon_p.'"
		  AND
		  longitude >= "'.$temp_lon.'")
		  AND
		  email != "'.mysql_real_escape_string($user[0]).'"';
 
$exe = mysql_query($query);
?>
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script language="javascript">
function displayLocation(latitude,longitude)
{
	function initialize()
	{
		var myLatlng = new google.maps.LatLng(latitude, longitude);
 
		var mapOptions = {
		zoom: 13,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
 
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
		<?php
		$i = 1;
 
		while($fetch = mysql_fetch_assoc($exe))
		{
			$imgQuery = mysql_query('SELECT foto FROM site_fotos
									 WHERE
									 gebruikers_id = "'.mysql_real_escape_string($fetch['id']).'"
									 AND
									 profiel = 1');
			$imgFetch = mysql_fetch_assoc($imgQuery);
 
			echo 'var myLatlng'.$i.' = new google.maps.LatLng('.$fetch['latitude'].', '.$fetch['longitude'].');
		var image'.$i.' = \'images/ik-zelf.png\';
		var Marker'.$i.' = new google.maps.Marker({
			position: myLatlng'.$i.',
			map: map,
			icon: image'.$i.',
			title: \''.$fetch['voornaam'].'\'
		});
 
		';
			$i++;
		}
		?>
	}
 
google.maps.event.addDomListener(window, 'load', initialize);
};
 
displayLocation(<?=$lati?>, <?=$long?>);
</script>
 
<span id="map-canvas" style="width:100%; height:550px; float:left;"></span>

EDIT:
Puur voor de zekerheid nogmaals getest. De query geeft dit weer als ik hem textueel parse:

Citaat:

SELECT id, voornaam, latitude, longitude FROM site_gebruikers WHERE (latitude <= "51.7804091" AND latitude >= "51.7804071") AND (longitude <= "5.5191536" AND longitude >= "5.5191516") AND email != "mijnemail@live.nl"

In mijn loop geeft hij nu ook één naam weer (er is ook maar één iemand in de database nu met testen). Deze word correct weergegeven. Op het moment dat ik nog een persoon toevoeg, dan worden de overige icoontjes niet weergegeven.

De maps code die door PHP gegenereerd word (met één resultaat):

javascript code - Bekijk de code zonder highlighting - Klap code in

                <script language="javascript">
function displayLocation(latitude,longitude)
{
	function initialize()
	{
		var myLatlng = new google.maps.LatLng(latitude, longitude);
		
		var mapOptions = {
		zoom: 13,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

		var myLatlng1 = new google.maps.LatLng(51.7804080, 5.5191526);
		var image1 = 'images/ik-zelf.png';
		var Marker1 = new google.maps.Marker({
			position: myLatlng1,
			map: map,
			icon: image1,
			title: 'Jeroen'
		});
		
			}

google.maps.event.addDomListener(window, 'load', initialize);
};

displayLocation(51.7804081, 5.5191526);
</script>
            
<script language="javascript">
function displayLocation(latitude,longitude)
{
	function initialize()
	{
		var myLatlng = new google.maps.LatLng(latitude, longitude);
 
		var mapOptions = {
		zoom: 13,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
 
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
		var myLatlng1 = new google.maps.LatLng(51.7804080, 5.5191526);
		var image1 = 'images/ik-zelf.png';
		var Marker1 = new google.maps.Marker({
			position: myLatlng1,
			map: map,
			icon: image1,
			title: 'Jeroen'
		});
 
			}
 
google.maps.event.addDomListener(window, 'load', initialize);
};
 
displayLocation(51.7804081, 5.5191526);
</script>
 

Met meerdere resultaten staat in mijn 1e post... zover ik zie geen fouten maar toch werkt het niet ;)

Komt er dus op neer dat hij maar één market laat zien elke keer en de overige niet...

EDIT:Dit is mijn laatste code met 2 resultaten... misschien dat iemand het werkend krijgt ;) de coordinaten zie je in de code:

Plaatscode: 142276

Het rare is, wanneer ik het niet via PHP doe maar gewoon weg direct er in zet dus bijvoorbeeld:

Citaat:

Dan werkt het wel prima... hoe kan dit komen?

Thomas - 12/10/2013 16:56 (laatste wijziging 13/10/2013 15:11)
Moderator		Krijg je JavaScript foutmeldingen? Misschien wil de browser te snel JavaScript gaan uitvoeren? Of houdt de Google Maps API hier rekening mee? Heb je in PHP output buffering geprobeerd (zodat de hele pagina in 1x wordt doorgestuurd) of in JavaScript een soortement van $(document).ready() (jQuery) constructie? Als je output van PHP precies hetzelfde produceert als de statische code in het bovengenoemde voorbeeld dan gaat er mogelijk iets met timing (het laden van HTML / het uitvoeren van JavaScript) mis? Het kan niet zo zijn dat je met precies dezelfde HTML-output je browser anders reageert. Dan moet er haast iets anders aan de hand zijn (in het voortraject) en ligt dit niet (alleen) aan je HTML-output. In welke browser is dit aan de hand trouwens? Want blijkbaar gaat er wel eens wat mis in Chrome. Oh, enne, staat je browser cache UIT EDIT: Nog wat mogelijkheden: - je gebruikt versie 3.exp, moet je daarvoor ook een API- of client-key meegeven (wss heb je die uit je voorbeelden gewist)? - het domein waarvandaan je deze code test heeft toegang tot de API (wss wel, anders zou je helemaal geen plaatjes zien)? - het (relatieve) pad naar de plaatjes klopt? - heb je al geprobeerd een zIndex toe te voegen aan de afbeeldingen, zodat je deze kunt stapelen? - heb je al geprobeerd om de standaard afbeelding van een marker te gebruiken (verwijder de icon-eigenschap tijdelijk, werkt het dan wel)? EDIT2: In je laatste voorbeeld gebruik je geen icons, en het werkt dan wel, dat is nog een ander verschil dan het niet-gebruiken-van-PHP. Het ligt dus op een of andere manier aan je icons waarschijnlijk? EDIT3: Maak je nog gebruik van andere JavaScript libraries zoals jQuery of YUI of iets dergelijks?

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten