google maps not loading, showing just a '

google maps not loading, showing just a ' - javascript

So im using PHP/MySQL to load the information into a XML which works then I have this code below that is supposed to make the map and load the xml and plug it into the markers when clicked. This is almost 100% copy pasted from googles tutorial
https://developers.google.com/maps/articles/phpsqlajax_v3#createmap
Any help would be lovely I have been struggling with this for days
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=my key&sensor=true"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng('34.153471', '-118.432123'),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("mapXML2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var desc = markers[i].getAttribute("desc");
var cap = markers[i].getAttribute("eventcap");
var cur = markers[i].getAttribute("eventcur");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + desc + "<br/>" + "Currently " + cur + "/" + cap;
//var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

You are missing closing bracket for load()
}
});
}//**ADD THIS**
function bindInfoWindow(marker, map, infoWindow, html) {

Related

PHP Google Map Real-Time Tracking

I'm completely new to programming. I just learned PHP and am now trying to do real-time tracking using Google Maps.
When I run my script I get a map with the right center location but no trip.
The script is based on:
https://developers.google.com/maps/articles/phpsqlajax_v3?csw=1
I added a call to setTimeout() for real-time tracking, which is now commented out in case its causing a problem.
I tested my newTripXml.php script and it worked stand-alone. But when I put an echo statement into it, I see that the code below is never calling it. Its in the same directory as the php file below, which I am running in XAMPP.
I'd really appreciate some help. Thanks.
<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/includes.php');
session_start();
if(Nav::getInstance()->loggedIn())
if(array_key_exists(DBAtr::TripID,$_GET))
$tripID= $_GET[DBAtr::TripID];
echo "DRAW MAP!!!!!!!!!!!!!!!!!!!<br/>";
$tripID=1;
if(!isset($tripID)) { //logout
Nav::getInstance()->logOut();
exit;
}
?>
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title><?php echo "Trip Report"; ?></title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
var markersArray = []; //global markers array
var map;
/*var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}*/
//load new map
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center : new google.maps.LatLng('33.347', '248.161'),
zoom : 13,
mapTypeId : 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
//first call to get & process inital data
downloadUrl("newTripXml.php",processXML);
}
//update map
function processXML(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
//clear markers before you start drawing new ones
resetMarkers(markersArray)
for(var i=0; i<markers.length; i++) {
var host = markers[i].getAttribute("host");
var type = markers[i].getAttribute("active");
var lastupdate = markers[i].getAttribute("lastupdate");
var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + "Host: </b>" + host + "<br>" + "<b>Last Updated: </b>" + lastupdate + "<br>";
var icon = customIcons[type] || {}; //?!!!
var marker = new google.maps.Marker({
map : map,
position : point,
icon : icon.icon,
shadow : icon.shadow
});
//store marker object in a new array
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
/*
set timeout after you finished processing & displaying first lot of markers
requests on the server can take some time, so you want to make another one
only when the first one is completed
*/
/*setTimeout(function() {
downloadUrl("newTripXml.php",processXML);
}, 5000);*/
}
//clear existing markers from map
function resetMarkers(arr) {
for(var i=0; i<arr.length; i++){
arr[i].setMap(null);
}
arr=[]; //reset marker array for next call
}
//bind info window
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
//download url
function downloadUrl(url, callback) {
var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
request.onreadystatechange = function() {
if(request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

Google Maps v3 markerclusterer InfoWindow data

I have a database driven google map v3 which uses markerclusterer, everything is working fine, but I would like to show additional data, instead of just being able to show one direct result from the database (like the id or name etc). I had it working before using markerclusterer to the level of having a hyperlink, and would like to achieve a similar result.
The code I currently have is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="JS/markerclusterer.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? sensor=false"></script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="body">
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var cluster = [];
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.4788, -3.9551),
zoom: 6,
mapTypeId: 'roadmap'
});
var infowindow = new google.maps.InfoWindow();
var min = .999999;
var max = 1.000001;
// Change this depending on the name of your PHP file
downloadUrl("gmapxml.php ", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("id");
var type = markers[i].getAttribute("town");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("longitude")));
var html = "<a href = 'profile.php?id="+address+"'>Visit "+ name +" </a></br><b>"+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i].getAttribute("id"));
infowindow.open(map, marker);
}
})(marker, i));
cluster.push(marker);
}
var mc = new MarkerClusterer(map,cluster);
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
<div id="map" style="width: 800px; height: 600px"></div>
</div>
</div>
</body></html>
Any help would be really appreciated.

