How i get specific country airport through google apis - google-maps-api-3

Is it possable to get all airport of given country through google place api or something other.
Thanks in advance.

Geonames web service can supply what you require.
If you create an account you can use
this url for airports near london

You need to use google search control and map
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=yourkey=false"></script>
<script type="text/javascript">
google.load('search', '1');
</script>
<script type="text/javascript">
var map;
var searcher;
function OnLoad() {
var defaultLoc = new google.maps.LatLng(7.885, 80.651);
var defaultMapOp = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: defaultLoc,
noClear: false
};
map = new google.maps.Map(document.getElementById('mapDiv'), defaultMapOp);
var searchControl = new google.search.SearchControl();
searcher = new google.search.LocalSearch();
searcher.setCenterPoint(map);
var options = new google.search.SearcherOptions();
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
/*var opAutoComplete = new google.search.DrawOptions();
opAutoComplete.setAutoComplete(true);*/
searchControl.addSearcher(searcher, options);
//searchControl.draw(searcher, opAutoComplete);
searchControl.setSearchCompleteCallback(searcher, function () {
var results = searcher.results;
for (var i = 0; i < results.length; i++) {
var result = results[i];
var markerLatLng = new google.maps.LatLng(parseFloat(result.lat), parseFloat(result.lng));
var marker = new google.maps.Marker({
map: map,
position: markerLatLng,
title: result.titleNoFormatting
});
}
var center = searcher.resultViewport.center;
map.setCenter(new google.maps.LatLng(parseFloat(center.lat), parseFloat(center.lng)));
});
searchControl.draw(document.getElementById('searchDiv'));
}
google.setOnLoadCallback(OnLoad);
</script>

Related

Google Maps API V3 Z-index Not Working

I have a map with about 20 markers on it representing the birthplaces of ancestors. The markers are created from XML. I want the later generations at the front and the earlier generations behind, but Google Maps defaults to the most southerly markers in front. In its simplest form the code looks like this:
<!DOCTYPE html >
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var thisLatLng = {lat: 51, lng: -3.5};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: thisLatLng,
zoom: 9,
mapTypeId: 'roadmap'
});
// Change this depending on the name of your PHP file
downloadUrl("php-to-xml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("person");
var gender = markers[i].getAttribute("gender");
var z_index = markers[i].getAttribute("z_index");
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var comment = markers[i].getAttribute("comment");
var colour = markers[i].getAttribute("colour");
var html = "<b>" + name + "</b> <br/>" + comment;
var icon = "images/" + gender + "_" + colour + ".png";
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon,
optimized: false,
zIndex: z_index
});
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map"></div>
</body>
</html>
Values of z-index vary from 100 to 200 in increments of 10, depending on the generation. However I've also tried making them 9100 to 9200, and various other things.
I've seen it suggested that the icons need to have a CSS "position" in order to make z-index work. However I've tried
#map img[src^='/myfamilyroots/images'] {position:relative!important;}
and many variations on that theme without success.
This driving me mad. As far as I can see I have followed the Google Maps reference guide, yet nothing I do will change the way the markers are displayed.
zIndex is expected to be of type Number, but getAttribute() always returns strings.
Convert the string into a Number before you assign the zIndex
var z_index = Number(markers[i].getAttribute("z_index"));

Centering Google Maps from a marker

