|
JavaScript - Php Error When Using Javascript To Output Markers On Google Maps
Firstly I know this is a PHP issue yet it is within javascript and IMO is the root cause of the problem.
I'm trying to output markers from a search query of locations from my database, onto a Google Map (api v.3) using a tut I found http://tips4php.net/2010/10/use-php-...g-data-on-map/ When adding this to my page I'm getting Undefined index:errors. I have changed the variables in the php part of the script to suit my database yet have left everything else alone, cant figure out why I'm still getting a blank map???? Please help.... My code with errors being shown at bottom; Code: <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
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: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
<br />
<b>Notice</b>: Undefined index: name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>: Undefined index: lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>: Undefined index: info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(53.994709, ,'<b></b><br/>');
<br />
<b>Notice</b>: Undefined index: name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>: Undefined index: lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>: Undefined index: info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(53.985416, ,'<b></b><br/>');
<br />
<b>Notice</b>: Undefined index: name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>: Undefined index: lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>: Undefined index: info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(53.985416, ,'<b></b><br/>');
<br />
<b>Notice</b>: Undefined index: name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>: Undefined index: lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>: Undefined index: info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(0.000000, ,'<b></b><br/>');
<br />
<b>Notice</b>: Undefined index: name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>: Undefined index: lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>: Undefined index: info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(0.000000, ,'<b></b><br/>');
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
Similar TutorialsI pulled this code from Google's example section to make markers on a v3 Google Maps API (I have added my own lat/long points and corresponding event listeners, of course, but this is still the spirit of the code):
Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var map_center = new google.maps.LatLng(39.2,-84.479381);
var store1 = new google.maps.LatLng(39.112456,-84.574779);
var store2 = new google.maps.LatLng(39.314153,-84.261379);
var store3 = new google.maps.LatLng(39.197099,-84.667579);
var store4 = new google.maps.LatLng(39.16836,-84.479381);
var myOptions = {
zoom: 10,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker1 = new google.maps.Marker({
position: store1,
map: map,
title:"Store 1"
});
var marker2 = new google.maps.Marker({
position: store2,
map: map,
title:"Store 2"
});
var marker3 = new google.maps.Marker({
position: store3,
map: map,
title:"Store 3"
});
var marker4 = new google.maps.Marker({
position: store4,
map: map,
title:"Store 4"
});
google.maps.event.addListener(marker1, 'click', function() {
map.set_center(store1);
map.set_zoom(16);
});
google.maps.event.addListener(marker2, 'click', function() {
map.set_center(store2);
map.set_zoom(16);
});
google.maps.event.addListener(marker3, 'click', function() {
map.set_center(store3);
map.set_zoom(16);
});
google.maps.event.addListener(marker4, 'click', function() {
map.set_center(store4);
map.set_zoom(16);
});
}
</script>
This works without fail, but when I try to use a javascript array to hold my values and loop my way through the marker creation like so: Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var map_center = new google.maps.LatLng(39.2,-84.479381);
var store_locations = new Array();
var temporary_stuff = new Array();
store_locations[0] = "39.112456,-84.574779";
store_locations[1] = "39.314153,-84.261379";
store_locations[2] = "39.197099,-84.667579";
store_locations[3] = "39.16836,-84.479381";
var myOptions = {
zoom: 10,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for(i=0;i<store_locations.length;i++){
var marker_string = "position: "+new google.maps.LatLng(store_locations[i])+", map: map, title:\"Store "+(i+1)+"\";";
temporary_stuff[i] = new google.maps.Marker(marker_string);
}
var markers = new Array();
for(i=0;i<temporary_stuff.length;i++){
var the_marker = "position: temporary_stuff[" + i + "], map: map, title:\"Store " + (i+1) + "\";";
markers[i]= new google.maps.Marker(the_marker);
}
}
</script>
I get a blank map. Here's a link to the test file: http://rowsdower.freehostia.com/map_test.php It's not throwing up any errors in Firefox's developer or in IE but there it sits, a blank map. I'm sure this isn't clean or optimized code, but it looks correct to me. I've color-coded the code above to show what "for" loops are being used to try to replace which code. Hopefully that makes this more sensible. I haven't even tried to add the listeners yet since I can't get the markers to appear. Can anyone tell me why this isn't working or point me in a more productive direction? Is there a better way already out there that I haven't noticed? Hi, not sure if this is quite the right forum to ask this, but it is a javascript function after all so I thought I'd give it a shot. Here's the problem: I have an array of latitude/longitude data. I need to make a marker appear on the map for each lat/lng pair. But it won't. If I ask the function to print out the coordinates instead of marking them on the, map, it works fine. I don't get an error message either way, so I'm stuck. The page displays the map but without any markers. Here's the code of the function that should add markers: Code: //adds markers to the map
function addMarkers(locarray) {
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locarray.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locarray[i][0], locarray[i][1]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('some words');
infowindow.open(map, marker);
}
})(marker, i));
}
}
Here's the initialize function (called on body load): Code: function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = codeAddress("<?php echo $_POST['postal']; ?>");
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
geocoder and map are declared as global variables. The codeAddress function returns lat and lng of the place I want to center the map around, it's been tested and works perfectly. And here is the script that declares the array and calls the addMarkers function: Code: <script type='text/javascript'>
var locations = [
[-33.890542, 151.274856],
[-33.923036, 151.259052],
[-34.028249, 151.157507],
];
addMarkers(locations)
</script>
Does anyone see anything wrong with this? I am trying to make google maps zoom to fit markers, I made this super simple example that should work but blows up when it comes time to create the LatLngList Array. I'm using this guys code that everyone says works:http://blog.shamess.info/2009/09/29/...e-maps-api-v3/ Code: <!DOCTYPE html>
<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>Google Maps JavaScript API v3 Example: Marker Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBFaOhZzSroCxheTo9stXtkicU3bNHwcho&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
// Make an array of the LatLng's of the markers you want to show
var LatLngList = array (new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017));
// 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);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:650px;height:550px;"></div>
</body>
</html>
Hello I need some help with Google Maps please. Im using Google Maps API V3. So I can create a simple map but what I need is to have two markers (which are quite far apart) on the map. For example these markers are called 'Marker 1' and 'Marker 2'. Below the map I would have 2 links called for example 'Marker 1 link' and 'Marker 2 link'. When the map loads, 'Marker 1' is visible and centered. Now to move to 'Marker 2' on the map, I would click the link under the map. And vice versa. A good example is http://arts.brighton.ac.uk/contact-u...aculty-of-arts I tried but failed when I tried this guys answer on this website: http://stackoverflow.com/questions/2...utside-the-map Any help to create this is greatly appreciated! Fellow Coders, I am trying to follow this tutorial (http://econym.org.uk/gmap/basic16.htm) What I would like to do is have in my XML file, a parameter for a total (some random number) and I want to plot a marker based on this number. So like, if the total="5" then marker would be red, if it was 10, marker would be green. I see in the tutorial that they are storing the possible markers in an array, I get that. What I don't know how to do is plot the markert depending on the value of the total field in the XML file. Hi guys. I have posted about this before on here but I'm still having a lot of issues. MY GOAL - I have a database with a bunch of items and each has latitude, longitude and a category (all the items are within 1 city). I want to have a page that will show a google map, display a marker based on the lat/lng and the image of the marker should be customized based on the category of the row. For example, some rows have a 'food' category and some have a 'health' category - I have specific images I want displayed for each image. I need a script that will plot a marker for each item in my db. I have never used Google maps API before and I'm thinking V3 is what I need to use. Can someone help fill in the code below? PHP Code: $query=mysql_query("SELECT * FROM table"); while($row=mysql_fetch_array($query)){ $lat=$row['lat']; $lng=$row['lng']; $category=$row['category']; //SET MARKER PICTURE TO $category //ADD MARKER TO MAP } Can anybody help out with the code? I don't know javascript that well and I have tried about 40 different things and get nothing but a blank page! THANK YOU SO MUCH Hi guys, so far any values recorded in my database are shown on the map: http://www.vfrflight.co.uk/new2/phpsqlajax_map_v3.html Code: <!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">
//<![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(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
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 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/>" + address;
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: 500px; height: 300px"></div>
</body>
</html>
However, how do i let people place markers when a button is pressed. I believe this is the code to place markers when left click occurs: Code: <!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>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(37.4419, -122.1419);
var options = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
var html = "<table>" +
"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Type:</td> <td><select id='type'>" +
"<option value='bar' SELECTED>bar</option>" +
"<option value='restaurant'>restaurant</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
}
function saveData() {
var name = escape(document.getElementById("name").value);
var address = escape(document.getElementById("address").value);
var type = document.getElementById("type").value;
var latlng = marker.getPosition();
var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
"&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
document.getElementById("message").innerHTML = "Location added.";
}
});
}
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.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id="message"></div>
</body>
</html>
Help would be appreicated very much! I cannot combine the codes to save my life... Hey all, I was wondering if someone would be able to help me with a problem I've been having. I'm attempting to find coordinates for several addresses at a time. I'm using a for-loop to loop through an array of addresses. I figured it would be best to have a separate function to evaluate the coordinate given an address, and just call it in every loop. Note that my code below is simplified (I removed the for loop because that's not where I'm having trouble). I know that the issue is probably because I'm trying to return a value from an anonymous function... I tried making the variable global, I tried having a return line from within the anonymous function, nothing has worked... any tips? Thanks -- Code follows Code: function initialize(){
var geocoder = new google.maps.Geocoder(); // creating a new geocode object
var locCood = findcood('44106', geocoder);
}
function findcood(addr, geocoder)
{
var cood;
if (geocoder) {
geocoder.geocode({'address': addr}, function(results, status, cood){
if (status == google.maps.GeocoderStatus.OK)
cood = results[0].geometry.location;
else {
cood = null;
alert("Geocode was not successful for the following reason: " + status);
}
});
}
else
{
alert("No Geocode");
cood = null;
}
alert(cood);
return cood;
}
I have a working script and I want to add a toogleGroup command (which I have) to the end of the working script so that I can toggle map markers with radio buttons. Probably a simple addition. WORKING CODE: Code: //<![CDATA[
var iconPink = new GIcon();
iconPink.image = 'http://www.golfinggreys.com/img/ggmap_icon_attraction.png';
iconPink.shadow = '';
iconPink.iconSize = new GSize(24, 31);
iconPink.shadowSize = new GSize(0, 0);
iconPink.iconAnchor = new GPoint(11, 30);
iconPink.infoWindowAnchor = new GPoint(5, 1);
var iconOrange = new GIcon();
iconOrange.image = 'http://www.golfinggreys.com/img/ggmap_icon_accomm.png';
iconOrange.shadow = '';
iconOrange.iconSize = new GSize(24, 31);
iconOrange.shadowSize = new GSize(0, 0);
iconOrange.iconAnchor = new GPoint(11, 30);
iconOrange.infoWindowAnchor = new GPoint(5, 1);
var iconPurple = new GIcon();
iconPurple.image = 'http://www.golfinggreys.com/img/ggmap_icon_dining.png';
iconPurple.shadow = '';
iconPurple.iconSize = new GSize(24, 31);
iconPurple.shadowSize = new GSize(0, 0);
iconPurple.iconAnchor = new GPoint(11, 30);
iconPurple.infoWindowAnchor = new GPoint(5, 1);
var iconGreen = new GIcon();
iconGreen.image = 'http://www.golfinggreys.com/img/ggmap_icon_golf.png';
iconGreen.shadow = '';
iconGreen.iconSize = new GSize(24, 31);
iconGreen.shadowSize = new GSize(0, 0);
iconGreen.iconAnchor = new GPoint(11, 30);
iconGreen.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://www.golfinggreys.com/img/ggmap_icon_golfr.png';
iconRed.shadow = '';
iconRed.iconSize = new GSize(24, 31);
iconRed.shadowSize = new GSize(0, 0);
iconRed.iconAnchor = new GPoint(11, 30);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var iconGrey = new GIcon();
iconGrey.image = 'http://www.golfinggreys.com/img/ggmap_icon_services.png';
iconGrey.shadow = '';
iconGrey.iconSize = new GSize(24, 31);
iconGrey.shadowSize = new GSize(0, 0);
iconGrey.iconAnchor = new GPoint(11, 30);
iconGrey.infoWindowAnchor = new GPoint(5, 1);
var iconBlue = new GIcon();
iconBlue.image = 'http://www.golfinggreys.com/img/ggmap_icon_shopping.png';
iconBlue.shadow = '';
iconBlue.iconSize = new GSize(24, 31);
iconBlue.shadowSize = new GSize(0, 0);
iconBlue.iconAnchor = new GPoint(11, 30);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["attraction"] = iconPink;
customIcons["accomm"] = iconOrange;
customIcons["dining"] = iconPurple;
customIcons["golf"] = iconGreen;
customIcons["golfr"] = iconRed;
customIcons["services"] = iconGrey;
customIcons["shopping"] = iconBlue;
var markerGroups = { "attraction": [], "accomm": [], "dining": [], "golf": [], "golfr": [], "services": [], "shopping": []};
function load() {
if (GBrowserIsCompatible()) {
var i = 0;
// Create the map
// Make sure this element has the same ID as your div
map = new GMap2(document.getElementById("googlemap"));
// Add controls for moving and zooming the map. Use GSmallMapControl for small maps
map.addControl(new GSmallMapControl());
// Add controls for switching between regular and satellite views
map.addControl(new GMapTypeControl());
// Set the starting position and zoom level when the map loads
map.setCenter(new GLatLng(51.920556,-103.798828), 7);
// Read the data from XML
var request = GXmlHttp.create();
// Open the XML file
request.open("GET", "east_central.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
// Obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// Obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var name = markers[i].getAttribute("name");
var phone = markers[i].getAttribute("phone");
var address = markers[i].getAttribute("address");
var city = markers[i].getAttribute("city");
var state = markers[i].getAttribute("state");
var url = markers[i].getAttribute("url");
var type = markers[i].getAttribute("type");
var marker = createMarker(point,name,phone,address,city,state,url,type);
map.addOverlay(marker);
}
}
}
request.send(null);
// Function to create the marker and set up the event window
function createMarker(point,name,phone,address,city,state,url,type) {
var marker = new GMarker(point, customIcons[type]);
markerGroups[type].push(marker);
var markerhtml = "";
if (name != "") markerhtml += "<b>" + name + "</b><br>";
markerhtml += address + ", " + city + ", " + state + "<br>";
if (phone != "") markerhtml += "p:" + phone + "<br>";
if (url != "") markerhtml += "<a href=\"" + url + "\">COURSE DETAILS</a>";
// Add a click event to each marker which will open the HTML window
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(markerhtml);
});
i++;
return marker;
}
}
// Javascript alert for older browsers where Google Maps isn't supported
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
}
//]]>
THE ADDITION Code: function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (marker.isHidden()) {
marker.show();
} else {
marker.hide();
}
Just need to properly add that to the end. I am okay at editing and adapting codes, but I don't know the sytax. Tried JSLINT but still confused. Probably quite simple. Thanks hello all, what i would like to implement is the following : http://mon.grnet.gr/network/maps/lite/?load&ip but, the problem is that, although the numerical data that show the traffic volume passing through a link are available to me, i do not have clue on how i can display them onto the map ... ? i would be thankful, if you could give me a piece of advice. I'm trying to show an array of markers which, when clicked, will show an infowindow and also a circle with a radius, the size of which is also part of the array. I've got as far as showing the markers, the infoboxes and the circles, but am struggling with toggling the circles. I haven't quite made up my mind if I want the circles to all be initially on or off, I guess that depends how many I end up with... Here's what I have so far: - Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps API Tests</title>
<style type="text/css">
html {font-family:Tahoma,verdana,sans-serif; font-size:0.75em;}
p {font-weight:bold;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
function initialize() {
var myLatlng = new google.maps.LatLng(36.637484, -121.51057);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var sites = [
['Google', 37.422117, -122.083856, 'http://www.google.com/', 402336],
['Yahoo', 34.030194, -118.47479, 'http://www.yahoo.com/', 201168]
];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
html: '<p>'+sites[0]+'</p><a href="'+sites[3]+'">Web Link</a>'
});
var circle = new google.maps.Circle({
map: map,
radius: sites[4],
fillColor: '#12a3eb',
fillOpacity: 0.15,
strokeColor: '#0177b3'
});
circle.bindTo('center', marker, 'position');
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Any help would be much appreciated! Hey Guys, I am building an application that uses Google Maps V3 and currently using JavaScript to show and hide markers. I have two check boxes, they have the same location but show if a user has been there or if they are going there. To hide the markers, I am doing the following function: Code: function hideMarker(location) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].currentLocation == location) {
gmarkers[i].setVisible(false);
}
}
infowindow.close();
}
Problem is, because two markers have the same location, it will hide both. I am passing a been and going value to gmarkers array (gmarkers[i].been etc) so wanted to say something like.. If been is unchecked only hide the been marker. Else if going is unchecked only hide the going marker. Else hide both markers. Anyone have any ideas how I can separate the been and going markers? I can't get my head around the logic Cheers. Hi, Not sure where to post this. I currently have a web app which utilises Google Maps & Directions, however some of these maps and directions will be used in pdf creation with tcpdf. The problem arises with the fact that tcpdf doesn't read javascript and therefore cant show the map. Any ideas on what I can do to compensate? Hello chaps, I'm Nick I'm in the process of creating a web app using Google Maps. What the following code should do is retrieve some xml code from a page, then load it on to the map, using the geocoder to get lat/long values from the address. Most of it's just Google code I've mauled about with. The map loads, but none of the markers load on to the map. I've gone to the php page which generates the XML for the markers and all is fine there. I know the code is a messy crock of junk, I was sort of concentrating on trying to make it work then I'll sort out the nomenclature. Bad methodology, I know. Code: var id = null;
var adress = null;
var image = null;
var point = null;
var pointer = null;
var geocoder = null;
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(52.2725, -0.8825), 12);
geocoder = new GClientGeocoder();
GDownloadUrl("phpsqlajax_genxml3.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
id = markers[i].getAttribute("ID");
address = markers[i].getAttribute("ADDRESS");
image = markers[i].getAttribute("IMAGE");
var point3 = showAddress(address);
var marker = createMarker(pointer, id, address, image);
map.addOverlay(marker);
}
});
}
}
function showAddress(address) {
point = geocoder.getLatLng(address,function(point) {
if (!point) {
alert(address + " not found");
}
else
{
pointer = new GLatLng(point);
return pointer;
}
});
}
function createMarker(pointer, id, address, image) {
var marker4 = new GMarker(pointer);
var html = "<b>" + id + "</b> <br/>" + address + "</b> <br/>" + image;
GEvent.addListener(marker, 'click', function() {
marker4.openInfoWindowHtml(html);
});
return marker4;
}
Thanks in advance I am no javascript coder so apologies for what may be a simple issue, I have a php page that pulls MySQL marker locations I have tried using examples for bounds etc but the map isn't centered or zoomed, it instead seems to center over the Pacific and minimum zoom level (For the url below it should be centered over the Devon region of the UK and zoomed in) the page where you can see the end result is he http://www.peugeotcentral.co.uk/modu...tches&Region=1 I did have some issues in my code whereby I was using deprecated function of GPoint for passing locations but one of the group mods kindly pointed this out and this was replaced with GLatLng but the fault is still there any help much appreciated, I do have the source code for the php if required For my Javascript class, we are to take a code from the book and add on to it. In this code, I decided to add custom markers and info windows for each location. I got the info windows to work but they are the same for each marker. How can I fix this? Here is what I have: Code: <script>
function init() {
var myLatLng = new google.maps.LatLng(36.795209, -3.339844);
var myOptions = {
zoom: 2,
center: myLatLng
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
//This is Location 1
var image = 'image1.jpg';
var canyon= new google.maps.Marker({
position: new google.maps.LatLng(35.9766,-113.7717),
map: map,
title:"Grand Canyon, USA"});
var infoWindow = new google.maps.InfoWindow({
content: "Grand Canyon, USA"});
google.maps.event.addListener(canyon, 'click', function(){
infoWindow.open(map, canyon); });
//This is Location 2
var image = 'image2.jpg';
var paricutin= new google.maps.Marker({
position: new google.maps.LatLng(19.5948,-102.4331),
map: map,
title:"Paricutin, Mexico"});
var infoWindow = new google.maps.InfoWindow({
content: "Paricutin, Mexico"});
google.maps.event.addListener(paricutin, 'click', function(){
infoWindow.open(map, paricutin); });
//This is Location 3
var image = 'image3.jpg';
var victoria= new google.maps.Marker({
position: new google.maps.LatLng(-17.928,25.826),
map: map,
title:"Victoria Falls, Zimbabwe"});
var infoWindow = new google.maps.InfoWindow({
content: "Victoria Falls, Zimbabwe"});
google.maps.event.addListener(victoria, 'click', function(){
infoWindow.open(map, victoria); });
//This is Location 4
var image = 'image4.jpg';
var reef= new google.maps.Marker({
position: new google.maps.LatLng(-17.98,146.76),
map: map,
title:"Great Barrier Reef, Austrailia"});
var infoWindow = new google.maps.InfoWindow({
content: "Great Barrier Reef, Austrailia"});
google.maps.event.addListener(reef, 'click', function(){
infoWindow.open(map, reef); });
//This is Location 5
var image = 'image5.jpg';
var harbor= new google.maps.Marker({
position: new google.maps.LatLng(-22.8424,-43.1502),
map: map,
title:"Harbor Rio De Janerio, Brazil"});
var infoWindow = new google.maps.InfoWindow({
content: "Harbor Rio De Janerio, Brazil"});
google.maps.event.addListener(harbor, 'click', function(){
infoWindow.open(map, harbor); });
//This is Location 6
var image = 'image6.jpg';
var everest= new google.maps.Marker({
position: new google.maps.LatLng(27.98783,86.92476),
map: map,
title:"Mount Everest Peak, Nepal"});
var infoWindow = new google.maps.InfoWindow({
content: "Mount Everest Peak, Nepal"});
google.maps.event.addListener(everest, 'click', function(){
infoWindow.open(map, everest); });
}
google.maps.event.addDomListener(window, 'load', init);
</script>
Hi, I'm not sure where I have translated this incorrectly. I have one google map embedded on my page which works fine. But I wanted to add a second one. I thought the easiest way to do this would be to have a second page which is called later on with all the details on it for the second map. However although I think (this I presume is where I went wrong) I have replicated the instructions correctly the place holder for the second map just remains blank. This is the code for my called page with the instructions for the second map: PHP Code: <?php echo $_POST['Map'] . '<br />'; ?> <div id="placemap_canvas"></div> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html {height:250px} body {height:250px} #placemap_canvas {width:100%; height:150px;} </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" /> </script> <script type="text/javascript"> var latlng = new google.maps.LatLng ( <?php include("dbconnect.php"); $result = mysql_query("SELECT * FROM regions WHERE RegionPId='{$_POST['Map']}'"); while($row = mysql_fetch_array($result)){ echo $row['maplink']; } mysql_close($con); ?> ); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("placemap_canvas"), myOptions); } </script> And this is the script of the main page, just in case I would be better off keeping them both in one place. Code: <head>
<script type="text/javascript">
function loadSubPlace(File,ID,Msg,Eile,EID,Esg){
loadXMLDoc1(File,ID,Msg);
var mimer = setTimeout(function(){loadXMLDoc1(Eile,EID,Esg)},5000);
}
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {height:250px}
body {height:250px}
#map_canvas {width:30%; height:250px;}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng (
<?php
include("dbconnect.php");
$result = mysql_query("SELECT * FROM countries
WHERE Country='{$_SESSION['Country']}'");
while($row = mysql_fetch_array($result)){
echo $row['Map'];
}
mysql_close($con);
?>);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div class="countryright" id="map_canvas">
include("dbconnect.php");
$snowball=explode(';',$_POST['syringa']);
$turnsol=$snowball[1];
$violet =$snowball[2];
$wakerobin=$snowball[3];
global $turnsol;
global $violet;
global $wakerobin;
echo '<center><b><big>' . $wakerobin. '</big></b></center><br /><br />';
$result=mysql_query("SELECT * FROM regions
WHERE country='{$turnsol}' AND region='{$violet}' AND place='{$wakerobin}' AND sub !=''
ORDER BY sub ASC");
while($row = mysql_fetch_array($result)){
$wheat="{$row['RegionPId']};{$turnsol};{$violet};{$wakerobin};{$row['sub']}";
$tigerlilly=$row['RegionPId'];
echo '<input type="button" class="button3" name="place" id="place" value="' . $row['sub'] . '" onclick="loadSubPlace(\'getPlace.php\',\'txtHintPlaceSub\',\'hepatica=' . urlencode($wheat) . '\',\'getPlaceMap.php\',\'placemapcanvas\',\'Map=' . urlencode($tigerlilly) . '\');" />';
}
echo '<input type="button" class="button3" name="addplace" id="addplace" value="Add Place" onclick="loadXMLDoc1(\'getAddPlaceSub.php\',\'txtHintPlaceSub\', encodeURI(\'addsubplace=' . $_POST['syringa'] . '\'));" />';
echo '<br /><br /><div id="txtHintPlaceSub"></div><br /><br />';
mysql_close($con);
?>
I've cut out the script that doesn't relate to this so I hope I haven't missed anything important. http://www.cricketcoachingclinics.com.au/ I am having a problem with site in IE7 this is identified as a problem?? Can someone at least rule out this js error? This is js generated when adding google maps Error Class is not defined <CODE>var GoogleMap=Class.create(Widget,{widgetIdentifier:"com-apple-iweb-widget-GoogleMap",initialize:function($super,instanceID,widgetPath,sharedPath,sitePath,preferences,runningI nApp) {if(instanceID){$super(instanceID,widgetPath,sharedPath,sitePath,preferences,runningInApp);}},mapReq uestTemplate:'center=#{center}&zoomLevel=#{zoomLevel}&showZoom=#{showZoom}&mapType=#{mapType}&locate dAddress=#{locatedAddress}&locatedAddressPoint=#{locatedAddressPoint}&showInfo=#{showInfo}&language= #{language}&showGoogleBar=#{showGoogleBar}',iframeTemplate:'<iframe id="#{instanceID}-iframe" name="#{instanceID}-iframe" src="#{mapURL}?#{mapRequest}" width="100%" height="100%" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>',mapURL:'http://www.me.com/st/1/sharedassets/maps/iweb2/',onload:function() {var mapRequestTemplate=new Template(this.mapRequestTemplate);var mapRequest=mapRequestTemplate.evaluate({center:this.escapedPreferenceForKey("center"),zoomLevel:this .escapedPreferenceForKey("zoomLevel"),showZoom:this.escapedPreferenceForKey("showZoom"),mapType:this .escapedPreferenceForKey("mapType"),locatedAddress:this.escapedPreferenceForKey("locatedAddress"),lo catedAddressPoint:this.escapedPreferenceForKey("locatedAddressPoint"),showInfo:this.escapedPreferenc eForKey("showInfo"),language:this.escapedPreferenceForKey("language"),showGoogleBar:this.escapedPref erenceForKey("showGoogleBar")});var iframeTemplate=new Template(this.iframeTemplate);var iframeText=iframeTemplate.evaluate({instanceID:this.instanceID,mapRequest:mapRequest,mapURL:this.map URL});this.div().innerHTML=iframeText;if(this.preferences&&this.preferences.postNotification) this.preferences.postNotification("BLWidgetIsSafeToDrawNotification",1);},escapedPreferenceForKey:fu nction(key) {var value=this.preferenceForKey(key);if(value!==undefined) value=encodeURIComponent(value);return value;}});</CODE> Hi I have just started looking at the Google maps, and have atutorial that will get the co-ordinates. What I want this to do, is then populate two fields on a form one called longitude and one called latitude Code: function usePointFromPostcode(postcode, callbackFunction) {
localSearch.setSearchCompleteCallback(null,
function() {
if (localSearch.results[0]) {
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
var point = new GLatLng(resultLat,resultLng);
callbackFunction(point);
}else{
alert("Postcode not found!");
}
});
localSearch.execute(postcode + ", UK");
}
Any ideas/tips would be be much appreciated Hey all I'm quite a newbie at javascript and I'm trying to have links to google maps markers. I have a page with my embeded google maps on it and some markers. What I'm basically looking to do is have a web page with a menu down the side and when you click the menu items, the google maps markers would pop up on the map. For example, city attractions down a side menu and when you click say restaurants, the markers would pop up the location restaurants in a certain place, then you could click pubs and the restaurant markers would dissapear and the pub markers would appear. Can anyboy help me with this or even direct me to some code that would help. Thanks all. |
|||||||