i have PHP code with MYSQL database and javascript where i ma using the java script in order to display the Google Map with markers where the code display markers based on their coordination.
i have some markers that have the same coordination but different ID so the map show just the last marker.
what i need is:
either to display all the markers that have the same coordination
or
display one marker with number that indicate the the total number of
the markers that have the same coordination.
code:
<script type="text/javascript">
var map,currentPopup;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(33.888630, 35.495480),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
//icon: icons[feature.type].icon,
map: map
});
var markerCluster = new MarkerClusterer(map, marker,
{imagePath:
'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
var popup = new google.maps.InfoWindow({
content: '<b>Site ID :</b> ' + feature.info +'<br></br>'
+ '<b> Site Name :</b>' + feature.site_name +'<br></br>'
+ '<b>Coordinates :</b> '+ feature.position +'<br></br>'
+ '<b>height :</b> ' + feature.height,
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;
});
}
var features = [
<?php
$prependStr ="";
foreach( $wpdb->get_results("select c.siteID, c.latitude, c.longitude, c.height
, i.siteNAME
FROM site_coordinates2 c LEFT
JOIN site_info i
on c.siteID = i.siteID
where i.siteNAME = '".$site_name."'", OBJECT) as $key => $row) {
$latitude = $row->latitude;
$longitude = $row->longitude;
$siteid = $row->siteID;
$height = $row->height;
$siteName = $row->siteNAME;
echo $prependStr;
?>
{
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
info:'<?php echo $siteid;?>',
height: '<?php echo $height;?>',
site_name: '<?php echo $siteName;?>',
}
<?php
$prependStr =",";
}
?>
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
</script>
<?php
//echo "</table>";
}
?>
and i add this library to the code
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
Related
<?php
error_reporting(E_ALL ^ E_DEPRECATED);
$conn = mysql_connect("localhost", "root", "root") or die(mysql_error());
mysql_select_db("db_jawandsons") or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps</title>
<!-------- Customizable Css for Map ----------------------------->
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 1200px; height: 500px; border: 0px; padding: 0px; }
</style>
<!---------------- Java Scripts for Map ----------------->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<!------------- Java Scripts for Map ------------------->
<script type="text/javascript">
var marker;
var map = null;
var markersArray = [];
//--------------------- Sample code written by vIr ------------
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 currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
marker = new google.maps.Marker({
position: pt,
draggable: true,
raiseOnDrag: true,
icon: icon,
map: map
});
markersArray.push(marker);
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: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
setInterval(function mapload(){
$.ajax({
type: "POST",
url: 'location.php',
// data: form_data,
success: function(data)
{
// alert(data);
// var json_obj = $.parseJSON(data);//parse JSON
var json_obj = jQuery.parseJSON(JSON.stringify(data));
for (var i in json_obj)
{ addMarker(json_obj[i].u_lat, json_obj[i].u_lon,"Longitude:" + json_obj[i].u_lon + "<br>" + json_obj[i].u_email + "<br>" + json_obj[i].u_name);
}
},
dataType: "json"//set to JSON
})
},3000);
center = bounds.getCenter();
map.fitBounds(bounds);
}
setInterval(function removeMarker() {
if (markersArray) {
for (i=0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
marker=null;
}
markersArray.length = 0;
}
},3000);
</script>
</head>
<body onLoad="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</body>
</html>
It does not add markers to the map.how can i add markers to the map. please anyone tell me where is the problem is, thank in advance :)
<?php
$conn = mysql_connect("localhost", "root", "root") or die(mysql_error());
mysql_select_db("db_jawandsons") or die(mysql_error());
$return_arr = array();
$data=array();
$result = mysql_query("SELECT lat,lng,vname,speed FROM v_data where sno='1'")or die(mysql_error());
while ($row = mysql_fetch_assoc($result)) {
$data[] = $row['lat'];
$data[] = $row['lng'];
$data[] = $row['vname'];
$data[] = $row['speed'];
//array_push($return_arr,$data);
}
echo json_encode($data);
//echo("addMarker(30.91995, 75.93287, '<b>$name</b><br />$desc');\n");
?>
i want to add my location to the map it will come dynamically. how can i add multiple locations or single location (lat,lon) to the map.
let me know if there is problem in php code. how can i reload the map without page refreash. i tried many scripts but did not work for me. please help me.
Here's what works on me. I have this html page with PHP embedded in it.Maybe you can try to look at and get what you need in here.
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0XjHka3iMTH5jEuy-bYPWNZdILVOQsWI&callback=initMap"></script>
<script>
function initialize() {
var markers = [];
var mapCanvas = document.getElementById('map-canvas');
//San Pablo City
var myLatlng = new google.maps.LatLng(14.0667, 121.3333);
<?php
if (isset($_GET['latitude']) && $_GET['latitude'] != '' && isset($_GET['longitude']) && $_GET['longitude'] != ''){
?>
myLatlng = new google.maps.LatLng(<?=$_GET['latitude']?>, <?=$_GET['longitude']?>);
<?php } ?>
var mapOptions = {
center: myLatlng,
zoom: 17,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE,google.maps.MapTypeId.HYBRID]
},
mapTypeId: google.maps.MapTypeId.NORMAL
}
var map = new google.maps.Map(mapCanvas, mapOptions);
map.setTilt(45);
var infowindow = new google.maps.InfoWindow({
maxWidth: 400
});
<?php foreach($crimes as $crime) {
if ($crime['latitude'] != null AND $crime['longitude'] != '') {
$content = "<b>Date : ". date('M d Y',strtotime($crime['date_crime']))."</b><br>";
$content .= "<p>". $crime['useful_info']."</p>";
?>
addMarker( new google.maps.LatLng(<?=$crime['latitude']?>,<?=$crime['longitude']?>), '<?=$crime['sub_category']?>','<?=str_replace('#','',$crime['color'])?>','<?=substr($crime['sub_category'],0,1)?>',<?=$crime['complaint_id']?>,<?=esc($content)?>);
<?php } } ?>
addListener();
// Add a marker to the map and push to the array.
function addMarker(location,title,color,letter,id,content) {
var pinColor = color;
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + letter + "|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var marker = new google.maps.Marker({
position: location,
map: map,
title : title,
animation: google.maps.Animation.DROP,
icon: pinImage
});
marker.set("id",id);
marker.set("content",content);
markers.push(marker);
}
function getMessage(title,str){
var ret = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h4 id="firstHeading" class="firstHeading">' + title + '</h1>'+
'<div id="bodyContent">'+ str +
'</div>'+
'</div>';
return ret;
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
}
// Shows any markers currently in the array.
function showMarkers() {
setAllMap(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
function addListener(){
for (var i = 0; i < markers.length; i++) {
google.maps.event.addListener(markers[i], 'click', function () {
// do something with this marker ...
var id = this.get("id");
infowindow.setContent(getMessage(this.getTitle(),this.get("content")));
infowindow.setPosition(this.getPosition());
infowindow.open(map,markers[i]);
});
}
}
//google.maps.event.addListener(marker, 'click', function() {
// map.setZoom(8);
// map.setCenter(marker.getPosition());
// });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="page-header">
<h3>Report > <small>Map View</small></h2>
</div>
<div class = "col-md-10">
<div id="map-canvas"></div>
</div>
I have problem with my Google Maps API v3 script. I am using CodeIgniter framework.
The problem is when I clicked a marker, and then click another marker, InfoWindow Google Maps on previous marker didn't close. This is my code:
<script type="text/javascript">
var peta;
var gambar_kantor = new Array();
var nama = new Array();
var kategori = new Array();
var alamat = new Array();
var telpon = new Array();
var x = new Array();
var y = new Array();
var i;
var url;
var gambar_marker;
var gambar_kantor;
var baseurl = "<?php echo base_url() ?>";
function map_init() {
var map = new google.maps.LatLng(-6.990411, 110.422542);
var myStyles =[
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var petaoption = {
zoom: 12,
center: map,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: myStyles
};
peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);
getdatabase();
}
function getdatabase(){
var markers = [];
var info= [];
<?php
$query = $this->db->query("SELECT l.id, l.nama, l.gambar, l.alamat, l.telp, l.latittude, l.longitude, k.nama_kategori, k.ikon
FROM lokasi as l, kategori as k
WHERE l.kategori=k.id");
$i = 0;
$js = "";
foreach ($query->result() as $value) {
$js .= 'nama['.$i.'] = "'.$value->nama.'";
alamat['.$i.'] = "'.$value->alamat.'";
telpon['.$i.'] = "'.$value->telp.'";
x['.$i.'] = "'.$value->latittude.'";
y['.$i.'] = "'.$value->longitude.'";
set_icon("'.$value->ikon.'");
var point = new google.maps.LatLng(parseFloat(x['.$i.']),parseFloat(y['.$i.']));
var contentString = "<table>"+
"<tr>"+
"<td align=center><br><b>" + nama['.$i.'] + "</b></td>"+
"</tr>"+
"<tr>"+
"<td align=center width=300px>" + alamat['.$i.'] + "</td>"+
"</tr>"+
"<tr>"+
"<td align=center> Telp: " + telpon['.$i.'] + "</td>"+
"</tr>"+
"</table>";
var currentInfoWindow = null;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: point,
map: peta,
icon: gambar_marker,
clickable: true
});
markers.push(marker);
info.push(infowindow);
google.maps.event.addListener(markers['.$i.'], "click", function() {
info['.$i.'].open(peta,markers['.$i.']);
});
';
$i++;
}
// echo JS
echo $js;
?>
}
Any solution to make InfoWindow auto close when another marker clicked?
I have tried several solutions on Stackoverflow and Google but didn't worked. Thanks for your kindly help :)
You could declare just one infowindow, outside of your loop. Then each marker, when clicked, opens that infowindow on itself, filling it with the proper contents.
In the following example I set the contentString property on the marker itself.
var infowindow = new google.maps.InfoWindow();
<?php
foreach ($query->result() as $value) {
....
?>
var marker = new google.maps.Marker({
position: point,
map: peta,
icon: gambar_marker,
clickable: true,
content: contentString
});
markers.push(marker);
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(marker.content);
infowindow.open(peta,marker);
});
<?php
}
?>
Maybe this link will be of use to you?
Previously answered: Close infowindow when another marker is clicked
Make sure to declare the global variable outside the main google maps code in your JS:
file: var lastOpenedInfoWindow;
Good luck!
I have consoled the data and it is fine, I see the different names being consoled properly. the multiple markers are also being created but on the InfoWindow it is only showing the data for the last row for every Marker.
<?php
include 'connect.php';
$locations=array();
$apikey = "APIKEY";
$query = $db->query('SELECT * FROM fields');
while( $row = $query->fetch_assoc() ){
$name = $row['field_name'];
$longitude = $row['field_longitude'];
$latitude = $row['field_latitude'];
$owner = $row['field_owner'];
$incharge = $row['field_incharge_name'];
$contact_number = $row['contact_number'];
$field_address = $row['field_address'];
$field_pitch_length = $row['field_pitch_length'];
$field_pitch_breadth = $row['field_pitch_breadth'];
$ground_busy_hours_per_week = $row['ground_busy_hours_per_week'];
$locations[]=array('field_name'=>$name,'lat'=>$latitude,'lng'=>$longitude, 'owner'=>$owner, 'incharge'=>$incharge, 'contact_number'=>$contact_number, 'field_address'=>$field_address, 'field_pitch_length'=>$field_pitch_length, 'field_pitch_breadth'=>$field_pitch_breadth, 'ground_busy_hours_per_week'=>$ground_busy_hours_per_week);
}
$markers = json_encode($locations);
?>
<body>
<div id="map"></div>
<script>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 15.3489395, lng: 73.7347356},
mapTypeId: 'roadmap'
});
for(i = 0; i < markers.length; i++) {
var infoWindow = new google.maps.InfoWindow(), marker;
infoWindowContent = '<div class="info_content">' +
'<h4>Field Name: </h4><p>'+' '+markers[i].field_name+'</p><br>' +
'<h4>Owner: </h4><p>'+' '+markers[i].owner+'</p><br>' +
'<h4>Incharge: </h4><p>'+' '+markers[i].incharge+'</p><br>' +
'<h4>Contact No: </h4><p>'+' '+markers[i].contact_number+'</p><br>' +
'<h4>Field Address: </h4><p>'+' '+markers[i].field_address+'</p><br>' +
'<h4>Pitch Length: </h4><p>'+' '+markers[i].field_pitch_length+'</p><br>' +
'<h4>Pitch Breadth: </h4><p>'+' '+markers[i].$field_pitch_breadth+'</p><br>' +
'<h4>Busy Hours per Week: </h4><p>'+' '+markers[i].ground_busy_hours_per_week+'</p><br>' +
'</div>';
lat = parseFloat(markers[i].lat);
lng = parseFloat(markers[i].lng);
var position = new google.maps.LatLng(lat, lng);
marker = new google.maps.Marker({
position: position,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infoWindow.setContent(infoWindowContent);
infoWindow.open(map, marker);
}
})(marker));
}
google.maps.event.addDomListener(window, 'load', initMap);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap">
</script>
</body>
Sorry cannot share the DB, maybe for testing you can use dummy data. I have no idea why it is only displaying the data from the last row.
Thanks for the help.
I think you need to pass the "infoWindowContent" also to the closure.
google.maps.event.addListener(marker, 'click', (function(marker, infoWindowContent) {
return function() {
infoWindow.setContent(infoWindowContent);
infoWindow.open(map, marker);
}
})(marker, infoWindowContent));
I get the Coordinates and the Names and "ID" out of an MySQL Table but why is in every Marker the same Text an also the same link ?
Why is the text not different ???
It show only the last ID but it should add after every element in the data base an other marker !
The markers are at the right Position and the "Content" is in the Source Code also right but not at the markes why ?!
Please Help
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.124213, 10.60936),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var contentString;
var elementeInArray = 0;
var LatLngList = new Array;
<? php
$i = 1;
foreach($FertigID as $ID) {
$result = mysql_query("SELECT * FROM Daten_CH WHERE Objektnummer = ".$ID.
"");
while ($Ergebnisse = mysql_fetch_array($result)) {
// Werden alle ergebnisse (ID´s) in einen Array geschriebenn
echo $$Ergebnisse["Objektnummer"];
if (isset($Ergebnisse["Gis_y"]) && $Ergebnisse["Gis_y"] != "" &&
$Ergebnisse["Gis_y"] != " ") {
echo $i; ?>
// MARKER TEXT
contentString = '<?php echo $i; ?> </br><?php echo
$Ergebnisse["Objektname"]; ?>
</br><a href="Change.php?ID=<?php echo $ID; ?>">
<input type="button" value="BEARBEITEN"></button></a>';
var Position = new google.maps.LatLng( <? php echo $Ergebnisse["Gis_y"]; ?> , <? php echo $Ergebnisse["Gis_x"]; ?> );
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker <? php echo $i; ?> = new google.maps.Marker({
position: Position,
map: map,
title: '<?php echo $Ergebnisse["AA_Objektname"]; ?>'
});
google.maps.event.addListener(marker <? php echo $i; ?> , 'click', function () {
infowindow.open(map, marker <? php echo $i; ?> );
});
LatLngList[elementeInArray] = new google.maps.LatLng( <? php echo $Ergebnisse["Gis_y"]; ?> , <? php echo $Ergebnisse["Gis_x"]; ?> );
elementeInArray++;
<? php
}
}
$i++;
}
?>
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend(LatLngList[i]);
}
// Fit these bounds to the map
map.fitBounds(bounds);
var opt = {
minZoom: 1,
maxZoom: 12
};
map.setOptions(opt);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Because you should assign the contentString to the marker, and update the infowindow with each markers assigned content instead. As it is now, the only contentString available is the last created. Furthermore, you really dont have to create multiple numbered markers. You just need one marker reference only.
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: Position,
map: map,
content: contenString, // <-- assign content to the marker itself
title: '<?php echo $Ergebnisse["AA_Objektname"]; ?>'
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(this.content);
infowindow.open(map, this);
});
This would do the trick.
I am using google maps api to place markers on a map. The gps coordinates of the markers are stored in a mySQL database. I have been able to create the markers however the locations will constantly changing so I was wondering how I would go about updating the markers' locations so that the markers will move across the map. Here is my code so far:
<!DOCTYPE html>
<html>
<head><title>Map</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(36.9947935, -122.0622702);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = new google.maps.MarkerImage('busIcon.png',
// The image size
new google.maps.Size(44, 46),
// The origin
new google.maps.Point(0,0),
// The anchor
new google.maps.Point(22, 23));
var shadow = new google.maps.MarkerImage('busIcon_shadow.png',
new google.maps.Size(58, 46),
new google.maps.Point(0,0),
new google.maps.Point(22, 23)
);
var shape = {
coord: [1, 1, 1, 45, 43, 45, 43 , 1],
type: 'poly'
};
var markers = [
<?php
// Make a MySQL Connection
mysql_connect("**********", "**********", "**********") or die(mysql_error());
mysql_select_db("matsallen") or die(mysql_error());
//Get number of rows
$result = mysql_query
(
'SELECT COUNT(*) FROM busTrack AS count'
)
or die(mysql_error());
$row = mysql_fetch_array( $result );
$length = $row["COUNT(*)"];
for ($count = 1; $count <= $length; $count++) {
//Get data from MySQL database
$result = mysql_query
(
'SELECT * FROM busTrack WHERE busID = '.$count
)
or die(mysql_error());
// store the record of the "busTrack" table into $row
$row = mysql_fetch_array( $result );
// Echo the data into the array 'markers'
$output = '{id: "Bus '.$row[busID].'", lat: '.$row[lat].', lng: '.$row[lon].'}';
if ($count != $length) {
$output = $output.',';
};
echo $output;
};
?>
];
for (index in markers) addMarker(map, markers[index]);
function addMarker(map, data) {
//create the markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.id,
icon: image,
shape: shape,
shadow: shadow
});
//create the info windows
var content = document.createElement("DIV");
var title = document.createElement("DIV");
title.innerHTML = data.id;
content.appendChild(title);
var infowindow = new google.maps.InfoWindow({
content: content
});
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:75%; height:75%; margin:10%; allign:center;"></div>
</body>
</html>
To change the location of a marker, call setPosition() on that marker:
marker.setPosition(new google.maps.LatLng(newLat,newLng);
To do this, you will need to save all your markers in an array. Perhaps something like this would work:
var myMarkers = new Array();
for (index in markers) {
myMarker[ markers[index]['id'] ] = addMarker(map, markers[index]);
}
function addMarker(map, data) {
//create the markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.id,
icon: image,
shape: shape,
shadow: shadow
});
//create the info windows
var content = document.createElement("DIV");
var title = document.createElement("DIV");
title.innerHTML = data.id;
content.appendChild(title);
var infowindow = new google.maps.InfoWindow({
content: content
});
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
return marker;
}
Then, when the position of a marker needs to change, hopefully you know the bus ID and can just call:
myMarkers['Bus 47'].setPosition(new google.maps.LatLng(newLat,newLng);
I didn't test the above code so there may be small syntax errors or something, but it should give you the idea.