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

Posted on 2007-10-19
Last Modified: 2010-07-27
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 = "";
        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 = "" + 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 = -;
        for (var i = 0; i < 10; i++) {
          var point = new GLatLng( + latSpan * Math.random(),
            southWest.lng() + lngSpan * Math.random());
          map.addOverlay(createMarker(point, i));

Question by:jtcy
    LVL 23

    Expert Comment

    well you are using random numbers in there, so it is designed to plot randomly:

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

    Math.random() generates random numbers...

    Author Comment

    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.
    LVL 23

    Expert Comment

    well at a glance, first thing i'd try is getting rid of the Math.random like this:

    var point = new GLatLng( + latSpan, southWest.lng() + lngSpan);
    LVL 82

    Accepted Solution

    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:
    $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

    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
    LVL 82

    Expert Comment

    if it does not seem quite rigth when you use
    var point = new GLatLng(latitude[i] ,longitude[i] );
    var point = new GLatLng(latitude[i] + latSpan, longitude[i] + lngSpan);

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit ( and similar technologies have enjoyed wide adoption, making it possib…
    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    The viewer will learn how to count occurrences of each item in an array.

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now