Hello if you are working on google map api geocoder and you need to search the location on basis of name and location than you need to use Google map api geocoder to get the location. We will try google map api geocoder with multiple array, here array can be multidimensional.
Scope
Let’s see what are the possibilities,
- If you are GDS developer than you need to show hotels and airport along with some private data.
- If you are Real estate developer than you need to list you properties with some private data that does not exist on google map.
- If you are working on chain or retail store with more than one store than even you need this.
So the next question come in mind will be how to do this?? I am here to give you the solution to the big how with easy steaps…
We just need a google maps API key, and primary knowledge of java script.
Lets Begin with this in the simple way, we are going to show the best top 7 tourist attraction of India.
Array of Location in Google Map API Geocoder
Lets began with the geocoding using the google map API for that we just need the data that should be consist of the location address. there is one condition that the location should be added to the google map only than that will show on the map.
so here we are using the multidimensional array to store the location and the other details that we want to show in the map that can be image of the location, hyperlink, ratings, price or any thing we want to present on the map. so we store the data in a variable called locations. for instance we are working on the top 10 National park in india and we have created a array that has the location and the details of the national park (Other details are not correct just random data).
var locations = [{
title: 'Corbett National Park',
name: 'Corbett National Park, Uttarakhand',
price: '$100',
image: 'images/park1.jpg'
}, {
title: 'Kaziranga National Park',
name: 'Kaziranga National Park, Assam',
price: '$150',
image: 'images/park2.jpg'
}, {
title: 'Bandhavgarh National Park',
name: 'Bandhavgarh National Park, Madhya Pradesh',
price: '$130',
image: 'images/park3.jpg'
}, {
title: 'Kanha National Park',
name: 'Kanha National Park, Madhya Pradesh',
price: '$120',
image: 'images/park4.jpg'
}, {
title: 'Gir National Park',
name: 'Gir National Park, Gujarat',
price: '$140',
image: 'images/park5.jpg'
}, {
title: 'Keoladeo Ghana National Park',
name: 'Keoladeo Ghana National Park,Bharatpur',
price: '$170',
image: 'images/park6.jpg'
}, {
title: 'Periyar National Park',
name: 'Periyar National Park, Kerala',
price: '$121',
image: 'images/park7.jpg'
}, {
title: 'Ranthambore National Park',
name: 'Ranthambore National Park, Rajasthan',
price: '$90',
image: 'images/park8.jpg'
}, {
title: 'Sunderbans National Park',
name: 'Sunderbans National Park, West Bengal',
price: '$151',
image: 'images/park9.jpg'
}, {
title: 'Dudhwa National Park',
name: 'Dudhwa National Park, Uttar Pradesh',
price: '$100',
image: 'images/park10.jpg'
}, ];
Once we are done with the location we will work on the Map section our goal is to show location with the infowindows and the map sidebar.
So first of all we will load the google map required variables we need a variable for infowindows, longitude-latitude, geocoder, map and bound we had already learned this before. let’s have a quick view. here we initialized the google map variable and the map options so that layout get fixed.
var infowindow = new google.maps.InfoWindow();
var latlng = new google.maps.LatLng(21.0000, 78.0000);
var mapOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var bounds = new google.maps.LatLngBounds();
Note that this script will only work after the all the google api scripts are loaded so keep this script after the jQuery and google map js.
Now our next step will be creating a geocoder function as we have to search multiple location we need to add function if we are having single location that that is very easy to get. for the function we need to add the code below
function geocodeAddress(address, next) {
var address = locations[address];
geocoder.geocode({
'address': address.name
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var p = results[0].geometry.location;
var lat = p.lat();
var lng = p.lng();
createMarker(address, lat, lng);
} else {
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
nextAddress--;
delay++;
} else {}
}
next();
});
}
The above function will be search each location and create the marker recursively. once the location is found than the marker will be created as we have made some customization we have to format it.
function createMarker(add, lat, lng) {
var contentString = '<div class="map-hotel-detials"><div class="ht_img"><img src="' + add.image + '" /></div><div class="ht_content"><div class="ht-title">' + add.title + '</div> <div class="ht-price"><strong>USD</strong> ' + add.price + '</div><div class="ht-rating"><div class="stars"></div></div></div></div>';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.setOptions('maxWidth', 350);
infowindow.open(map, marker);
});
var ul = document.getElementById("marker_list");
var li = document.createElement("li");
var title1 = add.title;
li.innerHTML = '<div class="ht_img"><img src="' + add.image + '" /></div><div class="ht_content"><div class="ht-title">' + title1 + '</div><div class="ht-price"><strong>INR</strong> ' + add.price + '</div><div class="ht-rating"><div class="stars"><form action=""><input class="star star-5" id="star-16" type="radio" name="star"/><label class="star star-5" for="star-16"></label><input class="star star-4" id="star-17" type="radio" name="star"/><label class="star star-4" for="star-17"></label><input class="star star-3" id="star-18" type="radio" name="star"/><label class="star star-3" for="star-18"></label><input class="star star-2" id="star-19" type="radio" name="star"/><label class="star star-2" for="star-19"></label><input class="star star-1" id="star-20" type="radio" name="star"/><label class="star star-1" for="star-20"></label></form></div></div></div>';
ul.appendChild(li);
//Trigger a click event to marker when the button is clicked.
google.maps.event.addDomListener(li, "click", function() {
google.maps.event.trigger(marker, "click");
});
bounds.extend(marker.position);
}
now its time to make the final call to the custom function we will be running a loop that will get each location one by one and pass to the our geocoder function.
//define the start
var nextAddress = 0;
function theNext() {
if (nextAddress < locations.length) {
console.log(locations[nextAddress]);
setTimeout('geocodeAddress("' + nextAddress + '",theNext)', delay);
nextAddress++;
} else {
map.fitBounds(bounds);
}
}
//calling our function
theNext();
We are done with this you can have the Demo here. just have a look