<!DOCTYPE html>
<head>
<title>Federation of Master Landscapers</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyD0X4v7eqMFcWCR-VZAJwEMfb47id9IZao">
</script>
<script type="text/javascript">
var map;
$(document).ready(function () {
//draw a map centered at Empire State Building Newyork
var latlng = new google.maps.LatLng(40.748492, -73.985496);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$("#btnSearch").click(function(){
//Convert Address Into LatLng and Retrieve Address Near by
convertAddressToLatLng($("#txtAddress").val());
});
});
function convertAddressToLatLng(address){
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//Empty div before re-populating
$("#divStores").html('');
searchStores(results[0].geometry.location);
} else {
$("#divStores").html(getEmbedHTML('No Stores Found','',''));
}
});
}
function searchStores(location){
var latlng = new google.maps.LatLng(location.lat(),location.lng());
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//Marker at the address typed in
var image = 'images/townhouse.png'
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
//hard coded the radius to 10 miles, if you get the value from a field if required
var parameters = 'lat='+ location.lat() + '&lng=' + location.lng() + '&radius=25';
$.ajax({
type: "POST",
dataType: 'json',
url: "store_locator.php",
data: parameters,
success: function(msg) {
//alert(msg);
displayStores(msg);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
}); /* $.ajax({ */
}
function displayStores(result){
if (result.length > 0){
for (i=0;i<result.length;i++){
//Append Store Address on Sidebar
var html = getEmbedHTML(i+1,result[i].name,result[i].address,result[i].distance);
$("#divStores").append(html);
//place a marker
var image = 'images/number_' + parseInt(i+1) + '.png';
var latlng = new google.maps.LatLng(result[i].lat,result[i].lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
var msg = 'Location : ' + result[i].name + '<br/> ';
msg = msg + 'Address : ' + result[i].address + '<br/> ';
attachMessage(marker, msg);
}
} else {
$("#divStores").html(getEmbedHTML('No Stores Found','',''));
}
}
function attachMessage(marker, msg) {
var infowindow = new google.maps.InfoWindow({
content: msg,
size: new google.maps.Size(120, 150)
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
function getEmbedHTML(seqno,name,address,distance) {
var strhtml = '<div class="row">';
strhtml = strhtml + '<img src="images/number_' + seqno + '.png" border="0" width="24" height="24" style="padding-right:10px;" /><label>' + name + '</label><br/>'
strhtml = strhtml + '<span>' + address + '</span><br/>'
strhtml = strhtml + '<span> Distance : ' + parseFloat(distance).toFixed(2) + ' miles</span><br/>'
strhtml = strhtml + '</div>';
return strhtml;
}
</script>
</head>
<body>
<?php include ('./template/header.php'); ?>
<div id="content">
<div class="wrapper">
<div id="news">
<h2>Landscaper Map Results</h2>
<div id="map_canvas"></div>
</div>
<div id="sidebar">
<h2>Find a Landscaper</h2>
<table>
<tr>
<td>Enter Address:</td>
<td><input type="text" id="txtAddress" /></td>
</tr>
<tr>
<td>Distance:</td>
<td>
<select name="radius" id="radius">
<option value="15">15 Miles</option>
<option value="25">25 Miles</option>
<option value="50">50 Miles</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Search" id="btnSearch" /></td>
</tr>
</table>
<br /><br />
<h2>Landscapers</h2>
<div id="divStores">
<!--
<div class="row">
<label>Store 1<label><br/>
<span> Address Here<span>
</div>
<div class="separator"></div>
-->
</div>
</div>
</div>
</div>
<?php include ('./template/footer.php'); ?>
</body>
My code shown above. The script is fetching the results from database and displaying in the list format. But on Page Load or submission of the form the map is not being displayed. I have puzzled for a couple of hours and not a master of javascript I have now came here to ask the question.
Thanks,
Liam.
Related
I am facing problem that I have to search particular city then searched city should be displayed on MAP as well as other nearest city should be displayed with distance line. Please help me out with code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxs&libraries=places"></script>
<script language="javascript" type="text/javascript">
var map;
var geocoder;
function InitializeMap() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function FindLocaiton(lat, lng, searchedcity, searchedcountry) {
geocoder = new google.maps.Geocoder();
InitializeMap();
var latlng = new google.maps.LatLng(lat, lng);
map.setCenter(latlng);
var marker = new google.maps.Marker({
map: map,
icon: 'https://maps.google.com/mapfiles/kml/shapes/schools_maps.png',
position: latlng
});
var infowindow = new google.maps.InfoWindow({
content: 'Location info:Location <br/>Country Name:'+ searchedcountry +'<br/>City: '+searchedcity+''
});
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
return false;
}
window.onload = InitializeMap;
</script>
</head>
<body>
<form id="form1" runat="server">
<table width="100%">
<tr>
<td>
<asp:TextBox ID="txtInputArea" runat="server" />
</td>
<td><asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Search" /></td>
</tr>
<tr><td colspan ="2">
<div id ="map" style="height: 253px" ></div></td></tr>
</table>
</form>
</body>
</html>
Further, do I need to create city mapping at my end or should I get nearby cities from Google Map API with given distance?
Thanks!
keep on getting the Missing Key error, Basically I read Latitude and longitude values form hidden columns on a aspx page, send them to a .JS file.
function showMap(param1, param2) {
var strURL = "ShowSegmentOnMap.aspx?string1=" + param1 + "&string2=" + param2 + "";
var mywindow = window.open(strURL, "", "width=1200,height=800,scrollbars=1,resizable=1,top=10,left=200");
}
The lat long are then passed to the 2nd aspx page which is suppose to simply place a Pin on map using the lat and long. I have hard coded the lat long values for now...just trying to bring the map up and not having any luck
<script src="http://maps.googleapis.com/maps/api/js?key=MY_KEY"></script>
<script>
//var latValue = document.getElementById('lblsegment1');
//var longValue = document.getElementById('lblsegment2');
var latValue = 40.76;
var longValue = 111.89;
var map;
function initMap() {
var mapProp = {
center: new google.maps.LatLng(latValue, longValue),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?callback=initMap";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<div style="width:100%; height:100%">
<div id="googleMap"></div></div>
<script>
$(document).ready(function () {
var latValue = document.getElementById('hflat').value;
var longValue = document.getElementById('hflng').value;
console.log(latValue);
var map;
initMap();
function initMap() {
position = { lat: 40.72072, lng: -111.901066 };
map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
zoomEnd: function (e) { console.log(e.sender.zoom()); },
center: position,
mapTypeId: google.maps.MapTypeId.HYBRID
});
marker = new google.maps.Marker({
position: position,
map: map,
draggable: true,
});
map.setCenter(marker.position);
marker.setMap(map);
}
});
</script>
<body>
<form id="form1" runat="server">
<div style="width: 100%; height: 100%">
<div id="map" class="col-sm-12" style="width: 95%; height: 95%;">Map</div>
</div>
<asp:HiddenField ID="hflat" runat="server" />
<asp:HiddenField ID="hflng" runat="server" />
</form>
</body>
I've followed the search and zoom example from here: https://developers.google.com/fusiontables/docs/samples/search_and_zoom
and I've managed to get the "Reset" button to work, but the "Search" button isn't working. I wondered if it was because I am using 2 layers, but I don't know how to correct by java script if that is that case. Any help appreciated. Thanks.
<html>
<head>
<meta charset="UTF-8">
<title>Smithfield Foods UK</title>
<link rel="stylesheet" type="text/css" media="all" href="FusionMapTemplate.css" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var defaultZoom = 10;
var defaultCenter = new google.maps.LatLng(52.6500, 1.2800)
var locationColumn = 'geometry'
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: defaultCenter,
zoom: defaultZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
// Initialize the first layer
var FirstLayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE'
},
map: map,
styleId: 3,
templateId: 5,
suppressInfoWindows: true
});
google.maps.event.addListener(FirstLayer, 'click', function(e) {windowControl(e, infoWindow, map);
});
// Initialize the second layer
var SecondLayer = new google.maps.FusionTablesLayer({
query: {
select: 'PostCode',
from: '1RrCcRC-1vU0bfHQJTQWqToR-vllSsz9iKnI5WEk'
},
map: map,
styleId: 2,
templateId: 2,
suppressInfoWindows: true
});
google.maps.event.addListener(SecondLayer, 'click', function(e) {windowControl(e, infoWindow, map);
});
var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h3>Density of Polish speaking population</h3>');
content.push('<p><div class="color red1"></div>=>2%<4%');
content.push('<p><div class="color red2"></div>=>4%<6%');
content.push('<p><div class="color red3"></div>=>6%<10%');
content.push('<p><div class="color red4"></div>=>10%<15%');
content.push('<p><div class="color red5"></div>=>15%<20%')
content.push('<p><img src="Smithfield Black.png" alt="Smithfield Logo" width ="120px">');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
var legend2 = document.createElement('div');
legend2.id = 'legend2';
var content2 = [];
content2.push("<h3>Smithfield Food's sales in Asda Stores</h3>");
content2.push('<p><img src="red-dot.png"><£1,000');
content2.push('<p><img src="yellow-dot.png">=>£1,000<£20,000');
content2.push('<p><img src="green-dot.png">=>£20,000<£40,000');
legend2.innerHTML = content2.join('');
legend2.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend2);
var zoomToAddress = function() {
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);
map.setZoom(10);
} else {
window.alert('Address could not be geocoded: ' + status);
}
});
};
google.maps.event.addDomListener(document.getElementById('search'), 'click', zoomToAddress);
google.maps.event.addDomListener(window, 'keypress', function(e) {
if (e.keyCode ==13) {
zoomToAddress();
}
});
google.maps.event.addDomListener(document.getElementById('reset'), 'click', function() {
map.setCenter(defaultCenter);
map.setZoom(defaultZoom);
layer.setOptions({
query: {
select: 'geometry',
from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE'
}
});
});
}
// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
<label>Enter an address:</label>
<input type="text" id="address" value="Leeds">
<input type="button" id="search" value="Search">
<input type="button" id="reset" value="Reset">
</div>
</body>
</html>
I get a "geocoder is undefined" error". Because it isn't defined.
One way to fix it would be to add this to the global scope (just before your initialize function):
var geocoder = new google.maps.Geocoder();
Or you could do it the way it is done in the example you used, it is inside the initialize function there.
working example
Having successfully followed some Fusion Map examples, with a little help from people here. I'm trying to do something I've been able to find an example of...
My map contains 3 layers, but I only want to show 2 at a time. I've therefore added a drop down box at the bottom so that you can switch between 2 of the maps. I've added a variable "SecondLayerMap", and I think (i've at least tried) to get the drop down box to change this variable. I'd never written any Java (or any other programming language) until 3 weeks ago, so it's been a steep learning curve!
[One method I've seen some people use in a similar situation has been to use 1 fusion table, but switch between data in different columns. I don't think I can do this because the geodata in each table is different and I don't want them both displayed at the same time.]
The next step will be to change one of the legends with the switch in map, but I'll take what i learn from this problem, before tackling that one...
Thanks for your help.
<meta charset="UTF-8">
<title>Smithfield Foods UK</title>
<link rel="stylesheet" type="text/css" media="all" href="FusionMapTemplate.css" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var defaultZoom = 10;
var defaultCenter = new google.maps.LatLng(52.6500, 1.2800);
var locationColumn = 'geometry';
var geocoder = new google.maps.Geocoder();
var SecondLayerMap = '1RrCcRC-1vU0bfHQJTQWqToR-vllSsz9iKnI5WEk'
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: defaultCenter,
zoom: defaultZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
// Initialize the first layer
var FirstLayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE'
},
map: map,
styleId: 3,
templateId: 5,
suppressInfoWindows: true
});
google.maps.event.addListener(FirstLayer, 'click', function(e) {windowControl(e, infoWindow, map);
});
// Initialize the second layer
var SecondLayer = new google.maps.FusionTablesLayer({
query: {
select: 'PostCode',
from: SecondLayerMap
},
map: map,
styleId: 2,
templateId: 2,
suppressInfoWindows: true
});
google.maps.event.addDomListener(document.getElementById('store'), 'change', function() {
var SecondLayerMap = this.value;
SecondLayer = new google.maps.FusionTablesLayer({
query: {
select: 'Postcode',
from: SecondLayerMap
}
});
});
google.maps.event.addListener(SecondLayer, 'click', function(e) {windowControl(e, infoWindow, map);
});
var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h3>Density of Polish speaking population</h3>');
content.push('<p><div class="color red1"></div>=>2%<4%');
content.push('<p><div class="color red2"></div>=>4%<6%');
content.push('<p><div class="color red3"></div>=>6%<10%');
content.push('<p><div class="color red4"></div>=>10%<15%');
content.push('<p><div class="color red5"></div>=>15%<20%')
content.push('<p><img src="Smithfield Black.png" alt="Smithfield Logo" width ="120px">');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
var legend2 = document.createElement('div');
legend2.id = 'legend2';
var content2 = [];
content2.push("<h3>Smithfield Food's sales in Asda Stores</h3>");
content2.push('<p><img src="red-dot.png"><£1,000');
content2.push('<p><img src="yellow-dot.png">=>£1,000<£20,000');
content2.push('<p><img src="green-dot.png">=>£20,000<£40,000');
legend2.innerHTML = content2.join('');
legend2.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend2);
var zoomToAddress = function() {
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);
map.setZoom(10);
} else {
window.alert('Address could not be geocoded: ' + status);
}
});
};
google.maps.event.addDomListener(document.getElementById('search'), 'click', zoomToAddress);
google.maps.event.addDomListener(window, 'keypress', function(e) {
if (e.keyCode ==13) {
zoomToAddress();
}
});
google.maps.event.addDomListener(document.getElementById('reset'), 'click', function() {
map.setCenter(defaultCenter);
map.setZoom(defaultZoom);
layer.setOptions({
query: {
select: 'geometry',
from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE'
}
});
});
}
// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
<label>Enter an address:</label>
<input type="text" id="address" value="Leeds">
<input type="button" id="search" value="Search">
<input type="button" id="reset" value="Reset">
</div>
<div>
<select id="store">
<option value ="1RrCcRC-1vU0bfHQJTQWqToR-vllSsz9iKnI5WEk">Store A</option>
<option value ="1QX6QXhAiHXXAcS96RSAmE1Caj8tWebc6d-1_Tjk">Store B</option>
</select>
</body>
Use setOptions() to apply the query to the layer:
google.maps.event.addDomListener(document.getElementById('store'),
'change',
function() {
var SecondLayerMap = this.value;
SecondLayer.setOptions({
query: {
select: 'Postcode',
from: SecondLayerMap
}
});
i'm new to this platform,if someone could suggest me with snippets to look into if my app requires to locate an address provided on the google map.
Javascript:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latitide = 50.445516;
var longitude = 30.452188;
var addressHiddenField = document.getElementById("<%= AddressCoordinates.ClientID %>");
if (addressHiddenField.value.length > 0) {
latitide = parseFloat(addressHiddenField.value.split(";")[0]);
longitude = parseFloat(addressHiddenField.value.split(";")[1]);
}
var latlng = new google.maps.LatLng(latitide, longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var addressHiddenField = document.getElementById("<%= AddressCoordinates.ClientID %>");
var address = document.getElementById("<%= AddressTextBox.ClientID %>").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
});
addressHiddenField.value = results[0].geometry.location.lat() + ";" + results[0].geometry.location.lng();
}
else {
addressHiddenField.value = "";
alert("Geocode was not successful for the following reason: " + status);
}
});
}
Markup:
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 100%; height: 480px;">
</div>
<div>
<asp:TextBox runat="server" ID="AddressTextBox" />
<asp:Button runat="server" ID="GetAddressCoordinatesButton" OnClientClick="codeAddress()"
Text="Search Address" />
<hr />
<asp:HiddenField runat="server" ID="AddressCoordinates" />
</div>
</form>