Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1442
  • Last Modified:

(PHP/ JavaScript) Plot markers on Google Map on page load event

I am trying to plot locations on to Google map. These locations are pulled from MysQL database like:

$result = mysql_query("SELECT * FROM albums WHERE uid='$session_uid'");
while ($albums = mysql_fetch_array($result)) {
// get album and then put into a javascript array
}

and then in a javascript, I want it to mark the points on the map. Can someone help me out?

I already have the api and script function all setup, but apparently, it plots random 10 locations on the map:

    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 3);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());

        // Create a base icon for all of our markers that specifies the
        // shadow, icon dimensions, etc.
        var baseIcon = new GIcon();
        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(20, 34);
        baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        baseIcon.infoShadowAnchor = new GPoint(18, 25);

        // Creates a marker whose info window displays the letter corresponding
        // to the given index.
        function createMarker(point, index) {
          // Create a lettered icon for this point using our icon class
          var letter = String.fromCharCode("A".charCodeAt(0) + index);
          var letteredIcon = new GIcon(baseIcon);
          letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";

          // Set up our GMarkerOptions object
          markerOptions = { icon:letteredIcon };
          var marker = new GMarker(point, markerOptions);

          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml("Marker <b>" + letter + "</b>");
          });
          return marker;
        }

        // Add 10 markers to the map at random locations
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        for (var i = 0; i < 10; i++) {
          var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
            southWest.lng() + lngSpan * Math.random());
          map.addOverlay(createMarker(point, i));
        }
      }
    }
    </script>

0
jtcy
Asked:
jtcy
  • 2
  • 2
1 Solution
 
basicinstinctCommented:
well you are using random numbers in there, so it is designed to plot randomly:

var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());

Math.random() generates random numbers...
0
 
jtcyAuthor Commented:
Yeah i know, so how can I change it to so that i can plot those locations in the php variable onto the map through javascript? I am not good with javascript, thats why i am here asking the question.
0
 
basicinstinctCommented:
well at a glance, first thing i'd try is getting rid of the Math.random like this:


var point = new GLatLng(southWest.lat() + latSpan, southWest.lng() + lngSpan);
0
 
hieloCommented:
assuming that your SQL query returns a latitude on array index 0, and longitude on array index 1, you can achieve your goal as follows:
ServerSide:
<?php
$result = mysql_query("SELECT * FROM albums WHERE uid='$session_uid'");
echo('<script type="text/javascript">');
echo('var latitude=new Array();');
echo('var longitude=new Array();');
while ($albums = mysql_fetch_array($result)) {
// get album and then put into a javascript array
echo('latitude.push('+$albums[0]+');');
echo('longitude.push('+$albums[1]+');');
}
echo('</script>');
?>

ClientSide:
modify the for-loop as follows:
for (var i = 0; i < latitude.length; i++) {
          var point = new GLatLng(latitude[i],longitude[i]);
          map.addOverlay(createMarker(point, i));
}

NOTE: the latitude and longitude arrays should be in global scope on the client side
0
 
hieloCommented:
if it does not seem quite rigth when you use
var point = new GLatLng(latitude[i] ,longitude[i] );
try
var point = new GLatLng(latitude[i] + latSpan, longitude[i] + lngSpan);
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now