google map autocomplete field fetch address from database - google-maps-api-3

I am running a script that has autocomplete field and fethes the address from google in the autocomplete firld.
I want to fetch the addresses in autocomplete field via database and then show the locations on map.
Here is my code :
$(document).ready(function(){
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(43.890423,-79.417732)
};
var map = new google.maps.Map(document.getElementById("map"),mapOptions);
var geocoder = new google.maps.Geocoder();
$(function() {
$("#searchbox").autocomplete({
source: function(request, response) {
if (geocoder == null){
geocoder = new google.maps.Geocoder();
}
geocoder.geocode( {'address': request.term }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var searchLoc = results[0].geometry.location;
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
var latlng = new google.maps.LatLng(lat, lng);
var bounds = results[0].geometry.bounds;
geocoder.geocode({'latLng': latlng}, function(results1, status1) {
if (status1 == google.maps.GeocoderStatus.OK) {
if (results1[1]) {
response($.map(results1, function(loc) {
return {
label : loc.formatted_address,
value : loc.formatted_address,
bounds : loc.geometry.bounds
}
}));
}
}
});
}
});
},
select: function(event,ui){
var pos = ui.item.position;
var lct = ui.item.locType;
var bounds = ui.item.bounds;
if (bounds){
map.fitBounds(bounds);
}
}
});
});
});
Any help is greately appreciated.
I am not much aware of google api and maps.

Related

Implementing google place autocomplete

This is my code for places autocomplete and search.
<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('address');
var options = {
componentRestrictions: {country: "in"}
};
var autocomplete = new google.maps.places.Autocomplete(input,options);
geocoder = new google.maps.Geocoder();
//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);
}
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, 'load', initialize);
</script>
This is my html code.
<input id="address" type="textbox" size="30">
<input type="button" value="Search" onclick="codeAddress()">
It is working fine but I dont want to user to click the button. When suggestions appeared, and when user select any of suggestion options, map will have to navigate to that place. How do I do this???
When User select any option from dropdown, map should navigate to that place.
Take a look at this example and the implementation of the place_changed event.
var place = autocomplete.getPlace();
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
}
This way you can pan the map to the location of the autocomplete result.
This is my working code..
<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('address');
var options = {
componentRestrictions: {country: "in"}
};
var autocomplete = new google.maps.places.Autocomplete(input,options);
geocoder = new google.maps.Geocoder();
//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);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setIcon(/** #type {google.maps.Icon} */({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
}
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, 'load', initialize);
</script>
Now user can select option from dropdown and map will navigate to that place. And also on search button click.
Hope this might help you
function initialize(){
var mapOptions = {//Map Properties
zoom:12,
center: Bangalore
};
googleMap = new google.maps.Map(document.getElementById('map-holder'),mapOptions);//map-holder is a div which holds map in my html
var defaultBounds = new google.maps.LatLngBounds(//bounds for Bengaluru
new google.maps.LatLng(12.7342888,77.3791981),
new google.maps.LatLng(13.173706,77.8826809)
);
googleMap.fitBounds(defaultBounds);
var input = (document.getElementById('searchInput'));//search input element
googleMap.controls[google.maps.ControlPosition.TOP_LEFT].push(input);//binding it to map
var searchBox = new google.maps.places.SearchBox((input));
google.maps.event.addListener(searchBox, 'places_changed', function() {//triggers when search is performed
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
bounds.extend(place.geometry.location);
//googleMap.fitBounds(place.geometry.viewport);
}
googleMap.fitBounds(bounds);
});
google.maps.event.addListener(googleMap, 'bounds_changed', function() {
var bounds = googleMap.getBounds();
searchBox.setBounds(bounds);
})
}

Can I modify this code to detect whether a street view image is available in Google Maps API?

I have to admit, I wing it a bit with Google Maps API. A lot of copy and pasting and basic edits. This code works really well unless a street view image is not available. What is the easiest way to detect no image and hid the pano div? Or the other way round, display it if there is an image:
function googleMap() {
var geocoder = new google.maps.Geocoder();
if (geocoder) {
alert('<?php echo $phoneDirectory->Address; ?>');
geocoder.geocode({ 'address': '<?php echo $phoneDirectory->Address; ?>' }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var googleLat = results[0].geometry.location.lat();
var googleLong = results[0].geometry.location.lng();
//alert(googleLat + ", " + googleLong);
var fenway = new google.maps.LatLng(googleLat,googleLong);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map_canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 0,
pitch: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
// **** ADDED TO GET WORKING!!! *****
var client = new google.maps.StreetViewService();
client.getPanoramaByLocation(fenway, 50, function(result, status) {
if (status == "ZERO_RESULTS") {
// Hide street view div
$('#pano').css("display", "none");
}
});
googleMapLoaded = true;
}
else {
alert('No results found: ' + status);
}
});
}
}
Check this
If there are no nearby panoramas the result is ZERO_RESULTS

Search for Hospitals and Clinics near a particular zip code

