PDA

View Full Version : No marker on google maps (api3) script



stephen_
Feb 21st, 2012, 03:48 PM
Would someone as be so kind to check my google maps script. For some reason the map is centering yet no marker (and info window) is being displayed.

I'm (foolishly) using php to echo out the lat and long and the info window content yet everything seems to output okay......

Did a quick java de-bug and found the following error;


Error: myLatlng is not defined
Source File: xxx
Line: 45

However the lat and lng are echo' out okay and the map is centered on the co-ordinates????

Much thanks!!!!



<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(53.989723,-7.361760),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

var contentString = '<div>'+
'<h3 id="fs">Alcohol Early Intervention Project (Cavan/Monaghan)</h1>'+
'<div>'+
'<p>Click here for a streetview map</p>'+
'</div>'+
'</div>';

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Alcohol Early Intervention Project (Cavan/Monaghan)"
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});

google.maps.event.addListener(marker, 'click', function() {
if (map.getZoom() == 13) {
map.setZoom(4);
} else {
map.setZoom(8);
}
});
}
</script>

stephen_
Feb 21st, 2012, 04:02 PM
Okay please forgive me I've cleaned the code everything now works okay....

This is how the code now works picking up the lat and long's from a sql database with PHP;



<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(<? echo $lat; ?>,<? echo $long; ?>);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var contentString = '<div>'+
'<div id="siteNotice">'+
'</div>'+
'<h1><? echo $org_name;?></h1>'+
'<div id="bodyContent">'+
'<p></p>'+
'<p></p>'+
'</div>'+
'</div>';

var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '<? echo $org_name;?>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}

</script>

</head>
<body onload="initialize()">
<div id='map_canvas' style="width:450px;height:400px;"></div>

stephen_
Feb 27th, 2012, 03:45 PM
Would love it if anyone knows how I could add a array of some kind to pick up multiple markers on a page?

Google uses;


var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];

I'd rather change this is allow any lat or long's shown in the page in a class to be picked up and displayed???

xelawho
Feb 27th, 2012, 10:31 PM
I don't really understand the question. Do you mean that you want to give markers a category and if that category is selected (checkbox, select list, etc) then the map will only show markers of that category?

If so, when creating your marker objects you can assign them a category, then on user selection loop through you markers array and show all that correspond to the category selected and hide the rest.

or if it's something else maybe you can explain a little more?

stephen_
Feb 28th, 2012, 01:56 PM
Sorry for being confusing. What i'm trying to do is allow my google map to display multiple markers.

I want the lat's and longs picked up from what ever lats and longs are outputed in a list (results from a mysql query) to be displayed onto a map.

I've seen an example in ASP yet I'm using PHP..... Every row (organisation) has a script function outputing a lat and long and this is being picked up by a js file to output a list of markers....

xelawho
Feb 28th, 2012, 10:25 PM
have you seen google's tutorial (http://code.google.com/apis/maps/articles/phpsqlajax_v3.html)?

stephen_
Mar 2nd, 2012, 04:24 PM
I have yet it seems to complicate matters for me.

I already have a query passed in my results page all I want to do is output the lat and long of each result and then allow some google js to pick them up and add a marker,

This is the php im using to display each result;

Below is the PHP i'm using to output
e,g



echo'
<li>
<h3 class="fs"> '.(empty($idnumber) ? '&nbsp;' :' <a href="profile.php?id='.$idnumber.'">'.$org_name.'</a>').'</h3>
<p class="fs"> p: '.(empty($tel) ? '&nbsp;' : $tel).'<br/>';
//only show email if available
if($email!== "")
{
echo 'e: <a class="bluelink" href="mailto: '.(empty($email) ? '&nbsp;' : htmlspecialchars($email)).'?Subject=Enquiry%20from%">'.(empty($email) ? '&nbsp;' : htmlspecialchars($email)).'</a><br/>';
}
//only show website if available
if($website!== "")
{
echo 'w: <a class="bluelink" target="_blank" href="'.$website.'">'.$website.'</a>';
}?>
</p>
<?php
//only show logo if available
if($image_path!== "")
{
echo '<a href="'.(empty($website) ? '&nbsp;' : $website).'" target="_blank"><img class="agent-logo" src="'.$image_path.'" alt="'.$org_name.'" title="'.$org_name.'"/><a/>';
}
?>
</li>
<?php '
';
$i++;
}
echo '
</ul>


Also would like to know how I could put the - //only show logo if available - code above the <h3 class="fs"> for it to float right centre....