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);
Related
I have just started working with the Google Maps API and Geocoding Service. I followed this tutorial and it was great.
Now I want to be able to create a map with a center based on a location ( "Vancvouer, BC" ) as opposed to latitude and longtitude as required when creating the map.
What I am trying to do is use a callback function named "initMap()" to initialize the map, and in that function I am creating a Geocoder object to get lang and long based on a location. ( "Vancvouer, BC" ).
Here's my initMap() function:
function initMap() {
var geocoder1 = new google.maps.Geocoder();
var center = getCenter(geocoder1, 'Vancouver, BC');
if(center != null) {
alert(center[0].geometry.location);
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
}
This is how I am getting lang and long based on address:
function getCenter(geocoder, address) {
geocoder.geocode({'address': address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
console.log(results);
var result = results[0].geometry.location.toJSON();
return result;
} else {
alert('Geocode was not successful for the following reason: ' + status);
// return null;
}
});
}
This will return a JSON object with the lat and lang I want, but when I try to access its values in initMap() using the if statement center is always undefined.
Once I am able to get the value for center I believe I would be able to set the center easy enough, but why I am not getting these values?
I think its a problem with scope and callback functions, but cant figure it out. Been stuck for a while, thought I'd reach out for help.
Thanks,
Matt
P.S. Let me know if you need any other info. First post on stackoverflow...
The geocoder is asynchronous, you can't return anything from an asynchronous callback function. You need to use the returned data inside the callback function where/when it is available:
function setCenter(geocoder, address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
// return null;
}
});
}
proof of concept fiddle
code snippet:
function initMap() {
var geocoder1 = new google.maps.Geocoder();
setCenter(geocoder1, 'Vancouver, BC');
}
function setCenter(geocoder, address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
// return null;
}
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
You do not need to convert the results to Json. Use
center[0].geometry.location
This can be assigned to the center property of the map object. To check for null:
if (center[0] != null)
Set center by address after map ini:
example:
set_center(address)
function set_center(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}
})
}
var "map" must be ini with google map, example
var map = new google.maps.Map(document.getElementById('main-map'), mapOptions);
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 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
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>