Im triying to create a map with a marker from a position taken from a database. I succeed creating the map using this tutorial. The problem is that i have to enter manually the center position when i create the map.
¿Is there a way to center the map using the marker?. The code that im using is the following:
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("loadposition.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("Latitud")),
parseFloat(markers[i].getAttribute("Longitud")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Also my XML generated file looks like this:
<markers>
<marker Latitud="-33.449148" Longitud="-70.552886"/>
</markers>
Thanks a lot!
I used this in an app after adding the marker. Might help you.
bounds = new google.maps.LatLngBounds();
bounds.extend(marker.position);
if (!bounds.isEmpty())
map.panTo(bounds.getCenter());
Original idea was to find the center of a bunch of markers, so this might be overkill.

Why does google maps api fetch or show only a part of map?

I am using symfony2 and I trying to initialise a google map on a page.
This is my js
<script type="text/javascript">
function initialize(address) {
var geoCoder = new google.maps.Geocoder(address)
var request = {address:address};
geoCoder.geocode(request, function(result, status){
var latlng = new google.maps.LatLng(result[0].geometry.location.lat(), result[0].geometry.location.lng());
var myOptions = {
scrollwheel: false,
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var image = '{{ asset('/images/map_marker.png') }}';
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({position:latlng,map:map,title:'title',icon:image});
var input = document.getElementById('inputCity');
var options = {
types: ['(cities)'],
};
autocomplete = new google.maps.places.Autocomplete(input, options);
})
}
</script>
This is how I initialise the map
<script>
$(document).ready(function(){
initialize('Athens Greece');
})
google.maps.event.trigger(map, "resize");
</script>
This is how I display the map
<div style="height:100%; width:100%;">
<div class="svmMap" id="map_canvas" ></div>
<!-- tried this also <script> initialize('Athens,Greece'); </script> -->
</div>
This is how it's displayed
I have attached a button with the initialise function that refreshes the map and displays an address from an input box. It works 100%.
Any ideas why should it happen when initialised the first time ?

markerclusterer limits

Hi this is my first post here..
I have been playing around with google maps trying to make a list of campsites in France.
I have got to the point of reading an xml file of the data
Loading the map and clustering the results and it all works but very slow.
Q1 Is there a limit on the number of markers you can render even using the clusterer (there are >7000 records at the moment)
Q2
Is there anything obviously wrong with the code I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Read XML in Microsoft Browsers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false&language=en&region=GB" type="text/javascript"></script>
<script src="scripts/markerclusterer.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/style_1024.css" />
<script type="text/javascript">
var xmlDoc;
function loadxml() {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.onreadystatechange = readXML;
xmlDoc.load("xml_files/France_all.xml");
}
function readXML() {
if (xmlDoc.readyState == 4) {
//alert("Loaded");
//set up map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(0, 0),
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow({ maxWidth: 100 });
var marker, i
var markers = [];
var html = [];
var x = (xmlDoc.getElementsByTagName("placemark").length);
//for (i = 0; i < x; i++) {
for (i = 0; i < x; i++) {
//document.write(xmlDoc.documentElement.childNodes[1].firstChild.tagName) + '<br>';
desc = xmlDoc.getElementsByTagName("description")[i].text;
lat = parseFloat((xmlDoc.getElementsByTagName("latitude")[i].text));
lon = parseFloat((xmlDoc.getElementsByTagName("longitude")[i].text));
myicon = (xmlDoc.getElementsByTagName("icon")[i].text);
//create new point
var point = new google.maps.LatLng(lat, lon);
//create new marker
marker = new google.maps.Marker({
position: point,
panControl: false,
map: map,
icon: myicon
});
//increae map bounds
bounds.extend(point);
//fit to bounds
map.fitBounds(bounds);
//add reference to arrays
markers.push(marker);
html.push(desc);
//add listener
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(html[i]);
infowindow.open(map, marker);
}
})(marker, i));
//alert(i + " " + desc +" added!");
};
//var mc = new MarkerClusterer(map);
var mcOptions = {gridSize: 50, maxZoom: 15 };
var mc = new MarkerClusterer(map, markers, mcOptions);
}
}
</script>
</head>
<body onload="loadxml()">
<div style="height:100%; width:100%">
<div id="map" style="float:left; width:50%; height:100%">
<!--filled via script-->
</div>
<div style="float:left; width:50%; height:100%">
<h4>Select Region</h4>
<select>
<option value="Alsace" onclick="loadxml()">Alsace</option>
</select>
</div>
</div>
</body>
</html>
This article may help. A tile based solution (FusionTables, KmlLayer, or a server based custom map) will render more quickly than native Google Maps API v3 objects, even with clustering. You may be seeing the transfer and processing time of the xml file.

Google maps API v3 cluster markers with info windows

I've read the documentation, but my script skills aren't great, so I'm struggling to implement clustering in my Google Map.
The code I have works fine - taking an array of locations and plotting them onto a map. However, I have several hundred points on the map now, so I need to crudely cluster these just so the map is cleaner. The code I have is like this:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/scripts/google-maps-marker-cluster.js"></script>
<script type="text/javascript">
var infowindow = null;
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(54.5753459, -3.9550781);
var myOptions = {
zoom: 6,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
var markerCluster = new MarkerClusterer(map,sites);
}
var sites = [
['AAA', 57.340558, -2.324553, 1, '<h2>Organisation AAA</h2><address>The address</address>'],
['ZZZ', 50.827138, -0.139432, 1, '<h2>Organisation ZZZ</h2><address>The address</address>']
];
function setMarkers(map, markers) {
var image = new google.maps.MarkerImage('/css/img/icon.png',
new google.maps.Size(16, 16),
new google.maps.Point(0,0),
new google.maps.Point(0, 32)
);
var shadow = new google.maps.MarkerImage('/css/img/shadow.png',
new google.maps.Size(37, 14),
new google.maps.Point(0,0),
new google.maps.Point(0, 32)
);
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
shape: shape,
title: sites[0],
zIndex: sites[3],
html: sites[4]
});
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
<div id="map_canvas"></div>
Can anyone tell me the simplest way to cluster these markers? I've tried moving the var markerCluster = new MarkerClusterer(map); line around in several places, but nothing works.
Thanks for any pointers...
Here's how I'm doing it in a Rails project. It's pretty similar to yours except I'm looping a Rails variable and assigning that to the javascript to build the markers array.
The biggest difference here is that my markers are being scoped inside my initialize function.
function initialize() {
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 8,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
var latlnglist = []
var markers = []
var infowindow = new google.maps.InfoWindow({
content: "Loading..."
})
<% #map.each do |artwork| %>
<% unless artwork.location.blank? %>
latlnglist.push(artwork_lat_lng = new google.maps.LatLng (<%= artwork.lat %>, <%= artwork.lng %>))
markers.push(marker = new google.maps.Marker({
position: artwork_lat_lng,
title: "<%=raw escape_javascript(artwork.title) %>",
html: "<%=raw escape_javascript("#{link_to image_fu(artwork.image, '315x120>', :size => '315x120', :alt => artwork.title), map_url(artwork)} <h4>#{artwork.page_title}</h4>") %>"
}))
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(this.html);
infowindow.open(map, this);
})
<% end %>
<% end %>
var mcOptions = {
gridSize: 50,
maxZoom: 15
}
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
var bounds = new google.maps.LatLngBounds();
for (var i = 0, len = latlnglist.length; i < len; i++) {
bounds.extend(latlnglist[i]);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

Resources