Announcement

Collapse
No announcement yet.

Creating Multi Location Map

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Creating Multi Location Map

    I found a great piece of open source code PHP which had some amazing features. Taking the exact code I created a Blank Application, and in the OnExecute applied the below. Unfortunately when trying to run it it crashes. Thinking that I needed to add the various libraries I tried find a way to upload the libraries supplied with the OpenSource, but could not see how to add. If anyone could advise how to make this work, and advise me (l.hurwitz@my-911.com) I it would be very much appreciated.

    Access to the source code, see here: http://www.sachinghare.com/google-map-integration-with-multiple-locations-php-mysql/


    The code I put in the OnExecute see below:

    <?php
    //include "includes/header.php";
    ?>
    <div id="ss-container" class="ss-container">
    <div id="map_canvas"> <!-- Map will display -->
    <div id="map"> <!-- Fullscreen Loading & Fullscreen Buttons area -->
    <span style="color:Gray;">Loading map...</span> </div>
    <!-- Fullscreen Loading & Fullscreen Buttons area Ends -->
    </div><!-- Map Ends display -->

    <!-- Google Map JS -->
    <script type="text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
    var locations = [
    <?php

    $query="SELECT
    id,
    event_code,
    latitude,
    longitude,
    peccr_code,
    status
    FROM
    EventActivity
    WHERE
    (peccr_code = 'my911') AND
    (status = 'Accepted')";


    //$query="SELECT * from locations";

    $result=mysql_query($query);
    {
    if ($num=mysql_numrows($result)) {
    $i=0;
    while ($i < $num) {
    $id=mysql_result($result,$i,"id");
    // $title=mysql_result($result,$i,"title");
    $title="Emergency";
    //$lapt=mysql_result($result,$i,"lapt");
    $lapt=mysql_result($result,$i,"latitude");
    //$long=mysql_result($result,$i,"long");
    $long=mysql_result($result,$i,"longitude");
    //$aimage=mysql_result($result,$i,"aimage");
    $aimage="";
    //$categoryid=mysql_result($result,$i,"categoryid");
    $categoryid="1";
    //$short_title=mysql_result($result,$i,"short_title" );
    $short_title="Emergency - Accepted";
    /// echo "['<div class=info><h4>$title</h4><br><a href=http://www.sachinghare.com/blog/id=$id><img src=$aimage></a><br><p>$short_title</p></div>', $lapt, $long],";

    echo $i
    echo $num
    $i++;
    }
    }
    else
    {
    echo "<h3 align='center'><font color='#ff0000'>No Content Found</font></h3>";
    }
    }
    ?>
    ];

    // Setup the different icons and shadows
    var iconURLPrefix = 'images/';

    var icons = [
    iconURLPrefix + 'marker1.png',
    iconURLPrefix + 'marker2.png',
    iconURLPrefix + 'marker3.png',
    iconURLPrefix + 'marker4.png',
    iconURLPrefix + 'marker5.png',
    iconURLPrefix + 'marker6.png',
    iconURLPrefix + 'marker7.png'
    ]
    var icons_length = icons.length;


    var shadow = {
    anchor: new google.maps.Point(5,13),
    url: iconURLPrefix + 'msmarker.shadow.png'
    };

    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: -5,
    center: new google.maps.LatLng(40.715618, -74.011133),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    disableDefaultUI: true,
    panControl: false,
    zoomControlOptions: {
    position: google.maps.ControlPosition.LEFT_BOTTOM
    }
    });

    var infowindow = new google.maps.InfoWindow({
    maxWidth: 400,
    maxHeight: 350
    });

    var marker;
    var markers = new Array();

    var iconCounter = 0;

    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3], locations[i][4], locations[i][5]),
    map: map,
    icon : icons[iconCounter],
    shadow: shadow
    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
    }
    })(marker, i));

    iconCounter++;
    // We only have a limited number of possible icon colors, so we may have to restart the counter
    if(iconCounter >= icons_length){
    iconCounter = 0;
    }
    }

    function AutoCenter() {
    // Create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds();
    // Go through each...
    $.each(markers, function (index, marker) {
    bounds.extend(marker.position);
    });
    // Fit these bounds to the map
    map.fitBounds(bounds);
    }
    AutoCenter();
    </script>
    </div>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <?php
    //include "includes/footer.php";
    ?>
    </body>
    </html>

  • #2
    Hello I trying too.
    You resolve?

    Comment


    • #3
      Does anyone solve that problem?

      Comment


      • #4
        Originally posted by sekr View Post
        Does anyone solve that problem?
        Unfortunately no this was never resolved nor did I get any answers how to solve

        Comment


        • #5
          I think this was never resolved, as nobody want's to go through that code.
          search a little i found:
          1. No opening Tags for html / head / body
          2. missing semicolons
          3. The use of <div id = but i could not see, where the js-file is included

          And it's really confusing where function and var declarations begin and end.
          So if you want to have a solution, bring it in a way, that it is readable, without copying the code to a debugger !

          Comment

          Working...
          X