I am trying to implement google maps by acf and everything works like a charm except one thing. I would like to have main icon different than other and icon will be uploaded by acf. Thanks for any hint.
Here is bunch of my code:
<script type="text/javascript">
var locations = [<?php while( $wp_query->have_posts() ){
$wp_query->the_post();
$location = get_field('carte_google');?>
['<?php the_title(); ?> <br/> <?php the_field('map_description'); ?> <?php the_field('pin'); ?>', <?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php $NUM++ ?>],<?php } ?> ];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: new google.maps.LatLng(45.7830954, 24.0697979),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var image = {
url: 'probably here should be image from acf',
};
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image,
animation: google.maps.Animation.BOUNCE,
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Thank You for Your help in advance.
There are 2 possible solutions.
1 - Create categories and set the post with these categories (this is useful to when you has many places in map with the same icon)
2 - Create a custom field to place the icon
I will describe both.
By creating categories you can easily to link many locations with the same icon. I did it once and used the categories images plugin. When in loop, just identify the post category and retrieve image for it, something like:
for (i = 0; i < locations.length; i++) {
var image = '<?php echo z_taxonomy_image($term_id); ?>';
// the $term_id is the category from the current post in loop that
// you need to retrieve
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image,
animation: google.maps.Animation.BOUNCE,
});
With the second solution you must to create an Advanced Custom Field for some post/page type, this custom field will be of type: "image". Set the return to be the image URI, not an object as is the default option. For this example, I suppose that you will create a field named map_icon. In your question I can see you already have a custom field named map_description, for this same ACF configuration just add the image custom field. And to show this image you can do this:
for (i = 0; i < locations.length; i++) {
var image = '<?php the_field('map_icon', $post_id); ?>';
// the $post_id is the current post in loop
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image,
animation: google.maps.Animation.BOUNCE,
});
Has a lot of time since I did this, but looking in some references like ACF and the Categories Images plugin these 2 solutions must to work to you.
At least I figure out how to display different icon for one post(Head-quarter - pin) and other for the rest projects. Here is code I used and it work for me. Maybe it will be useful for someone else.
I am ordering here post from the oldest to the newest and then I am adding prefix + image.png to the oldest post.
Thank You for Yours posts
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<?php
$args = array(
'post_type' => 'projects',
'posts_per_page' => -1,
'order' => 'ASC'
);
// query
$wp_query = new WP_Query( $args );
$NUM = 0;
?>
<div id="map"></div>
<script type="text/javascript">
var locations = [<?php while( $wp_query->have_posts() ){
$wp_query->the_post();
$location = get_field('carte_google');?>
['<?php the_title(); ?> <br/> <?php the_field('map_description'); ?>', <?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php $NUM++ ?>],
];
var stylowanie = [ { "featureType": "water", "stylers": [ { "visibility": "on" }, { "color": "#46bcec" } ] },{ "featureType": "landscape", "stylers": [ { "color": "#f2f2f2" } ] } ];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: Math.ceil(Math.log2($(window).width())) - 8,
minZoom: Math.ceil(Math.log2($(window).width())) - 8,
maxZoom: Math.ceil(Math.log2($(window).width())) - 8,
center: new google.maps.LatLng(45.7830954, 24.0697979),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
styles: stylowanie,
});
var infowindow = new google.maps.InfoWindow();
var iconURLPrefix = 'http://link.to.your.images.folder/images';
var icons = [
iconURLPrefix + 'image1.png',
iconURLPrefix + 'image2.png',
]
var iconsLength = icons.length;
var marker, i;
var iconCounter = 0;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icons[iconCounter],
animation: google.maps.Animation.DROP,
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter > iconsLength) {
iconCounter = 0;
}
else{
iconCounter = 1;
}
}
I hope it will work for You as well
Related
I have a database which contains addresses. I wish to display these addresses on a google map. I succeeded in generating a json file like this
$json = "https://maps.googleapis.com/maps/api/geocode/json?address=" . $row["HUISNUMMER"] . "+" . $row["STRAATNAAM"] . "+" . $row["STAD"] . "&key=MYPRIVATEKEY";
I can get the lat and long through php like this (in the same loop where I show the database records):
$jsonzip = file_get_contents($json);
$jsondata = json_decode($jsonzip,true);
$jsonlat = $jsondata['results']['0']['geometry']['location']['lat'];
$jsonlong = $jsondata['results']['0']['geometry']['location']['lng'];
And now I'm stuck turning these into markers.
For now I have the default google code to show a marker
<script>
function initMap() {
var myLatLng = {lat: 50.6847204, lng: 4.1045525};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
How would I add all the locations on the map?
You will first need to get the PHP variable into the javascript, an example:
<?php echo json_encode($jsondata); ?>
Then a for loop whith the creaton of a marker inside it. Something like:
for(var i = 0; i < jsondata.length; i++){
var marker = new google.maps.Marker({
position: jsondata[i]['geometry']['location']['lat'],
map: map,
title: 'Hello World!'
});
}
try this
$locations = json_decode($jsonzip, true);
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[i]['geometry']['location']['lat'], locations[i]['geometry']['location']['lng']),
map : map,
animation : google.maps.Animation.DROP,
icon : new google.maps.MarkerImage( '/PATH/marker.svg', null, null, null, new google.maps.Size(24, 24) ),
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<h3>TITLE</h3>');
infowindow.open(map, marker);
}
})(marker, i));
}
for more informations: https://www.revilodesign.de/blog/google-maps-api/google-maps-api-karte-mit-mehreren-marker-und-infowindow/
I'm not able to zoom to a particular area/location in Google maps which has multiple Map Pointers. At present it automatically centers the map covering all locations. But what I need is to zoom to a particular location upon opening the webpage. Here is my code,
<script>
jQuery(function ($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
locations = <?php echo json_encode($sl_select_obj) ?>;
markerdata = JSON.parse('<?php echo json_encode($locations_data) ?>');
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap',
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers''
// $info='';
var markers = locations;
<?php
$total = count($locations_data);
$markerinfo = '';
$c = 0;
foreach ($locations_data as $key => $info):
if ($c != $total):
$markerinfo .="['<div class=\"info_content\"><h2>" . $info['loctitle'] . "</h2><h3>" . $info['site'] . "</h3><h3>View Full Office Details</h3></div>'],";
else:
$markerinfo .="['<div class=\"info_content\"><h2>" . $info['loctitle'] . "</h2><h3>" . $info['site'] . "</h3><h3>View Full Office Details</h3></div>']";
endif;
$c++;
endforeach;
?>
// Info Window Content
var infoWindowContent = [<?php echo $markerinfo; ?>]; //markerdata;
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i]["lat"], markers[i]["long"]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i]["address"],
icon: '<?php bloginfo('template_directory'); ?>/images/venue-direct-icon.png'
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
this.setZoom(7);
google.maps.event.removeListener(boundsListener);
});
map.fitBounds(markerBounds);
}
Try to add the "center" option like this:
var mapOptions = {
center: new google.maps.LatLng(51.5287718, -0.2416803),
mapTypeId: 'roadmap',
zoom: 15,
draggable: map_draggable,
scrollwheel: map_scrollwheel
};
EDIT: To help you this is a code similar that I use in my project: multiple positions, center on the first if only one, else I use google autocenter for all positions.
jQuery( document ).ready( function( $ ) {
if($(window).width()>991){
var map_draggable = true;
var map_scrollwheel = false;
} else {
var map_draggable = false;
var map_scrollwheel = false;
}
var offices = [];
$('#map-google-container')
.find('.hidden')
.each(function(){
offices[offices.length] =
{
"latitude":$(this).attr('latitude'),
"longitude":$(this).attr('longitude'),
"content":$(this).attr('content')
};
});
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(offices[0].latitude, offices[0].longitude),
draggable: map_draggable,
scrollwheel: map_scrollwheel,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
panControl: true
};
var map = new google.maps.Map(document.getElementById('map-google'), mapOptions);
var map_styles = [
{
featureType: "all",
stylers: [
{ hue: "#F69200" },
{ saturation: -50 }
]
},{
featureType: "water",
stylers: [
{ color: "#efefef" }
]
}
];
map.setOptions({styles: map_styles});
var image = '/include/images/marker.png';
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < offices.length; i++)
{
var content = offices[i].content;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(offices[i].latitude, offices[i].longitude),
map: map,
icon: image,
animation: google.maps.Animation.DROP,
title: content
});
bounds.extend(marker.position);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
if (offices.length > 1) { map.fitBounds(bounds); }
});
In my project I have to list all the offices and show a unique map with all of them. So in the HTML I put the information of all offices (hidden for the user). In JavaScript I loop through these properties and populate the map.
Hope it helps
Yes, I can able to find the solution, for those who are facing this similar issue may find it helpful,
var map_center_position = new google.maps.LatLng(34.0059657 ,-118.4440441);
bounds.extend(map_center_position);
map.fitBounds(bounds);
I've been playing around with the Google Maps API lately, and I have links that perform a JS function. This JS function partially works, on click it centers the map to the pin coords, but I also want it to show the infowindow; Everything works except opening the infowindow. Any help would be amazing! the code is a little cluttered with PHP / WP functions.
<script type="text/javascript">
var map;
var infowindow;
var marker;
function initialize() {
var styles = [
{
stylers: [
{ hue: "#c09c3d" },
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 50 },
{ visibility: "simplified" }
]
}
];
infowindow = new google.maps.InfoWindow({
maxWidth: 275
});
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(<?php echo $centerCoords; ?>),
styles: styles,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
var image = '<?php echo get_template_directory_uri(); ?>/images/icon_marker.png';
var locations = [
<?php
// LOOP ARGUMENTS
$args = array( 'post_type' => 'cbd_dealers', 'posts_per_page' => -1, 'orderby' => 'menu_order', 'order' => 'ASC' ); // -1 Shows ALL Posts
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
// CUSTOM CONTENT
$dealerStreetAddress = get_post_meta($post->ID,"dealerStreetAddress",true);
$dealerCity = get_post_meta($post->ID,"dealerCity",true);
$dealerState = get_post_meta($post->ID,"dealerState",true);
$dealerZipCode = get_post_meta($post->ID,"dealerZipCode",true);
$dealerCoords = get_post_meta($post->ID,"dealerCoords",true);
$dealerPhoneNumber = get_post_meta($post->ID,"dealerPhoneNumber",true);
$dealerLink = get_post_meta($post->ID,"dealerLink",true);
?>
{
latlng : new google.maps.LatLng<?php echo $dealerCoords; ?>,
info: '<style>a{color:#000000 !important;}a:hover{color:#DCB54F !important;}</style><strong style="line-height:25px;display:block;width:230px;"><?php the_title(); ?></strong><?php echo $dealerStreetAddress; ?><br /><?php echo $dealerCity; ?>, <?php echo $dealerState; ?> <?php echo $dealerZipCode; ?><br /><?php echo $dealerPhoneNumber; ?><br />View Website'
},
<?php /* END WHILE AND RESET QUERY */ endwhile; wp_reset_query(); ?>
];
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: locations[i].latlng,
icon: image,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i].info);
infowindow.open(map, marker);
}
})(marker, i));
}
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
document.body.appendChild(script);
}
function set_map_center(lat, lng) {
var myLatLng = new google.maps.LatLng(lat, lng);
infowindow.open(map,marker);
map.setCenter(myLatLng);
map.setZoom(12);
infowindow.open(map, marker);
}
window.onload = loadScript;
</script>
Thanks to Suvi's comment, i understand better.
First off, you will need to store all of your markers in an array when you create them. Then in your set_map_center function, you can scan through the markers to find a matching Lat/Lng, and then trigger that marker's click event.
To trigger the marker click event:
google.maps.event.trigger(markers[i], 'click');
Here is how I check for a lat/lng match
function set_map_center(lat, lng){
var pos = new google.maps.LatLng(lat, lng)
for(var i=0;i<markers.length;i++){
if(markers[i].position.equals(pos))
google.maps.event.trigger(markers[i], 'click');
}
}
JSFiddle Example
EDIT: Basically like the ASDA Store Locator
I have a store locator where when you type in your postcode and it shows the 3 stores that are close to you. From this 3 markers appear on the map for each location. The data is pulled in from a MYSQL database and that is where the lat and long is stored. What i am after is have the results numbered say 1,2 and 3 and a different marker with the numbers 1 2 and 3 on so they know what result store relates to what marker. I know how to create markers but i am im unsure how to apply this. Here is my code that i have used to show the results and display the markers on the map:
PHP
<?php which displays the results down the side of the map..
if(isset($stores)){
foreach($stores as $store){ ?>
<div class="stores">
<p class="name"><?php echo $store['name']; ?></p>
<p class="address"><?php echo $store['address']; ?></p>
<p class="address"><?php echo $store['postcode']; ?></p>
</div>
<php number_format($store['distance'],2) ?> miles
<?php
}
}
?>
To get the markers for each result on the map i obviously used javascript:
function initialize() {
var locations = [];
<?php
$count = 0;
foreach($stores as $store){
?>
locations.push(['<?php echo $store['name'] ?>','<?php echo $store['lat'] ?>','<?php echo $store['lng'] ?>','<?php echo $count++; ?>']);
<?php
}
?>
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(55.136319, -2.504183),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
}
google.maps.event.addListener(marker, 'click', (function() {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
google.maps.event.addDomListener(window, 'load', initialize);
This displays the default marker but if i was to declare each marker a image or colour, how do i apply it to the array results for each result? Any guidance would be appreciated.
Markers have an icon property where you can change the image that is used. I would recommend having a marker icon for each location with the index in the name (e.g. marker0.png, marker1.png, marker2.png). Then set the icon when you create the marker.
Google has different ones you can grab, but the urls are not as easy to find all the time. Here is a site that lists some of them: http://jg.org/mapping/icons.html
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: "url/to/the/marker/marker" + i + ".png",
map: map
});
}
I did this a while back with the following approach. When I declared my marker I used.
var marker = createMarker(map,point,label,html,rank,type);
Then
function createMarker(map, latlng, title, html, rank,type) {
var image = new google.maps.MarkerImage("images/goldPin.png",
// This marker is 24 pixels wide by 37 pixels tall.
new google.maps.Size(24, 37),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,37.
new google.maps.Point(15, 20));
var shadow = new google.maps.MarkerImage('images/goldPinShadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(31, 37),
new google.maps.Point(0,0),
new google.maps.Point(15, 20));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
switch (type) {
case "general":
var markerOptions = {
title: title,
shadow: shadow,
icon: image,
shape: shape,
position: latlng,
map: map
}
break;
/*
more types go here
*/
}
var marker = new google.maps.Marker(markerOptions);
google.maps.event.addListener(marker, "click", function() {
var infowindowOptions = {
content: html
}
var infowindow = new google.maps.InfoWindow(infowindowOptions);
setInfowindow(infowindow);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, "mouseover", function() {
});
google.maps.event.addListener(marker, "mouseout", function() {
});
return marker;
}
Let me not forget to mention that I used custom markers with my application which I strongly encourage.
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.