auto zoom/center google maps api?

I am pretty experienced when it come to php mysql, but javascript has got me scratching my head. I am trying to add google maps to my website to show where picture in my database were taken. I got the static google map to work, but it will only display 37 markers due to the url character limitations. I followed the tutorial at google maps api docs, and i have a map that will display all the coordinates for the images in my database. My problem is that i cannot for the life of me figure out how to get the map to auto center and auto zoom to fit all of my markers. my test website for my map is at maptest. I found this tutorial on how to auto center/zoom my map by no matter where i put his code i get errors. this is the code i have for my map that does not auto zoom/center:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps/api/js? key=AIzaSyDnMkDkoCHNE7BG4eobjeMJdWWZtdZvzeg&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(42.293564,-39.07617),
zoom: 2,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml3.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
//var address = markers[i].getAttribute("address");
//var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>";
//var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
//icon: icon.icon,
//shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>

Tried this?
var fitToMarkers = function(markers) {
var bounds = new google.maps.LatLngBounds();
var length = markers.length;
for (var i = 0; i < length; i++) {
bounds.extend(new google.maps.LatLng(markers[i].lat, markers[i].lng));
map.fitBounds(bounds);
}
};

Google Map InfoWindow Content Binding

I'm new with Google map. I'm having problem in rebinding the data in my infowindow.
When I close the window using the "x" button in the upper right of the infowindow,
then open it again, all of the updated contents of the infowindow will load again to
its initial state instead of the latest update? What I want is that when I close the
infowindow, the infowindow must have the latest data.
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="D:\Program Files\xampp\xampp\htdocs\googletest\progressBar.js"></script>
<script type="text/javascript">
//<![CDATA[
var infoWindow=new Array();
var htmlPrevious=new Array();
var html;
var marker=new Array();
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(7.11425, 124.83758),
zoom: 11,
mapTypeId: 'roadmap'
});
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
html = new Array(markers.length);
infowindow = new Array(markers.length);
for (var i = 0; i < markers.length; i++) {
infoWindow[i] = new google.maps.InfoWindow;
var sender = markers[i].getAttribute("sender");
var update = markers[i].getAttribute("update_time");
var name = markers[i].getAttribute("name");
var humidity = markers[i].getAttribute("humidity");
var temperature = markers[i].getAttribute("temperature");
var rain = markers[i].getAttribute("rain");
var wind_dir = markers[i].getAttribute("wind_dir");
var wind_speed = markers[i].getAttribute("wind_speed");
var image = markers[i].getAttribute("image");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
html[i] = "<div style='display:block;' width='600' height='300' overflow='hidden'><img style='display:block;' src='"+image+" ' width='300' height='184' /> <br/><b>" + name + "</b> <br/>Sender: " + sender + "<br/>Time: " + update + "<br/> Humidity: " + humidity + "<br/>Temperature: " + temperature + "<br/>Rain: " + rain + "<br/>Wind Direction: " + wind_dir + "<br/>Wind Speed: " + wind_speed + "<div>";
htmlPrevious[i]=html[i];
marker[i] = new google.maps.Marker({
map: map,
position: point,
title: name
});
bindInfoWindow(marker[i], map, infoWindow[i], html[i]);
}//end for loop
});//downloadurl
setInterval("refreshMarker()",1000);
}
function refreshMarker(){
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var sender = markers[i].getAttribute("sender");
var update = markers[i].getAttribute("update_time");
var name = markers[i].getAttribute("name");
var humidity = markers[i].getAttribute("humidity");
var temperature = markers[i].getAttribute("temperature");
var rain = markers[i].getAttribute("rain");
var wind_dir = markers[i].getAttribute("wind_dir");
var wind_speed = markers[i].getAttribute("wind_speed");
var image = markers[i].getAttribute("image");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
html[i] = "<div style='display:block;' width='600' height='300' overflow='hidden'><img style='display:block;' src='"+image+" ' width='300' height='184' /> <br/><b>" + name + "</b> <br/>Sender: " + sender + "<br/>Time: " + update + "<br/> Humidity: " + humidity + "<br/>Temperature: " + temperature + "<br/>Rain: " + rain + "<br/>Wind Direction: " + wind_dir + "<br/>Wind Speed: " + wind_speed + "<div>";
if (html[i]!=htmlPrevious[i]){
htmlPrevious[i]=html[i];
infoWindow[i].setContent(html[i]);
google.maps.event.addListener(marker, 'click', function() {
infoWindow[i].set("marker",null);
infoWindow[i].close();
bindInfoWindow(marker[i], map, infoWindow[i], html[i]);
infoWindow[i]=infoWindow;
});
}
//infoWindow.open(map, marker);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
alert("imhere");
});
}
function closeInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'closeclick', function() {
infoWindow.close();
alert("im here");
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 1330px; height: 610px"></div>
</body>
</html>
Any help will highly appreciated.. :-)

