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>
Related
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 am trying to have my map update with the users input in the mapSearch box when they hit submit but I'm missing something that's not connecting the submit onclick function with the latlng variable.
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng =new google.maps.LatLng(-34.397,150.644);
var mapProp = {
center: latlng,
}
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
};
var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch'));
google.maps.event.addDomListener(searchBox, 'places_changed', function(){
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i=0; place=places[i]; i++){
bounds.extend(place.geometry.location);
}
});
$( "#Submit" ).click(function codeAddress(){
var address = document.getElementById("mapsearch").value;
geocoder.geocode( {'mapsearch': 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
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
});
I get a javascript error with the posted code: InvalidValueError: unknown property mapsearch on this line: geocoder.geocode( {'mapsearch': address}, (that should be 'address'):
$("#Submit").click(function codeAddress() {
var address = document.getElementById("mapsearch").value;
geocoder.geocode({
'address': address
},
code snippet:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapProp = {
center: latlng,
zoom: 3
}
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
$("#Submit").click(function codeAddress() {
var address = document.getElementById("mapsearch").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
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="Submit" type="button" value="submit" />
<input id="mapsearch" value="New York, NY" />
<div id="googleMap"></div>
how do I change the location of a marker based on address input? I know there's google places autocomplete to do the job, but the requirement is to update the map marker after filling in the address form.
JS Fiddle can be found here:
http://jsfiddle.net/fhft7bfg/2/
HTML:
<input id="route" placeholder="Street"></input>
<input id="locality" placeholder="City"></input>
<input id="administrative_area_level_1" placeholder="State"></input>
<input id="postal_code" placeholder="Postal Code"></input>
<input id="country" placeholder="Country"></input>
<div id="map-canvas"></div>
JS:
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
make the map and the marker global
modify the codeAddress function from Google's simple geocoder example to use your form elements and to move the marker if it already exists.
working fiddle
working code snippet:
// modified from https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
var geocoder = new google.maps.Geocoder();
function codeAddress() {
var street = document.getElementById("route").value;
var city = document.getElementById("locality").value;
var state = document.getElementById("administrative_area_level_1").value;
var postcode = document.getElementById("postal_code").value;
var country = document.getElementById("country").value;
var address = street +"," + city + "," + state +"," + postcode + "," + country;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
if (marker && marker.setPosition) {
marker.setPosition(results[0].geometry.location);
} else {
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
// global variables
var marker;
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// To add the marker to the map, use the 'map' property
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
input{display:block}
#map-canvas{background:#ccc; width:500px; height:300px}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="route" placeholder="Street" value="Beacon St"></input>
<input id="locality" placeholder="City" value="Boston"></input>
<input id="administrative_area_level_1" placeholder="State" value="MA"></input>
<input id="postal_code" placeholder="Postal Code" value="02215"></input>
<input id="country" placeholder="Country" value="US"></input>
<input id="geocode" type="button" onclick="codeAddress();" value="geocode"/>
<div id="map-canvas"></div>
In my domain model, for the entities in question, I have the:
Name of the place (e.g. Waterstones Wakefield)
The Street Addresses (e.g. 61-62 Bishopgate Walk)
And the Post Code (e.g. WF1 1YB)
From the above three pieces of information, how can I get a Marker placed on the Map? I am using Google Maps API 3.
Thanks
Try this example:
HERE THE ORIGINAL
HTML
<body onload="initialize()">
<div>
<input id="address" type="text" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map-canvas" style="height:90%;top:30px"></div>
</body>
JS
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
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
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
I want to use the google map api v3 like in this example https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple
but without this input field
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
I want to specify the street address for example "75 wall st, new york" directly in the code. How do I do this? Below is the code from that sample url. Anyone know what needs to be removed/added to this?
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
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
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map-canvas" style="height:90%;top:30px"></div>
I would imagine you could update the function to do this:
function codeAddress(address) {
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
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
And once you want to update the map, just call:
codeAddress('75 wall st, new york');
If you're using jQuery you could put this in your document ready function, or in another part of your code.