Google maps API3, javascript
Question
What would be the easiest way to add a marker for the address entered from the code written bellow. The code reads an address and returns the three closest stores within the database onto a map. However it doesn't show the address the user entered and I would like it to in a different color.
I'm sorry for how it pasted from the clipboard.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var markers = [];
var infoWindow;
var locationSelect;
var geocoder = null;
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function () {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none") {
google.maps.event.trigger(markers[markerNum], 'click');
}
};
}
function showAddress(addressInput) {
if (geocoder) {
geocoder.getLatLng(
addressInput, function (point) {
if (!point) {
alert(addressInput + " not found");
} else {
map.setCenter(point, 15);
var marker1 = new GMarker(point, {
draggable: true
});
map.addOverlay(marker1);
GEvent.addListener(marker1, "dragend", function () {
marker1.openInfoWindowHtml(marker1.getLatLng().toUrlValue(6));
});
GEvent.addListener(marker1, "click", function () {
marker1.openInfoWindowHtml(marker1.getLatLng().toUrlValue(6));
});
GEvent.trigger(marker1, "click");
}
});
}
}
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function (data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")), parseFloat(markerNodes[i].getAttribute("lng")));
createOption(name, distance, i);
createMarker(latlng, name, address);
bounds.extend(latlng);
}
map.fitBounds(bounds);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function () {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
function createMarker(latlng, name, address) {
var html = "<b>" + name + "</b> <br/>" + address;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
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 parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="load()">
<div>Adress:
<input type="text" id="addressInput" size="10" />Product:
<input type="text" id="ProductInput" size="10" />
<select id="radiusSelect">
<option value="3" selected>3mi</option>
<option value="5">5mi</option>
<option value="10">10mi</option>
<option value="25">25mi</option>
</select>
<input type="button" onclick="searchLocations(); showAddress(this.address.value); "
value="Search" />
<br>
<input type="checkbox" name="currentLocation" value="currentLocation"
/>Use Current Location</div>
<div>
<select id="locationSelect" style="width:500;visibility:hidden"></select>
</div>
<div id="map" style="width: 500; height: 500"></div>
</body>
</html>
2 answers
solution1
0 2012-02-16 04:51:40
Use Google's geocoding service to convert an address string into a (Latitude, Longitude) coordinate. Add the coordinate onto your map as a marker. Use a custom marker image if you want a different color/style marker. I have done this before and all the information you need should be in the Google Maps Api reference and the official tutorials.
solution2
0 ACCPTED 2012-02-16 12:09:33
in phpsqlsearch_genxml.php file create marker for location ie
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name", "Location");
$newnode->setAttribute("address", "Location");
$newnode->setAttribute("lat", $center_lat);
$newnode->setAttribute("lng", $center_lng);
$newnode->setAttribute("distance", 0);
Then iterate through the rows, adding XML nodes for each
in your function createMarker someting like
if(address=="Location"){
var marker = ??,
}
else{
var marker = !!?,
}
Where ?? and !! are your chosen markers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Error with google maps api3
Javascript Google Maps API3 Polygon Multiple Circles
Google maps API3, polyline is not in the center and not zoomed
How to Clear Markers in Google Maps API3
Google maps API3 center map
Google maps Api2 to google maps api3
Google Maps JavaScript API3 marker.setMap(null) Not Hiding the Marker
How can get the distances between 2 points via Google Maps Javascript API3?
Set Icon Type by Button Click with Google Maps API3
Google Maps API3 InfoWindow and query if Marker is in polygon or not
Related Tags