Update your function to be:
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

Google Maps Sidebar

I am using the code below to show the marker for each location saved in MySQL database.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>All Locations</title>
<link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
var customIcons = {
0: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
1: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpfile.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var locationname = markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var finds = markers[i].getAttribute("finds");
var totalfinds = markers[i].getAttribute("totalfinds");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("osgb36lat")),
parseFloat(markers[i].getAttribute("osgb36lon")));
var html = locationname + ', No.of finds: ' + "<b>" + totalfinds + "</b>";
var icon = customIcons[totalfinds] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
title: address,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body onLoad="load()">
<div id="map"></div>
</body>
</html>
I'd now like to be able to extend the functionality of the page a little further by adding a sidebar, whereby if the user clicks on the location in the sidebar it highlights the selection with a yellow background and then pans the map to the center it on the associated marker where it opens up the info window. If the user should click on the marker, I would like the info window to open and the associated location on the sidebar to be highlighted, again, with a yellow background.
I have been researching this for sometime and I found the exact type of sidebar that I would like here http://econym.org.uk/gmap/example_map2c.html but the problem is, is that this is in v2 of the Google maps API.
I just wondered whether it would be at all possible that someone could please show me what I need to do to get this to work.
UPDATED CODE
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>All locations</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<div id="map_canvas" style="width: 900px;height: 600px;">
</div> <div id="locations"></div>
<body onload="showLocations()">
<script>
var map;
var markers = new Array();
function showLocations() {
downloadUrl("phpfile.php", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var locationname = markers[i].getAttribute("locationname");
markerId = "id_"+i;
location_list += "<div id="+markerId+">"+locationname+"</div>";
}
document.getElementById("location_list").innerHTML = location_list;
initialize_member_map("lang")
});
}
function initialize_member_map(lang) {
map = new google.maps.Map(document.getElementById("map-canvas"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom: 6,
mapTypeId: 'roadmap'
});
var xml = data.responseXML;
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var infoWindow = new google.maps.InfoWindow;
var locationname = markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var locationid = markers[i].getAttribute("locationid");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("osgb36lat")),
parseFloat(markers[i].getAttribute("osgb36lon")));
var html = "<b>" + locationname + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point,
locationid: locationid
});
markerId = "id_"+i;
bindInfoWindow(gmarker, map, infoWindow, html, markerId);
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
function scrollToMarker(index) {
map.panTo(gmarkers[index].getPosition());
}
function bindInfoWindow(marker, map, infoWindow, html, markerId) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markerObj = document.getElementById(markerId);
google.maps.event.addDomListener(markerObj, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
map.panTo(marker.getPosition());
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing(){
}
</script>
</body>
</html>

My recommendation it's looking first documentation there you can find examples and a tutorial, then go to google playgorund which have live examples. It's completely possible make the sidebar, the only thing that you need to consider it's if the sidebar will be inside or outside of the map, in the link of the playground i are the example to make you're own controls. To store the data you need to understand how are make asynchronous calls by ajax to save the locations

Develop Reference

JavaScript is the programming language of the Web.

google maps not loading, showing just a ' - javascript

You are missing closing bracket for load() } }); }//ADD THIS function bindInfoWindow(marker, map, infoWindow, html) {

Related

PHP Google Map Real-Time Tracking

Google Maps v3 markerclusterer InfoWindow data

auto zoom/center google maps api?

Google Map InfoWindow Content Binding

Google Maps Sidebar

Categories

Resources

Develop Reference

JavaScript is the programming language of the Web.

google maps not loading, showing just a ' - javascript

You are missing closing bracket for load() } }); }//**ADD THIS** function bindInfoWindow(marker, map, infoWindow, html) {

Related

PHP Google Map Real-Time Tracking

Google Maps v3 markerclusterer InfoWindow data

auto zoom/center google maps api?

Google Map InfoWindow Content Binding

Google Maps Sidebar

Categories

Resources

You are missing closing bracket for load() } }); }//ADD THIS function bindInfoWindow(marker, map, infoWindow, html) {