Member Avatar for trektrak

Is it possible to update "only the markers" instead of updating the whole map and markers... as the long lat updated in mysql database. Anything that I need to modified on the script below.

<?
$dbname            =''; //Name of the database
$dbuser            =''; //Username for the db
$dbpass            =''; //Password for the db
$dbserver          =''; //Name of the mysql server

$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
mysql_select_db("$dbname") or die(mysql_error());
?>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Yeahaaaaaa</title>
 <style type="text/css">
 body { font: normal 10pt Helvetica, Arial; }
 #map { width: 350px; height: 300px; border: 0px; padding: 0px; }
 </style>
 <script src="" type="text/javascript"></script>
 <script type="text/javascript">


 //Start The Code


 var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
 new google.maps.Size(32, 32), new google.maps.Point(0, 0),
 new google.maps.Point(16, 32));
 var center = null;
 var map = null;
 var currentPopup;
 var bounds = new google.maps.LatLngBounds();
 function addMarker(lat, lng, info) {
 var pt = new google.maps.LatLng(lat, lng);
 bounds.extend(pt);
 var marker = new google.maps.Marker({
 position: pt,
 icon: icon,
 map: map
 });
 var popup = new google.maps.InfoWindow({
 content: info,
 maxWidth: 300
 });
 google.maps.event.addListener(marker, "click", function() {
 if (currentPopup != null) {
 currentPopup.close();
 currentPopup = null;
 }
 popup.open(map, marker);
 currentPopup = popup;
 });
 google.maps.event.addListener(popup, "closeclick", function() {
 map.panTo(center);
 currentPopup = null;
 });
 }
 function initMap() {
 map = new google.maps.Map(document.getElementById("map"), {
 center: new google.maps.LatLng(0, 0),
 zoom: 3,
 mapTypeId: google.maps.MapTypeId.SATELLITE,
 mapTypeControl: false,
 mapTypeControlOptions: {
 style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
 },
 navigationControl: true,
 navigationControlOptions: {
 style: google.maps.NavigationControlStyle.SMALL
 }
 });
 <?
 $query = mysql_query("SELECT * FROM archive");
 while ($row = mysql_fetch_array($query)){
 $name=$row['user'];
 $lat=$row['lat'];
 $lon=$row['lng'];
 $desc=$row['time'];
 echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
 }
 ?>
 center = bounds.getCenter();
 map.fitBounds(bounds);

 }
 </script>
 </head>
 <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
 <div id="map" style="width: 100%; height: 100%"></div>
 </html>

Thanks :)

  • 2 Contributors
  • 3 Replies
  • 343 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by Moein_2

Dani AI

Generated

Short answer for : yes — keep one map instance and update markers in-place instead of rebuilding the whole map. The usual pattern is a JSON endpoint that returns only current or changed rows (id, lat, lng, html, timestamp), a client-side map keyed by id, and a small sync routine that (a) moves existing markers with setPosition, (b) creates markers for new ids, and (c) removes markers that no longer exist.

Example sync routine (replace fetchData() with your AJAX call that returns an array of records):

var markers = {}; // id -> google.maps.Marker

function syncMarkers(records) {
  var seen = {};
  records.forEach(function(r){
    seen[r.id] = true;
    var pos = new google.maps.LatLng(r.lat, r.lng);
    if (markers[r.id]) {
      markers[r.id].setPosition(pos);
      if (markers[r.id].info) markers[r.id].info.setContent(r.html);
    } else {
      var m = new google.maps.Marker({ position: pos, map: map, icon: r.icon });
      m.info = new google.maps.InfoWindow({ content: r.html });
      m.addListener('click', function(){ m.info.open(map, m); });
      markers[r.id] = m;
    }
  });
  // remove stale markers
  Object.keys(markers).forEach(function(id){
    if (!seen[id]) { markers[id].setMap(null); delete markers[id]; }
  });
}

Reply for about zoom: calling fitBounds will force the map to choose zoom/center to include the bounds — that can make manual zoom changes appear ignored. If you want an initial fit but then force a specific zoom, set it after fitBounds finishes, e.g.:

google.maps.event.addListenerOnce(map, 'bounds_changed', function(){
  map.setZoom(desiredZoom);
});

Otherwise avoid calling fitBounds on every update so user zoom/pan isn’t reset.

Other tips: return minimal JSON (only changed rows), throttle polling (1–5s) or use WebSockets for realtime, prefer mysqli/PDO with prepared statements (mysql_* is deprecated), and use MarkerClusterer or viewport filtering when you have many markers. This keeps updates smooth and secure.

Member Avatar for trektrak

bump

Member Avatar for trektrak

anyone..? :)

Member Avatar for Moein_2

thank you
but i have a question
how can i change mag zoom?
i try to change "zoom: 3" but it doesn`t work
please help me

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.