ansaurus

Question

Answer 1

+1 A:

I have done something that's almost identical to what you are trying to achieve. My solution works perfectly, but I have done it in a completely different way.

I have all my latitude and longitute stored next to placenames etc. in my database as you have, but this is how I process them:

selectPlaces.php

<?php
include 'data.php';

mysql_connect($host, $user, $pass) or die ("Wrong Information");

mysql_select_db($db) or die("Wrong Database");

$result = mysql_query("SELECT * FROM reseller_addresses") or die ("Broken Query");
$letter = 'A';
while($row = mysql_fetch_array($result)){
    $placeName = stripslashes($row['b_name']);
    $placeCode = stripslashes($row['b_code']);
    $placeTown = stripslashes($row['b_town']);
    $places .= "<strong>$letter:</strong> $placeName, $placeTown, $placeCode<br>";
    $placeLatLng = stripslashes($row['latlng']);
    $hidden .= "$placeLatLng<br>";
    $letter++;
}

mysql_close();
?>

index.html

<?php 
include 'private/selectPlaces.php' 
?>
<!DOCTYPE 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" />
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
<link rel="stylesheet" type="text/css" href="hallets-style.css" />
<script type="text/javascript"> 
  function initialize() {
    var cent = new google.maps.LatLng(51.673606, -3.11542);
    var myOptions = {
      zoom: 10,
      center: cent,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var locations = document.getElementById("hidden").innerHTML.toLowerCase();
    var spLocations = locations.split("<br>");
    var spLength = (spLocations.length)-1;
    var letter = "A";
    for(var i=0; i<spLength; i++){
        var formLocations = spLocations[i].split(",");
        var image = "http://www.google.com/intl/en_ALL/mapfiles/marker_black"+letter+".png";
        var myLatLng = new google.maps.LatLng(formLocations[0], formLocations[1]);
        var marker = new google.maps.Marker({
            position: myLatLng, 
            icon: image,
            map: map
        });
        letter = String.fromCharCode(letter.charCodeAt() + 1);
    }
  } 
</script>
</head>
</head>
<body onload="initialize()">
<div id="wrapper">
    <div id="left">
            <div id="map_canvas"></div>
    </div>
    <div id="right">
        <div id="menu">
        <div
        <div id="content"><?php echo $places; ?> 
        </div>
    </div>
</div>
<div id="hidden" style="display:none"><?php echo $hidden; ?></div>
</body>
</html>

What's happening here is I'm just outputting all my co-ordinates and places to a hidden div on my page, which is then read by javascript via getElementById. It's easy to pass the variables over to google marker code then.

Hopefully this helps you Cheers, Dan

Daniel Hanly 2010-08-27 14:21:31

ansaurus

tags:

views:

answers:

Problem with the google map Markers

related questions