I would like to know a method to search for hospitals or clinics within a particular radius around a pin code. How do I go about this and integrate it into my website? I would be using google maps api for the first time so please try and use simple terms.
Okay so I manage to do this much
<script type="text/javascript">
var map;
var infowindow;
var geocoder;
var lat;
var lng;
var custom;
function initialize() {
geocoder = new google.maps.Geocoder();
var address = "Mumbai 400004";
geocoder.geocode({ 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
lat = results[0].geometry.location.lat();
lng = results[0].geometry.location.lng();
custom = new google.maps.LatLng(lat, lng);
map.setCenter(custom);
}
});
var mapOptions = {
zoom: 12,
center: custom,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var request = {
location: custom,
radius: 500,
types: ['hospital']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
</script>
the problem now is that markers for hospitals are not showing on the map. What mistake have I made here ? Thank you for your help.

Google maps API v3 initialize function

I'd like to lean up my initialize() function... but every time I do, it breaks my code.
I'm eventually trying to do something like this, where I have a sidebar with stuff that's directly related to the markers on the map, AJAX'd in... Firstly, I'd like to be able to put other functions outside of the initialize() function. This works fine:
<script>
function initialize() {
// create the map object
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
// create your location marker
var mylocOptions = {
draggable: true,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
new google.maps.Size(22,22),
new google.maps.Point(0,18),
new google.maps.Point(11,11)),
title: "You are here..."
};
var myloc = new google.maps.Marker(mylocOptions);
// get location information from browser, or from user input, or from database
<% if !signed_in? || !current_user.loc %>
if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) {
var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
myloc.setPosition(me);
myloc.setMap(map);
map.setCenter(me);
$.ajax({
data: { me: me.toString() },
type: 'POST',
url: '/set-location'
})
}, function(error) {
var address = prompt('Where are you looking?');
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var me = results[0].geometry.location
myloc.setPosition(me);
myloc.setMap(map);
map.setCenter(me);
} else {
alert("Geocode was not successful for the following reason: " + status);
};
});
});
<% else %>
var me = new google.maps.LatLng(<%= current_user.loc %>);
myloc.setPosition(me);
myloc.setMap(map);
map.setCenter(me);
map.setZoom(12);
<% end %>
// watch for marker movement, and update location accordingly
var oldPos = myloc.getPosition();
google.maps.event.addListener(myloc, "dragend", function(e){
revGeo = new google.maps.Geocoder();
var newPos = myloc.getPosition();
$.ajax({
data: { me: newPos.toString() },
type: 'GET',
url: '/set-location'
})
if(oldPos != newPos)
revGeo.geocode({'latLng': newPos}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
$('#loc').html(results[1].formatted_address);
}
} else {
alert("Geocoder failed due to: " + status);
}
});
oldPos = newPos;
});
// when creating an event, check for event location,
// verify it's existance and put a marker down on the map
$(document).on('focusout', '#event_location', function() {
geocoder = new google.maps.Geocoder();
address = document.getElementById("event_location").value;
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var coords = results[0].geometry.location;
map.setCenter(coords);
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: coords
});
$('#coords').html('coordinates: ' + coords)
$('#event_geocode').val(coords.toString())
} else {
alert(status + " for " + address);
};
});
});
}
</script>
... but I'm sure it can be broken up. Any ideas of what I'm doing wrong?

Google Maps API geocode function problem

Ok, I'm fooling around with Google Maps API v3 and I bumped into a problem. I don't know if its the API or just some JS error i made.
Problem:
addMarkerFromAdress() function calls on geocodeFromAdress() which returns coordinates back to addMarkerFromAdress(). But returned value is "undefined".
As a debug i added two alert outputs, one in addMarkerFromAdress() and one in geocodeFromAdress(). What troubles me is that the alert() in addMarkerFromAdress() seems to fire off before any value is returned. Why?
Source:
<script type="text/javascript">
var geocoder;
var map;
function initializeGoogleMaps() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function geocodeFromAdress(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latLng = results[0].geometry.location;
alert(latLng); //Outputs coordinates, but is for some reason outputted 2nd
return latLng;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function addMarkerFromAdress(address, title){
var latLng = geocodeFromAdress(address);
alert(latLng); //Outputs "undefined", but is for some reason outputted 1st
map.setCenter(latLng);
var marker = new google.maps.Marker({
map: map,
position: latLng
});
}
window.onload = function () {
initializeGoogleMaps();
addMarkerFromAdress('Berlin, Germany', 'Berlin');
}
</script>
See that function passed as the second argument to geocoder.geocode()? that is where you should be calling addMarkerFromAddress. Due to the asynchronous nature of the geocode request, the alert after var latLng = geocodeFromAdress(address); is firing before the response is returned with the lat long values.
Something like this should do it
<script type="text/javascript">
var geocoder;
var map;
function initializeGoogleMaps() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function geocodeFromAdress(address, title) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latLng = results[0].geometry.location;
addMarkerFromAdress(latLng, title);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function addMarkerFromAdress(latLng, title){
map.setCenter(latLng);
var marker = new google.maps.Marker({
map: map,
position: latLng
});
}
window.onload = function () {
initializeGoogleMaps();
geocodeFromAdress('Berlin, Germany', 'Berlin');
}
</script>

Resources