I am working with Google Maps embedded on my webpage. What I want is to create a button click event, so then after a user has entered an address into a textbox called txtBoxMaps, they can click a button which will display the new location. I tried using: google.maps.event.addDomListener(window, 'click', Initialize); but it doesnt seem to do anything.
Here is my code below:
<script type="text/javascript">
function Initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.01, 27.9),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('GMap1'), mapOptions);
var input = document.getElementById('txtBoxMaps');
});
}
google.maps.event.addDomListener(window, 'load', Initialize);
</script>
<input type="text" id="txtBoxMaps"/>
<div id="GMap1" style="height: 240px; width:570px" ></div>
You'll need to put the listener on the button, and then get the value in the field at that point, like so, using your code:
var input = document.getElementById('txtBoxMaps').value;
At that point you can geocode that address, and set the center of the map to the new location.
function getGeocode() {
var input = document.getElementById("txtBoxMaps").value;
geocoder.geocode( { 'address': input}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}
});
See the documentation on geocoding here: https://developers.google.com/maps/documentation/javascript/geocoding
Related
This is my first post and I hope I can get some help since I am relatively new to the development arena, please excuse me if my questions are a bit stupid.
I am trying to make sort of a dashboard implementing a dependency from a drop down list in html - let's say that based on the drop down list value selected, a div tag containing a google maps reference should be updated.
For example:
I choose a continent from the drop down list, and then Google will shift its view on that area, later on showing customized points of interest on the map. Can someone help me or suggest a possible solution?
Thank you!
Make sure to include the Google Maps Javascript API (I assume you've already done this):
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
JS:
var map;
var geocoder;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 10,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
geocoder = new google.maps.Geocoder();
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
$('input.maps-input').on('change', function() {
geocoder.geocode({ 'address': $(this).val()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
map.setCenter(results[0].geometry.location);
else
alert('A location could not be found. ' + status);
});
});
});
Then add a dropdown (or any type of input) with class maps-input to your page and a div with class map-canvas (of course you can change these class names to whatever you want).
i have one page for show job pic and location . i want when page load first show job pic
and when click on map load instead of pic .
this is may code
<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: 15,
center: latlng
}
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);
}
});
}
google.maps.event.addDomListener(window, 'onclick', initialize);
</script>
<div id="panel">
<input id="address" type="textbox" value="england london">
<input type="button" value="Geocode" onclick="codeAddress();">
</div>
<div id="map-canvas"> <img src="img/src.jpg" /></div>
but when page load first map load and pic not show .
how i can use "button" to swich between image and map and first load image ?
You're initializing the geocoder variable within the initialize() method. So you've call this method before the below method geocoder.geocode(...) like
function codeAddress() {
initialize(); //intialize geocoder
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
....
....
FYI:
Also map-canvas element needs height and width. So set styles like
#map-canvas {
height: 100px;
width: 100px:
}
Check this in JSFiddle
Note:
or either call the initialize() at page load for better performance else each time the Google maps will be initialized.
google.maps.event.addDomListener(window, 'load', initialize);
I have a problem showing addresses on Google Maps. I have tried everything but its not working. It shows only the first marker even if I click on other addresses. How can I get it to show the other markers?
<xsl:for-each select="Attractions/Museums">
<xsl:value-of select="address"/>
</xsl:for-each>
<script type="text/javascript">
var map;
var geocoder = new google.maps.Geocoder();
$( "#maps" ).on( 'pageshow', function() {
google.maps.event.trigger(map,'resize');
})
// initialize the map
function initialize() {
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
function addMarker() {
var address = document.getElementById("addMarker").text;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var image = 'flag1.png';
var markers = new google.maps.Marker({
map: map,
icon: image,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
All your links (anchor tags) have the same ID attribute, so when the function runs it pick the last one to take the marker data from.
Try using different ID attribute for each link and sending the function that ID as a parameter.
I am trying to use the google maps javascript API to map an address based on this example.
https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple
The documentation recommends the clientside javascript approach as the best way to deal with quotas on requests. So far so good. My problem is in moving from this example to my specific case. My addresses are already in a database so I don't need the user to enter one. Also I do not want the map to load with the page. Instead, I want the map for the address to load when the user clicks a link.
I have a script working that loads the map in a div using initialize (). But my problem is getting initialize to work with geocode. The geocode in the example depends on initialize loading with bodyonload which I do not want.
Here is code. Would appreciate any suggestions:
javascript
var map;
var geocoder;
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);
}
});
}
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.7562008,-73.9903784);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
html
<input id="address" type="hidden" value="Palo Alto CA">
View map without geocoding
<div id="map_canvas" style="width:300px; height:300px;"></div>
View map of geocoded address
The only issue I had with your script was the following line in the initialize() function:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
By declaring var map, your script is just declaring a local variable named map, as opposed to using the global map variable declared at the top of your script.
By removing var, the script uses the global variable and runs fine:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Finally, to get the geocoded map to load on the link click, change onclick for your geocoded address to onclick="initialize();codeAddress();".
Added:
Try combining your initialize() and codeAddress() methods into the following:
function initialize() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 18,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
And then just call initialize() from your link.
Basically, what we're doing is taking the call to geocoder.geocode() that codeAddress() was performing and inside the resulting delegate, we're using results[0].geometry.location to initialize the map. This way, the temporary latlong doesn't need to be displayed.
How, when geocoding, can you simply move an existing marker to the result of a new geocode result.
Let's take this example:
When the map loads, a marker appears
When someone geocodes, the marker moves to the result
The marker is draggable, so the user can further move the marker (if they want to)
Perhaps they want to re-geocode a location, so the new result should automatically move the existing marker.
In this sample:
https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple
...a new marker is drawn for every new geocode.
Does that make sense?
Thanks!!!
-m
Make the marker global.
Check if it exists before creating a new one.
if it exists use .setPosition to move it to the new location
if it doesn't exist, create a marker at the desired location.
Example that does something close to what you want
working code snippet:
var map = null;
var marker = null;
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0,-34)});
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(42, -85),
zoom: 4
});
}
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);
content = results[0].formatted_address;
infowindow.setContent(content);
if (marker && marker.setPosition) {
marker.setPosition(results[0].geometry.location);
} else {
marker = new google.maps.Marker({
map: map,
icon: {
url: 'http://maps.google.com/mapfiles/arrow.png',
anchor: new google.maps.Point(10, 34)
},
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.open(map);
});
}
infowindow.setPosition(results[0].geometry.location);
infowindow.open(map);
} else {
alert('Your search was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<input id="address" value="New York, NY" />
<input id="geocode" type="button" value="Find" onclick="codeAddress()" />
<div id="map-canvas"></div>