I am new to Google Maps API and I have the Google Map below working. However, I am having a hard time understanding how to set an address. I have 2,000 entries that each include an address stored in a database and I have all the data needed to 'set' the address for the map onLoad of the description page, given the opportunity. However, I am not sure how to do this. I was wondering if someone can show me a basic example of setting the address, city, state, zip and then having a marker on the map as well.
In addition, I am confused as to, if I have all the components of the address separated, I am not required to geocode, correct? Doesn't geocode just make it easy to create a map from an unparsed / long address string and puts a limitation on the number of times you can request a geocode? In other words, if I have all the address components (such as zip, city, state, address, etc) stored in a DB, then can't I set an address without being constrained by google maps geocoding limitations?
Following address:
123 Flower Street, Miami, Florida 32826
My JS so far...
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
I appreciate any suggestions!
Many thanks in advance!
You are looking for geocoding: https://developers.google.com/maps/documentation/geocoding/
Here you have code which query google for a location of your address and then point a marker on received position:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': "123 Flower Street, Miami, Florida 32826" }, 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("Problem with geolocation");
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Related
I am currently stuck on getting google maps to display on a site. This worked in a dev environment after a while. I came to put this into live and thought that I would just need the API key in the src
What I have is
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API CODE HERE&callback=initMap"
async defer></script>
<script type="text/javascript">
initialize();
function initialize() {
google.maps.event.addDomListener(window, 'load', function () {
codeAddress("#Model.Postcode, #Model.Address");
});
}
var geocoder;
var map;
function codeAddress(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 17,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// create a marker
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: 'Latitude: ' + results[0].geometry.location.Ya + ' Longitude :' + results[0].geometry.location.Za
});
}
});
}
But this only produces the error of
This page was unable to display a Google Maps element. The provided Google API key is invalid or this site is not authorized to use it.
Many thanks
You first have to obtain an API key from the website and replace it with the "MY_API CODE HERE" part
That should be working, just because we all make mistakes, are you sure you copied the API key correctly? You need to make sure the trailing '&' is still in there after you add the key.
You could also try generating another key and using that. The process for doing that is here: https://developers.google.com/maps/documentation/javascript/get-api-key#key
I have simple google map with markers.
When I create marker for example for Viet Nam I see two markers on Map (in the beginning and in the end, see screenshot).
Is there any way to show only one marker? I cannot change size or zoom of map.
Code:
function loadMap() {
var mapOptions = {
zoom: 1,
disableDefaultUI: true,
zoomControl: false,
scrollwheel: false,
center: new google.maps.LatLng(10.0, -97.2070),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
MAP = new google.maps.Map(document.getElementById("map"), mapOptions);
}
function addMarker(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: MAP,
position: results[0].geometry.location
});
MARKERS.push(marker);
}});
}
The short answer is: No, You basically see the same icon, in the same location. because you zoomed out the map that way that you see the same land twice. it's a normal behavior. there is no logic that in one round there will be a marker and in the second there wouldn't.
You can set the minimum zoom to a larger number so you won't be able to zoom out that far. But that comes with some issues, your map will have to have a fixed width.
Look at minZoom https://developers.google.com/maps/documentation/javascript/reference#MapOptions
Otherwise I don't see how you can do that.
My problem is solved, I needed to add option "optimized: false" for markers. After this I have one marker for one place.
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.
I'm using Google Maps api v. 3 in my website. What I want to implement is the following flow:
User is presented a form where he enters an address (of some kind - city, street, etc).
After the form is filled, a map is presented to him, showing him the map centered to the address he entered. Then he can enter a keyword to search against google places in the area of the map.
What I'm stopped at is the translation of the address to map. As I understand the v3 API, I should initialize the map with LatLng center position - but having a city name or so I can't do it just yet. I need some kind of translation between the textual address and coordinates - it's what Google Maps are doing when I search for "Beverly Hills" for example. Some kind of reverse, I guess? How should I do it in the javascript API?
Or is there an option to include a search bar inside the v3 embedded map?
You need to use geocode something like below
Copied from http://code.google.com/apis/maps/documentation/javascript/geocoding.html
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
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);
}
});
}
And then you will need to call codeAddress() function on your button click
You can use the Google Maps v3 Geocoding API for translating an address to a lat/lon pair. After this you can use that data to initialize the map.
I can't zoom to a marker properly.
I'm trying to switch the view to a specified marker, but can't ge tit to work.
I've tried
map.setCenter(location);
map.setZoom(20);
and
map.fitBounds(new google.maps.latLngBounds(location,location));
but in the first case, I simply get zoomed in without the center change being registered, and in the second case I get this overview over a huge area, not zoomed in at all.
Perhaps this issue could be solved by setting a timout from setcenter to setzoom, but that's an ugly hack to me, so a prettier solution would be preferred.
How do you guys do this?
Also - if the infowindow could be displayed without changing content, that would really be a plus to, but the most important thing is to zoom into the marker at the right spot, close up.
thank you very much.
The solution turned out to be
map.setZoom(17);
map.panTo(curmarker.position);
I thought I would post an answer here as people wanted some example code.
I too needed to be able to zoom in and center as soon as a marker was added to the map.
Hope this helps somebody.
function getPoint(postcode) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': postcode + ', UK'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
map.setZoom(10);
map.panTo(marker.position);
}
else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
is this a new instance of a map object you are creating? if so you can just have an object which contains the location and zoom and then pass that object to the map when initalising it like so (taken from the Gmaps basics tutorial http://code.google.com/apis/maps/documentation/javascript/basics.html:
function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}