|
JavaScript - No Marker On Google Maps (api3) Script
Would someone as be so kind to check my google maps script. For some reason the map is centering yet no marker (and info window) is being displayed.
I'm (foolishly) using php to echo out the lat and long and the info window content yet everything seems to output okay...... Did a quick java de-bug and found the following error; Quote: Error: myLatlng is not defined Source File: xxx Line: 45 However the lat and lng are echo' out okay and the map is centered on the co-ordinates???? Much thanks!!!! Code: <script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(53.989723,-7.361760),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var contentString = '<div>'+
'<h3 id="fs">Alcohol Early Intervention Project (Cavan/Monaghan)</h1>'+
'<div>'+
'<p>Click here for a streetview map</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Alcohol Early Intervention Project (Cavan/Monaghan)"
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(marker, 'click', function() {
if (map.getZoom() == 13) {
map.setZoom(4);
} else {
map.setZoom(8);
}
});
}
</script>
Similar TutorialsHi i am building a gps tracker and i am having problems with the marker manager. I am pretty new to this stuff and i am sure my problem is quiet simple i just cant get my head around it. I posted my java script . If anyone can help it will be much appreciated. I am adding marker data from an xml file generated. I want to add a marker manager to the already existing markers generated to i add extra functionality on them. thanks for your time. Code: Enter code here...<script type="text/javascript">
//<![CDATA[
//////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
///////////////////////////////CUSTOM ICONS/////////////////////////////
//////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
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;
//////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
///////////////////////////////END OF ICONS//////////////////////////////
/////////////////////////////////////////////////////////////////////////
var map;
//
//////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
//////////////////////////////////////INITIALIZE MAP////////////////////
function initialize () {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.enableScrollWheelZoom();/////ENABLES SCROLL ZOOM CONTROL ON THE MAP////
map.addControl(new GLargeMapControl());//ADD LARGE MAP CONTROL///////
map.addControl(new GMapTypeControl());///ADD MAP TYPE COTNROL///////
map.addMapType(G_PHYSICAL_MAP);//ADD PHYSICAL TERAIN MAP TYPE////////
//Latitude & Longitude of starting point in map, x,y,z--z represents zoom in the map//
map.setCenter(new GLatLng(51.4595389, -0.243908),18);
}
}
//////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
//////////////////////////////////////END OF MAP/////////////////////////
//////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
GDownloadUrl("xtract.php", function(data) {
var xml = GXml.parse(data);
// Init the MarkerManager
var batch =[];
mgr = new MarkerManager(map);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("id");
var address = markers[i].getAttribute("date");
var type = markers[i].getAttribute("mode");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lon")));
var marker = createMarker(point, name);
batch.push(marker);
mgr.addMarkers(batch,50);
mgr.refresh();
map.addOverlay(marker);
request.send(null);
}
});
/////////////////////////////////////////////////////
///////////////////////////////////////////////////////
function createMarker(posn, title, icon) {
var marker = new GMarker(posn, {title: title, icon: icon, draggable:true });
GEvent.addListener(marker, 'dblclick', function() { mgr.removeMarker(marker) } );
return marker;
}
function deleteMarker() {
var markerNum = parseInt(document.getElementById("id").value);
mgr.removeMarker(allmarkers[markerNum]);
}
function clearMarkers() {
mgr.clearMarkers();
}
function reloadMarkers() {
setupOfficeMarkers();
}
</script>
hi, on my site: http://www.sbannister.co.uk/helix_site2/contact.html I am able to move my logo on my map, is there any way of locking it's position? thanks I am having a problem with google maps api. i have created a map which will place a marker on the location entered in a text field. There are two other fields on the page called latbox and lngbox which i want to be populated when the marker is initially created and when it is dragged. so far im just working on the dragged and cant get it working although trying multiple ways. Code: <script type="text/javascript">
var geocoder;
var map;
var marker=false;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable: true
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addListener(marker, 'drag', function(event){
document.getElementById("latbox").value = event.latLng.lat();
document.getElementById("lngbox").value = event.latLng.lng();
});
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:320px; height:320px"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW" />
<input type="button" value="Locate" onclick="codeAddress()" />
</div>
<div id="latlong">
<p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p>
<p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p>
</div>
</body>
</html>
Any Help greatly appreciated Right I have google maps connected to a database which holds stockists and their information. The user enters their postcode and radius and markers are put on the map of stockists in the radius of their postcode. I have this all working fine and the database chucks the information into an xml file fine. The problem im having is displaying the information in the pop up window of the marker. PHP Code: <script type="text/javascript"> //<![CDATA[ var map; var geocoder; function load() { if (GBrowserIsCompatible()) { geocoder = new GClientGeocoder(); map = new GMap2(document.getElementById('map')); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(54.622978,-2.592773), 5); } } function searchLocations() { var address = document.getElementById('addressInput').value; geocoder.getLatLng(address, function(latlng) { if (!latlng) { alert(address + ' not found'); } else { searchLocationsNear(latlng); } }); } function searchLocationsNear(center) { var radius = document.getElementById('radiusSelect').value; var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; GDownloadUrl(searchUrl, function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName('marker'); map.clearOverlays(); var sidebar = document.getElementById('sidebar'); sidebar.innerHTML = ''; if (markers.length == 0) { sidebar.innerHTML = 'No results found.'; map.setCenter(new GLatLng(54.622978,-2.592773), 5); return; } var bounds = new GLatLngBounds(); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute('name'); var address1 = markers[i].getAttribute('address1'); var address2 = markers[i].getAttribute('address2'); var town = markers[i].getAttribute('town'); var county = markers[i].getAttribute('county'); var postcode = markers[i].getAttribute('postcode'); var telephone = markers[i].getAttribute('telephone'); var distance = parseFloat(markers[i].getAttribute('distance')); var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lng'))); var marker = createMarker(point, name, address1, address2, town, postcode, telephone); map.addOverlay(marker); var sidebarEntry = createSidebarEntry(marker, name, town, distance); sidebar.appendChild(sidebarEntry); bounds.extend(point); } map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); }); } function createMarker(point, name, address1, address2, town, postcode, telephone) { var marker = new GMarker(point); var html = '<b>' + name + '</b> <br/>' + address1 + '<br />' + address2 + '<br />' + town + '<br />' + postcode + '<br />' + telephone; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } function createSidebarEntry(marker, name, town, distance) { var div = document.createElement('div'); var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + town; div.innerHTML = html; div.style.cursor = 'pointer'; div.style.marginBottom = '5px'; GEvent.addDomListener(div, 'click', function() { GEvent.trigger(marker, 'click'); }); GEvent.addDomListener(div, 'mouseover', function() { div.style.backgroundColor = '#eee'; }); GEvent.addDomListener(div, 'mouseout', function() { div.style.backgroundColor = '#fff'; }); return div; } //]]> </script> Example Xml: PHP Code: <markers> <marker name="AVON ANGLING CTR" address1="348 WHITEHALL ROAD" address2="ST. GEORGES" town="BRISTOL" county="AVON" postcode="BS5 7BP" telephone="01179 517250" lat="51.464432" lng="-2.546576" distance="0"/> <marker name="SCOTT TACKLE" address1="42 SOUNDWELL ROAD" address2="STAPLE HILL" town="BRISTOL" county="AVON" postcode="BS16 4QP" telephone="01179 567371" lat="51.477093" lng="-2.507667" distance="1.8894400025753"/> </markers> the only information displayed in the sidebar entry is the name and distance and on the marker just the name. I've been looking for a solid solution for how to add numbers to markers. Most that I've seen involve an asp page with a post back of an image based on the query string. I am trying to do something like what MarkerClusterer does. Here is an example: http://google-maps-utility-library-v...e_example.html I've looked over their code and cant seem to pull out the part where it adds the numbers to the marker, I'm still new to jquery. Here is a link to the source code: http://google-maps-utility-library-v...erclusterer.js any help would be appreciated. how can I get my custom markers to show? I have got my code in place, everything works except, doesn't show my custom marker?! here is my code: Code: <script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// A function to create the marker and set up the event window
// Dont try to unroll this function. It has to be here for the
function closure
// Each instance of the function preserves the contends of a
different instance
// of the "marker" and "html" variables which will be needed
later when the event triggers.
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
marker.image = "images/google-pin.png";
marker.shadow = "images/google-pin-shadow.png";
marker.iconSize = new GSize(90, 70);
marker.shadowSize = new GSize(90, 70);
markerOptions = { icon:marker };
});
return marker;
}
// Display the map, with some controls and set the initial
location
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(51.3992613899243,-1.32983778443008),
8);
// Set up three markers with info windows
var point = new GLatLng(51.4769752333875,-2.53517458867092);
var marker = createMarker(point,'<div style="width:240px">Some
stuff to display in the First Info Window. With a <a href="http://
www.econym.demon.co.uk">Link<\/a> to my home page<\/div>')
map.addOverlay(marker);
var point = new GLatLng(50.8391656924497,-0.154312843280554);
var marker = createMarker(point,'Some stuff to display in
the<br>Second Info Window')
map.addOverlay(marker);
var point = new GLatLng(50.8340528225749,-0.259947032613667);
var marker = createMarker(point,'Some stuff to display in
the<br>Third Info Window')
map.addOverlay(marker);
var point = new GLatLng(51.5168824045344,-2.6926718990779);
var marker = createMarker(point,'Some stuff to display in
the<br>Third Info Window')
map.addOverlay(marker);
var point = new GLatLng(50.954582894922,-0.145016932400171);
var marker = createMarker(point,'Some stuff to display in
the<br>Third Info Window')
map.addOverlay(marker);
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this
browser");
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
</script>
I've been trying for some time now to create some code which dynamically adds markers to a google map. I've now managed this but I still have a slight problem I think with the javascript side of things. I've included a snippet of the code which shows 2 markers on the map. They should be 2 different markers but they are the same, and the contents of the popup bubble should be each individual postcode, but they both show the same postcode. Does anyone have any ideas? Thanks Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Geocoding UK Postcodes with Google APIs Demo</title>
<style type="text/css">
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#map {
width: 100%;
height: 100%;
z-index:1;
}
</style>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var icon2 = new GIcon();
icon2.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
icon2.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon2.iconSize = new GSize(32, 32);
icon2.shadowSize = new GSize(37, 34);
icon2.iconAnchor = new GPoint(16, 32);
icon2.infoWindowAnchor = new GPoint(16, 0);
var icon3 = new GIcon();
icon3.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
icon3.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon3.iconSize = new GSize(32, 32);
icon3.shadowSize = new GSize(37, 34);
icon3.iconAnchor = new GPoint(16, 32);
icon3.infoWindowAnchor = new GPoint(16, 0);
var localSearch = new GlocalSearch();
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap(document.getElementById("map"));
map.setCenter(new GLatLng(55.100651, -4.664941), 6);
}
}
function createMarker(point2,html) {
var marker2 = new GMarker(point2,icon2);
GEvent.addListener(marker2, "click", function() {
marker2.openInfoWindowHtml(html, {
noCloseOnClick: true
});
});
return marker2;
}
function createMarker2(point3,html) {
var marker3 = new GMarker(point3,icon3);
GEvent.addListener(marker3, "click", function() {
marker3.openInfoWindowHtml(html, {
noCloseOnClick: true
});
});
return marker3;
}
//]]>
</script>
</head>
<body>
<div id="map"><script type="text/javascript">document.write(initialize())</script></div>
<script type="text/javascript">
var thetext = 'LL58 8HU'
localSearch.execute("LL58 8HU, UK");
localSearch.setSearchCompleteCallback(null,
function() {
map.addOverlay(createMarker(new GLatLng(localSearch.results[0].lat,localSearch.results[0].lng),thetext));
});
</script>
<script type="text/javascript">
var thetext2 = 'RG4 6UT'
localSearch.execute("RG4 6UT, UK");
localSearch.setSearchCompleteCallback(null,
function() {
map.addOverlay(createMarker2(new GLatLng(localSearch.results[0].lat,localSearch.results[0].lng),thetext2));
});
</script>
</body>
</html>
Hello, I have the code below but for some reason it only works when adding the marker to the map (map click). When I drag the marker around, the coordinates and closest address don't update. This code works if I add the marker straight in the initialize() function but not when I add it within the addListenerOnce for map click event. I want to be able to add 1 marker to the map, and update its address and coordinates when dragging the marker around. If someone can help me sort this out... Thanks in advance! Code: <html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
var marker;
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('No matching address found.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(45.397, 2.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListenerOnce(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
title: 'Nouveau marqueur',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(event.latLng);
geocodePosition(event.latLng);
});
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<style>
#mapCanvas {
width: 500px;
height: 400px;
float: left;
}
#infoPanel {
float: left;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
</style>
<div id="mapCanvas"></div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div id="info"></div>
<b>Closest matching address:</b>
<div id="address"></div>
</div>
</body>
</html>
Hi guys, Hopefully a really quick question. I'm a JS novice, and am looking for a way to output the coordinates of a Google maps marker into the value of two text fields, one for latitude and one for longitude. The code below is a simple location search which returns a result with a draggable marker. Currently, the coordinates in both text fields update when the location search is performed, but not when the marker is dragged to a new location afterwards. Does anyone know the code to simply update the coordinates each time the marker is dropped on a new location? Code: <html>
<head>
<style type="text/css">
#map_canvas {
width:444px;
height:444px;
overflow:hidden;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA-Kl-tQOj5PlnOlXQmp2N9hTg6Fn61x9hOlvMvn6kV4ENK8yRfBShRuj-nulocuk2Alx9JmFKKV4zwA" type="text/javascript"></script>
<script type="text/javascript">
var map;
var geocoder;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(52.8068752, -1.6430344),6);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.enableScrollWheelZoom();
geocoder = new GClientGeocoder();
// Update current position info
}
// addAddressToMap() is called when the geocoder returns an
// answer. It adds a marker to the map with an open info window
// showing the nicely formatted version of the address and the country code.
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Whoops, we couldn't find that address!");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point,{draggable:true});
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address + '<br /><span class="smallgrey">Zoom in and drag the marker to exactly where the point is</span>');
document.getElementById("latitude").value = point.lat();
document.getElementById("longitude").value = point.lng();
}
}
// showLocation() is called when you click on the Search button
// in the form. It geocodes the address entered into the form
// and adds a marker to the map at that location.
function showLocation() {
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
}
// findLocation() is used to enter the sample addresses into the form.
function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
</script>
</head>
<body onload="initialize()">
<form action="#" onsubmit="showLocation(); return false;"><input type="text" name="q" size="35" /> <input type="submit" name="find" value="Search"/></form>
<div id="map_canvas">And pin the <strike>tail</strike> marker on the <strike>donkey</strike> map:<br /></div>
Latitude: <input class="required" type="text" name="latitude" id="latitude" value="53.34870686020199" /> <br />
Longitude: <input class="required" type="text" name="longitude" id="longitude" value="-6.267356872558594" />
</body>
</html>
Many thanks in advance, I appreciate anyone who wants to help out! I need help making this script output a route on the map on top of the dollar amount it outputs right now. Here is a link to what im working on http://stallionshockey.org/testweb/ Any help would be greatly appreciated Thanks, Josh Hello i have a problem i need to resolve here is the script Code: script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" />
<input type="submit" value="Go!" />
</p>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</form>
</body>
its all working well but i need to use it differently. Is there a way to make the form submit automatically , i already have the address and i will <php> it from my database. i want that the map will show in the page as soon as the user clicked on an ad(real estate ad). Basically what we need here is: To know how to call the functions and give the address from the database. <body onload="initialize()" onunload="GUnload()"> <form action="#" onsubmit="showAddress(this.address.value); return false"> <p> <input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" /> <input type="submit" value="Go!" /> </p> <div id="map_canvas" style="width: 500px; height: 300px"></div> </form> </body> Is there a way just to use this command without the form onsubmit="showAddress(this.address.value); return false">? And give the address as a variable ? and when the page is uploading it will have already passed the address and the map will show Danny Hi, I'm having a head against wall session and would appricate some help with modifying a google maps script.... I need the orginal script below; Code: //<![CDATA[
$(document).ready(function() {
function initialize() {
var myLatlng = new google.maps.LatLng(54.2385,-6.9846);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = '<div id="content">'+
'<h3><? echo $org_name;?></h3>'+
'<div>'+
'<p><a href="#" class="bluelink">Link to profile'+
'#</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '<? echo $org_name;?>',
clickable: false,
icon: 'http://google-maps-icons.googlecode.com/files/school.png'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
// Function added to help reset map and container boundaries
$("#showMap").click(function() {
$("#tab2").css({'display':'block'});
$("#map_canvas").css({'width':'630px', 'height':'400px'});
initialize();
//alert('showMap Clicked!');
});
initialize();
});
changed to Code: //<![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(53.943155, -7.437744),
zoom: 13,
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/>" + 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() {}
//]]>
In order for the amended code to work I need to include the; // Function added to help reset map and container boundaries $("#showMap").click(function() { $("#tab2").css({'display':'block'}); $("#map_canvas").css({'width':'630px', 'height':'400px'}); initialize(); //alert('showMap Clicked!'); }); initialize(); so that the map will load in a jquery tab... PLEASE HELP ME!!! Hey Guys, I am currently building a web app that uses Google Maps V3 api. You select a check box which then shows a marker on the map. My issue is, when you select and the marker is placed, I need the map to focus to that point, it currently embeds but doesn't focus. Is there a particular function I could use to achieve this? My current code is shown below: Code: var locations = [
// Longitude, Latitue, Content, Country Code, City Name
[51.481383, -3.114967, holidayOverlay, 'UK', 'Cardiff'],
[52.362393, 4.893379, holidayOverlay, 'NL', 'Amsterdam'],
[48.852314, 2.350089, holidayOverlay, 'FR', 'Paris'],
[40.18884, -3.716812, holidayOverlay, 'SP', 'Madrid'],
[53.800651, -4.064941, holidayOverlay, 'IT', 'Rome'],
[42.041134, 1.889648, holidayOverlay, 'SP', 'Costa Brava'],
[36.79334, 27.234421, holidayOverlay, 'GR', 'Kos'],
[37.014581, -7.933888, holidayOverlay, 'PT', 'Algarve'],
[28.358776, -14.05426, holidayOverlay, 'PT', 'Fuerteventura'],
[29.046854, -13.589973, holidayOverlay, 'SP', 'Lanzarote'],
];
// Only create marker when checked
for (i = 0; i < locations.length; i++) {
if (locations[i][4] == location) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map,
icon: plotImage
});
var title = locations[i][4];
var content = locations[i][2];
}
}
I have left a lot of the code out to save you a headache. Thanks. Guy help me for the solution... how to refresh the markers only every x... below are my full scripts.... Code: <?php
define('INCLUDE_CHECK',1);
include "dbconnect.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="host_entry/js/jquery-1.7.1.min.js"></script>
<!-- Google Map JS -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false" type="text/javascript"></script>
</head>
<div id="map_canvas" style="top:55px;left:13px;"> <!-- Map will display -->
<div id="map"> <!-- Fullscreen Loading & Fullscreen Buttons area -->
</div>
<!-- Fullscreen Loading & Fullscreen Buttons area Ends -->
</div><!-- Map Ends display -->
<script type="text/javascript">
/**function show_data()
{
$('#map').load('index.php');
}
setInterval('show_data()', 60000);
**/
var locations = [
<?php
$query="SELECT * from host_entry";
$result=mysql_query($query)or die(mysql_error());
{
if ($num=mysql_numrows($result))
{
$i=0;
while ($i < $num)
{
$id=mysql_result($result,$i,"id");
//$host_type=mysql_result($result,$i,"host_type");
$host_name=mysql_result($result,$i,"host_name");
$host_server=mysql_result($result,$i,"host_server");
$host_status=mysql_result($result,$i,"host_status");
$host_lapt=mysql_result($result,$i,"host_lapt");
$host_long=mysql_result($result,$i,"host_long");
$host_circuit=mysql_result($result,$i,"host_circuit");
$host_hotline=mysql_result($result,$i,"host_hotline");
if($host_status==0)
echo "['<div class=container style=width:400px;><div class=page-header><h4>$host_name</h4></div>', $host_lapt, $host_long],";
$i++;
}
}else {
echo "<h3 align='center'><font color='#ff0000'>No Content Found</font></h3>";
}
}
?>
];
// Setup the different icons and shadows
var iconURLPrefix = 'host_entry/img/';
var icons = [
iconURLPrefix + 'p_red_alert.png'
]
var icons_length = icons.length;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: -5,
center: new google.maps.LatLng(3.1215681, 101.71180140000001),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var marker;
var markers = new Array();
var iconCounter = 0;
var infowindow = new google.maps.InfoWindow({
maxWidth: 400,
maxHeight: 350,
});
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3], locations[i][4], locations[i][5]),
map: map,
animation: google.maps.Animation.BOUNCE,
icon : icons[iconCounter],
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(
locations[i][0]
);
infowindow.open(map, marker);
setTimeout(function(){infowindow.close();}, '5000');
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= icons_length){
iconCounter = 0;
}
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>
</body>
</html>
do i need to apply setInterval on the marker? how to apply it on the marker so it refresh every X second... please help for the solution.... Hi, I am trying to add markers to Google Maps, they are working fine but some of the markers are of same location, thus Google Map will show only one marker for them. Is it possible to show all markers no matter if they are of same location. Help is much appreciated. Thanks 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. 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. I'm completely at a loss how to embed a map with the new google maps api setup. I found a snippet of code that I dropped in with some small database variables pulled in and was done. Then an error came that the API was no good. So I went in and set up an anaccount, got an api and now I just simply have no clue what their instructions are saying I need to do. Gah! Here's what I originally had: I now have a Client ID, client secret and stuff. But no clue how to set up this url, etc. Code: </script>
<script src="//maps.google.com/maps?file=api&v=2&key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(<?php echo $c_row['location_longitude']; ?>,<?php echo $c_row['location_latitude']; ?>), 13);
// Add the latitude/longitude marker to the map
var point = new GLatLng(<?php echo $c_row['location_longitude']; ?>,<?php echo $c_row['location_latitude']; ?>);
map.addOverlay(new GMarker(point));
map.setUIToDefault();
}
}
</script>
<b>Map:<br><br><div id="map_canvas" style="width: 500px; height: 300px; z-index:4000;border-width:medium;border-color:#030;"></div></b>
I am using jMapping(http://vigetlabs.github.com/jmapping/) for using jQuery with google maps. What I'm trying to do is add an event listener so that when you click on a marker it will call a function I made within the jMapping function. Does anyone have any clues? everything I've tried doesn't work.
|
|||||||