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>
Related
We have integrated google location map in our wordpress website, but now when I load that page it is showing error
Geocode was not successful for the following reason: REQUEST_DENIED
When the map it is showing faded color map, For development purpose only.
My code is showing below.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript"> var geocoder, map; function mapInit(address) { 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'), mapOptions); codeAddress(address); } 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);
} }); } $(function(){ mapInit($('.current-contact .address b').html());
$('.location').click(function() {
var $this = $(this),
currentAddr = $('.current-contact').html(),
nextAddr = $this.html(),
address = $this.find('.address b').html();
codeAddress(address);
$('.current-contact').html(nextAddr);
//$this.html(currentAddr); }); });
</script>
When I get the api code, what are the changes that I need to make in this script?
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>
I m using google maps api v3. This is my code
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://maps.googleapis.com/maps/api/js?
v=3.exp&sensor=false&libraries=places"></script>
<script>
var geocoder;
var map;
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
//var latlng = new google.maps.LatLng(18.52043030000, 73.85674369999);
var mapOptions = {
zoom: 15,
//center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function codeAddress() {
var address = document.getElementById('searchTextField').value;
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'searchTextField': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
alert(latitude);
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 m doing all this in wordpress template file. I m displaying suggestion using autocmplete places. I want that when user select one of the location from suggestion list, map should navigate to that place. It's not going into the if condition i.e. if (status == google.maps.GeocoderStatus.OK) {
This is html code
<input id="searchTextField" type="textbox">
<input type="button" value="Geocode" onclick="codeAddress()">
If you run this code you will see you have an error that says:
InvalidValueError: unknown property searchTextField
Geocoder accepts 'address' as a property among others, but no 'searchTextField'.
So just change:
geocoder.geocode( { 'searchTextField': address}, function(results, status) {
to:
geocoder.geocode( { 'address': address}, function(results, status) {
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.