I am attempting to generate an optimized route using Bing Maps re this article, https://learn.microsoft.com/en-us/bingmaps/rest-services/examples/optimized-waypoints-example#example, but am struggling to know how to render the resultant route on screen. For normal routes I am using this routine which seems to work well enough...
function traceRoute(){
infobox.setOptions({visible:false});
if(Object.entries(fromCoords).length !== 0 && Object.entries(toCoords).length !== 0){
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: fromCoords.title, location: new Microsoft.Maps.Location(fromCoords.lat,fromCoords.long) });
var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: toCoords.title, location: new Microsoft.Maps.Location(toCoords.lat,toCoords.long) });
directionsManager.addWaypoint(waypoint1);
directionsManager.addWaypoint(waypoint2);
// Set the element in which the itinerary will be rendered
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel') });
directionsManager.calculateDirections();
});
}
}
However, I cannot figure out how to do they same with an optimised API call. Is it possible to add a list of way points to the directionsManager and set an Optimised flag?
Digging through the documentation and trying to reverse engineer the directions module/manager, there doesn't appear to be any support for this option in the module.
One solution would be to call the REST service directly to get the optimized ordering of the waypoints, then pass those ordered waypoints into the directions manager. This will allow you to leverage the rendering capabilities of the directions module which will make development a lot easier.
Here is a code sample:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=<Your Bing Maps Key>'></script>
<script>
var map, directionsManager;
//Get optimized waypoint orders based on time with traffic, and only get minimial information back.
var directionsUrl = 'http://dev.virtualearth.net/REST/V1/Routes/Driving?&optimizeWaypoints=true&optimize=timeWithTraffic&routeAttributes=excludeItinerary&key={key}';
function GetMap()
{
map = new Microsoft.Maps.Map('#myMap', {});
//Load the directions module.
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
//Create an instance of the directions manager.
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
directionsManager.setRequestOptions({ routeOptimization: 'timeWithTraffic' });
//Pass in waypoints to calculate optimized order.
calculateOptimizedOrder([
new Microsoft.Maps.Directions.Waypoint({ address: '86 Pike Pl, Seattle, WA 98101' }),
new Microsoft.Maps.Directions.Waypoint({ address: 'Troll Ave N, Seattle, WA 98103' }),
new Microsoft.Maps.Directions.Waypoint({ address: '3800 Montlake Blvd NE, Seattle, WA 98195' }),
new Microsoft.Maps.Directions.Waypoint({ address: '1000 4th Ave, Seattle, WA 98104' }),
new Microsoft.Maps.Directions.Waypoint({ address: '5400 Ballard Ave NW, Seattle, WA 98107' })
]);
});
}
function calculateOptimizedOrder(waypoints) {
map.getCredentials((sessionId) => {
//Add the key to the REST request.
var request = [directionsUrl.replace('{key}', sessionId)];
//Add the waypoints to the REST request.
for(var i=0;i<waypoints.length;i++){
var wp = waypoints[i];
request.push('&wp.', i, '=');
var loc = wp.getLocation();
var add = wp.getAddress();
if(loc) {
request.push(loc.toString());
} else if(add){
request.push(encodeURIComponent(add));
} else {
throw 'No waypoint info provided';
}
}
//Combine the request parts to create the URL.
var url = request.join('');
//Process the request.
fetch(url).then(r => r.json()).then(r => {
var orderedWaypoints = [];
var waypointsOrder = r.resourceSets[0].resources[0].waypointsOrder;
for(var i=0;i<waypointsOrder.length;i++){
//Extract the number from the waypoint order text.
var idx = parseInt(waypointsOrder[i].replace('wp.',''));
//Cross reference the original waypoints.
orderedWaypoints.push(waypoints[idx]);
}
//Calculate and render directions using the optimized order.
calculateDirections(orderedWaypoints);
alert('Optimized order: ' + waypointsOrder.join(','));
});
});
}
function calculateDirections(orderedWaypoints) {
for(var i=0;i< orderedWaypoints.length;i++){
directionsManager.addWaypoint(orderedWaypoints[i]);
}
//Calculate directions.
directionsManager.calculateDirections();
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>
</html>
Related
We succeeded in displaying nearly 10 million pieces of data on a map using the Google Map API and Deck GL library.
However, I don't like the price and license policy of the Google Map API, so I'm going to change it to Bing Map.
It is difficult to find examples or examples of using Bing Map and Deckgl together on the Internet.
I understand that Deckgl can be used interworking with any base map if it meets a specific condition, but I'm not sure what the specific condition is.
What I want to know is as follows.
Can I use it with deckgl?
Which map do you prefer if you use Deckgl between OSM and BingMap?
Can you handle the map on BingMap? (getCenter, setCenter, etc.)
Is there a Map Event? (Clicked Event, Dragged Event, etc.)
Is 3D building or setTilt possible like MapBox?
There is no example for this currently, but this could be achieved by adding a canvas to the map as a custom layer. Here is an example: https://bingmapsv8samples.azurewebsites.net/#Canvas%20Layer
Alternatively, consider using Azure Maps. The Azure Maps web SDK wraps MapLibre (open source community fork of Mapbox), Deck.gl was originally writen for Mapbox, so it's not too difficult to access the underlying API in the Azure Maps web SDK and get deck.gl working. I've experimented with this a bit in the past. Here is a quick example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.js"></script>
<script src="https://unpkg.com/deck.gl#8.4.9/dist.min.js"></script>
<script type='text/javascript'>
//https://blog.mapbox.com/coloring-lidar-4522ca5a7186
var map;
var arcData, currentStyle;
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-85, 35],
zoom: 5,
pitch: 30,
view: 'Auto',
style:'grayscale_dark',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Load external data.
fetch('https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/arc/counties.json')
.then(response => response.json())
.then(({ features }) => {
//Add deck gl layer to map.
map.layers.add(new AzureMapsLayer({
id: 'arc',
data: calculateArcs(features),
getSourcePosition: d => d.source,
getTargetPosition: d => d.target,
getSourceColor: [255, 0, 0],
getTargetColor: [0, 255, 0],
getWidth: 2,
type: deck.ArcLayer
}));
});
});
}
function calculateArcs(data, selectedCounty) {
if (!data || !data.length) {
return null;
}
if (!selectedCounty) {
selectedCounty = data.find(f => f.properties.name === 'New York, NY');
}
const { flows, centroid } = selectedCounty.properties;
const arcs = Object.keys(flows).map(toId => {
const f = data[toId];
return {
source: centroid,
target: f.properties.centroid,
value: flows[toId]
};
});
const scale = Math.random();
arcs.forEach(a => {
a.gain = Math.sign(a.value);
a.quantile = scale;
});
return arcs;
}
class AzureMapsLayer extends atlas.layer.Layer {
constructor(options) {
super(options.id);
this._mbLayer = new deck.MapboxLayer(options);
this.source = new atlas.source.DataSource();
}
/**
* Internal method for building the mapbox layers.
* Because this layer only wraps others this is always empty.
* #internal
*/
_buildLayers() {
return [this._mbLayer];
}
/**
* Internal method for getting the ids of the mapbox layers this layer produces.
* Because this layer wraps others we return their ids.
* #internal
*/
_getLayerIds() {
return [this.id];
}
_getSource() {
return this._mbLayer.source;
}
/**
* #internal
*/
_getSourceIds() {
var ids = new Set();
ids.add(this.source.getId());
return ids;
}
}
</script>
<style>
html, body, #myMap {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body onload="GetMap()">
<div id="myMap"></div>
</body>
</html>
Here is what the above code generates:
The content in the popup created through the variable "popupCustom" is displaying string instead of referencing the specified field {IN_COUNTRY}. I followed the ArcGIS JS API Popup Tutorials, & can't see what my error is in failing to grab the attributes associated with that field. Here's the code -- any help is greatly appreciated!
*note: feature layer url within "Cyber_Areas" variable points to REST URL for referenced Feature Class.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Search widget with multiple sources - 4.6</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"esri/widgets/Legend",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer",
"esri/widgets/Search",
"esri/widgets/LayerList",
"esri/PopupTemplate",
"dojo/on",
"dojo/domReady!"
], function(
Map,
MapView,
BasemapToggle,
Legend,
TileLayer,
FeatureLayer,
Search,
LayerList,
PopupTemplate,
on
) {
var Cyber_Areas = new FeatureLayer({
url: "*inserturl*",
outFields: ["IN_COUNTRY"],
popupTemplate: popupCustom
});
var map = new Map({
basemap: "osm"
});
map.add(Cyber_Areas);
var view = new MapView({
container: "viewDiv",
map: map,
center: [-87.172865, 34.077613], // lon, lat
zoom: 16
});
var searchWidget = new Search({
view: view,
popupOpenOnSelect: false
});
view.ui.add(searchWidget, {
position: "top-left",
index: 0
});
var popupCustom = searchWidget.on('select-result', function(evt){
//console.info(evt);
view.popup.open({
location: evt.result.feature.geometry, // location of the click on the view
title: "Service Availability:", // title displayed in the popup
content: "<p><b>{IN_COUNTRY}"
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
From your code you are mixing the popup template value with when to display it. And those are two different things.
First, you are not setting correctly the popup template of the layer. It should be a PopupTemplate.
It seems to me that in you code the layer definition should be something like this,
var Cyber_Areas = new FeatureLayer({
url: "*inserturl*",
popupTemplate: {
outFields: ["IN_COUNTRY"],
title: "Service Availability:",
content: "<p><b>{IN_COUNTRY}</b></p>"
}
});
Now if you don't want the default behavior of the popup (left click on a feature), you cant disable it like this,
view.popup.autoOpenEnabled = false; // <- disable view popup auto open
And then you can open it wherever you want like this,
view.popup.open({ // <- open popup
location: evt.result.feature.geometry, // <- use map point of the event result
fetchFeatures: true // <- fetch the selected features (if any)
});
You have to understand that the fields you use in the content of the popup template are related to the layer. That is why i set in the popup of the view to fetch the results.
The issue happens during page refresh then browser is minimized or its tab with a map is inactive. Then Search Manager geocode function falls into errorCallback. Everything is working fine, if the page with the map is active (visible).
I checked e.request object in the errorCallback function and it contains correct "where" parameter, but no latitude and longitude nor any information about the error.
The issue can be reproduced in both Chrome and IE browsers.
HTML:
<div id="map" class="map" style="height:270px; width:100%"></div>
JavaScript:
<script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
<script type="text/javascript">
// global variables
var apiKey = 'API_KEY_HIDDEN',
map,
searchManager;
// sample data
var siteData = [
{"Name":"Starbucks","Address":"8400 SW Nimbus Ave 120","City":"Beaverton","State":"OR","Zip":"97008","Latitude":0,"Longitude":0},
{"Name":"Subway","Address":"12160 SW Scholls Ferry Rd","City":"Tigard","State":"OR","Zip":"97223","Latitude":0,"Longitude":0}
];
$(document).ready(function () {
GetMap();
setTimeout(function() { location.reload(); }, 60000);
});
function GetMap() {
// initialize the map
map = new Microsoft.Maps.Map(document.getElementById('map'), {
credentials: apiKey,
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 1
});
// load search module
Microsoft.Maps.loadModule('Microsoft.Maps.Search', {
callback: function () {
searchManager = new Microsoft.Maps.Search.SearchManager(map);
$.each(siteData, function(index, clientSite) {
GeoCodeQuery(clientSite);
});
}
});
}
function GeoCodeQuery(clientSite) {
// set search parameters
var searchRequest = {
where: clientSite.Address + ', ' + clientSite.City + ', ' + clientSite.State + ' ' + clientSite.Zip,
callback: function (data) {
if (data && data.results && data.results.length > 0) {
clientSite.Latitude = data.results[0].location.latitude;
clientSite.Longitude = data.results[0].location.longitude;
}
else {
console.log('No results.');
}
},
errorCallback: function (e) {
console.log('Search error.');
}
};
// make the geocode request
searchManager.geocode(searchRequest);
}
</script>
A couple of issues;
You are missing a comma after your where parameter. This would make the searchRequest an invalid JSON object. Fixing this results in the first address being correctly geocoded. The second is throwing an error and this can be for a large number of reasons, the most likely is the next point.
The Bing Maps V7 control was retired in June and will be shut down soon. Some of its backend services are already being taken down and thus it will have issues. You should be using Bing Maps V8 which replaced V7 over a year ago. You can find a migration guide here: https://social.technet.microsoft.com/wiki/contents/articles/34563.bing-maps-v7-to-v8-migration-guide.aspx
Here is my map of between points based on latitude & longitude.
if you observe the line and rail road carefully you see, the railroad is not straight line but the line i draw between pushpins are straight. But i need my drawing lines should be over the rail road. i am not sure whether it's possible or not. if possible please advice.
And here is my html code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Crossing Map</title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
var pinLayer = new Microsoft.Maps.EntityCollection();
var infoboxLayer = new Microsoft.Maps.EntityCollection();
function GetMap() {
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{
credentials:"API Key"
});
// Create the info box for the pushpin
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
infoboxLayer.push(pinInfobox);
//created variables(one variable per location)
var loc1 = new Microsoft.Maps.Location(29.775560, -95.348878);
// Add a pin to the map
var pin1 = new Microsoft.Maps.Pushpin(loc1);
pin1.Title = "Brooks St";
pin1.Description = "First PIn Descriptoin is here.";
pinLayer.push(pin1); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
var loc2 = new Microsoft.Maps.Location(29.776584, -95.348878);
// Add a pin to the map
var pin2 = new Microsoft.Maps.Pushpin(loc2);
pin2.Title = "Harrington St";
pin2.Description = "Second pin description";
pinLayer.push(pin2); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
var loc3 = new Microsoft.Maps.Location(29.778530, -95.348663);
// Add a pin to the map
var pin3 = new Microsoft.Maps.Pushpin(loc3);
pin3.Title = "Loraine St";
pin3.Description = "Third pin desc";
pinLayer.push(pin3); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin3, 'click', displayInfobox);
var loc4 = new Microsoft.Maps.Location(29.783419, -95.348963);
// Add a pin to the map
var pin4 = new Microsoft.Maps.Pushpin(loc4);
pin4.Title = "Quitman St";
pin4.Description = "pin 4 desc";
pinLayer.push(pin4); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin4, 'click', displayInfobox);
var loc5 = new Microsoft.Maps.Location(29.802104, -95.342655);
// Add a pin to the map
var pin5 = new Microsoft.Maps.Pushpin(loc5);
pin5.Title = "Calvalcade";
pin5.Description = "5th pin desc";
pinLayer.push(pin5); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin5, 'click', displayInfobox);
// Create a polyline
var lineVertices = new Array(loc1,loc2,loc3,loc4,loc5); //var lineVertices = new Array(loc1, loc2, loc3);
var line = new Microsoft.Maps.Polyline(lineVertices);
//map.setView({center:loc2, zoom: 9} );
map.setView({center:loc2, zoom: 15} );
map.entities.push(line);
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
}
function displayInfobox(e) {
pinInfobox.setOptions({
title: e.target.Title,
description: e.target.Description,
visible:true,
offset: new Microsoft.Maps.Point(0,25)
});
pinInfobox.setLocation(e.target.getLocation());
}
function hideInfobox(e) {
pinInfobox.setOptions({ visible: false });
}
</script>
</head>
<body onload="GetMap();">
<div class="wapper">
<div class="contentareaNoM safetybg">
<div id="core">
<div id='mapDiv' style="positio:relative; margin-left:100px; width:800px; height:800px;"></div>
</div>
</div>
</div>
</body>
</html>
You need to have the polyline (with coordinates) that corresponds to your railroad then you will be able to draw onto those elements. In this way, you will be able to have every point of the railway.
You can take a look at OpenStreetMap that include those element with precise geometry information where the coverage is good.
i'm busy with a school project and I have to build a web app. One function that I want to use is Google Maps and HTML5 Geo Location to pin point what the location of the mobile user is.
I have found this HTML5 Geo Location function on http://merged.ca/iphone/html5-geolocation and works very well for me. However, I want the adress data to be placed into a form so that I can submit it to my database when a mobile user Geo locates his position. This causes the marker to be saved and can be viewed on a global website.
Who know how to get the "Your address:" data loaded into a input field of a form?
Below you can find my Html file. Maybe somebody got a better suggestion perhaps?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>HTML 5 Geolocation</title>
<style>
#map {
height:300px;
width:300px;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1"); google.load("jqueryui", "1");</script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAiUzO1s6QWHuyzxx-JVN7ABSUL8-Cfeleqd6F6deqY-Cw1iTxhxQkovZkaxsxgKCdn1OCYaq7Ubz3SQ" type="text/javascript"></script>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=n2wY9mzV34Hsdslq6TJoeoJDLmAfzeBamSwJX7jBGLnjM7oDX7fU.Oe91KwUbOwqzvc-"></script>
<script type="text/javascript">
// Geolocation with HTML 5 and Google Maps API based on example from maxheapsize: http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/
//
// This script is by Merge Database and Design, http://merged.ca/ -- if you use some, all, or any of this code, please offer a return link.
var map;
var mapCenter
var geocoder;
var fakeLatitude;
var fakeLongitude;
function initialize()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition( function (position) {
// Did we get the position correctly?
// alert (position.coords.latitude);
// To see everything available in the position.coords array:
// for (key in position.coords) {alert(key)}
mapServiceProvider(position.coords.latitude,position.coords.longitude);
}, // next function is the error callback
function (error)
{
switch(error.code)
{
case error.TIMEOUT:
alert ('Timeout');
break;
case error.POSITION_UNAVAILABLE:
alert ('Position unavailable');
break;
case error.PERMISSION_DENIED:
alert ('Permission denied');
break;
case error.UNKNOWN_ERROR:
alert ('Unknown error');
break;
}
}
);
}
else
{
alert("I'm sorry, but geolocation services are not supported by your browser or you do not have a GPS device in your computer. I will use a sample location to produce the map instead.");
fakeLatitude = 49.273677;
fakeLongitude = -123.114420;
//alert(fakeLatitude+', '+fakeLongitude);
mapServiceProvider(fakeLatitude,fakeLongitude);
}
}
function mapServiceProvider(latitude,longitude)
{
if (window.location.querystring['serviceProvider']=='Yahoo')
{
mapThisYahoo(latitude,longitude);
}
else
{
mapThisGoogle(latitude,longitude);
}
}
function mapThisYahoo(latitude,longitude)
{
var map = new YMap(document.getElementById('map'));
map.addTypeControl();
map.setMapType(YAHOO_MAP_REG);
map.drawZoomAndCenter(latitude+','+longitude, 3);
// add marker
var currentGeoPoint = new YGeoPoint( latitude, longitude );
map.addMarker(currentGeoPoint);
// Start up a new reverse geocoder for addresses?
// YAHOO Ajax/JS/Rest API does not yet support reverse geocoding (though they do support it via Actionscript... lame)
// So we'll have to use Google for the reverse geocoding anyway, though I've left this part of the script just in case Yahoo! does support it and I'm not aware of it yet
geocoder = new GClientGeocoder();
geocoder.getLocations(latitude+','+longitude, addAddressToMap);
}
function mapThisGoogle(latitude,longitude)
{
var mapCenter = new GLatLng(latitude,longitude);
map = new GMap2(document.getElementById("map"));
map.setCenter(mapCenter, 15);
map.addOverlay(new GMarker(mapCenter));
// Start up a new reverse geocoder for addresses?
geocoder = new GClientGeocoder();
geocoder.getLocations(latitude+','+longitude, addAddressToMap);
}
function addAddressToMap(response)
{
if (!response || response.Status.code != 200) {
alert("Sorry, we were unable to geocode that address");
} else {
place = response.Placemark[0];
$('#address').html('Your address: '+place.address);
}
}
window.location.querystring = (function() {
// by Chris O'Brien, prettycode.org
var collection = {};
var querystring = window.location.search;
if (!querystring) {
return { toString: function() { return ""; } };
}
querystring = decodeURI(querystring.substring(1));
var pairs = querystring.split("&");
for (var i = 0; i < pairs.length; i++) {
if (!pairs[i]) {
continue;
}
var seperatorPosition = pairs[i].indexOf("=");
if (seperatorPosition == -1) {
collection[pairs[i]] = "";
}
else {
collection[pairs[i].substring(0, seperatorPosition)]
= pairs[i].substr(seperatorPosition + 1);
}
}
collection.toString = function() {
return "?" + querystring;
};
return collection;
})();
</script>
</head>
<body onLoad="initialize()">
<div id="content">
<div id="map"></div>
<p id="address"></p>
<form id="ContactForm" action="">
<p>
<label>Topic</label>
<input id="event" name="event" maxlength="120" type="text" autocomplete="off"/>
</p>
<p>
<label>Address</label>
<input id="address" name="address" maxlength="120" type="text" autocomplete="off"/>
</p>
<input id="send" type="button" value="Send"/>
<input id="newcontact" name="newcontact" type="hidden" value="1"></input>
</form>
</div>
</body>
</html>
You have to use JavaScript to set the value of address input field, this way
1- Add name attribute to the form and input.
2- document.formName.inputName.value=place.address;
Good Luck