I am working with a Google Map API and I have imported a kml layer into my code.My problem is that I don't know how to remove the 'Unknown Point Feature' information from the info window. Any suggestions? here is a screenshot of what I am talking about:
This is my code for importing the kml file:
var AI_url = 'https://drive.google.com/uc?export=download&id=0B2KR4Lz3foYEeEtfR0laWWM0LVk'
var AI_options = {
preserveViewport: true,
map: map
};
var AI_layer = new google.maps.KmlLayer(AI_url, AI_options);
The info window content is coming from the KML file so you would have to remove it from there, provided you have access to the file from the location it's being served of course.
From the API:
https://developers.google.com/maps/tutorials/kml/
var kmlOptions = {
**suppressInfoWindows: true,**
preserveViewport: false,
map: map
};
One option would be to set the suppressInfoWindows option of the KmlLayer, then add your own click listener that just displays the "name":
var AI_url = 'https://drive.google.com/uc?export=download&id=0B2KR4Lz3foYEeEtfR0laWWM0LVk'
var AI_options = {
preserveViewport: true,
suppressInfoWindows: true,
map: map
};
var AI_layer = new google.maps.KmlLayer(AI_url, AI_options);
google.maps.event.addListener(AI_layer,'click',function(e) {
infoWindow.setOptions({
content:"<b>"+e.featureData.name+"</b>",
pixelOffset:e.pixelOffset,
position:e.latLng
});
infoWindow.open(map);
});
proof of concept code snippet:
var geocoder;
var map;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var AI_url = 'https://drive.google.com/uc?export=download&id=0B2KR4Lz3foYEeEtfR0laWWM0LVk'
var AI_options = {
preserveViewport: true,
suppressInfoWindows: true,
map: map
};
var AI_layer = new google.maps.KmlLayer(AI_url, AI_options);
google.maps.event.addListener(AI_layer, 'click', function(e) {
infoWindow.setOptions({
content: "<b>" + e.featureData.name + "</b>",
pixelOffset: e.pixelOffset,
position: e.latLng
});
infoWindow.open(map);
});
codeAddress("Calgary, Canada");
}
google.maps.event.addDomListener(window, "load", initialize);
function codeAddress(address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.fitBounds(results[0].geometry.viewport);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
Related
I have this simple script on a web page, loading a small kml file, but when I add geolocation, it always centers the map on the current location.
And I want to load the map centered on the kml file. User location should only be displayed if he is in the area of the kml, or if he drags the map to the area where he is located.
Accessorily, is there a way to easily refresh the user location on the map with javascript (maps api 3), without re-centering the map ?
var map;
function initialize() {
var centre = new google.maps.LatLng(4,4);
var mapOptions = {
zoom: 11,
center: centre
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.server.com/kmlfile.kml',
preserveViewport: false
});
ctaLayer.setMap(map);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
// map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
So, here is my latest update, I added the disableAutoPan: true option to infoWindow, as indicated, and to refresh the user position I used watchPosition in place of getCurrentPosition, together with setPosition to move theinfoWindow position :
var map;
function initialize() {
var center_map = new google.maps.LatLng(45,-4);
var mapOptions = {
zoom: 11,
center: centre
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.server.com/kmlfile.kml', preserveViewport: false
});
var ctaLayer.setMap(map);
if(navigator.geolocation) {
navigator.geolocation.watchPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
if(typeof infowindow == "undefined") {
infowindow = new google.maps.InfoWindow({
disableAutoPan: true,
map: map, position: pos,
content: 'Your position',
zIndex: 0 /* not needed */
});
}
else {
infowindow.setPosition(pos);
}
}, function() {
/*handleNoGeolocation(true);*/
/* had to delete this because errors centered the map on North Pole */
},
{ timeout: 10000, enableHighAccuracy: true }); /* high accuracy for tests */
}
};
google.maps.event.addDomListener(window, 'load', initialize);
Apparently it works although I suppose it's quite raw...
When you open the InfoWindow it is panning the map to display it. Set disableAutoPan to true in the InfoWindowOptions.
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.',
disableAutoPan: true
});
proof of concept fiddle
code snippet:
var map;
function initialize() {
var centre = new google.maps.LatLng(4, 4);
var mapOptions = {
zoom: 11,
center: centre
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.geocodezip.com/geoxml3_test/cta.xml',
preserveViewport: false
});
ctaLayer.setMap(map);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
disableAutoPan: true,
map: map,
position: pos,
content: 'Location found using HTML5.'
});
// map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content,
disableAutoPan: true
};
var infowindow = new google.maps.InfoWindow(options);
// map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
Iam doing an MVC Bootstrap Google Map V3 application.
When user enter a Full Address it is shown in a Google Map. If the div when it is shown is in a Partial View. It looks fine.
But, when that Partial View is in a Bootstrap Modal View. It does not show anything.
This is the case when it Works..
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MyKey&sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var address = "Full Address ";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 14,
center: latlng,
// mapTypeControl: true,
// mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
// navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("dvMap"), myOptions);
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(150,50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
<div style="width: 600px; height:400px">
#Html.Partial("~/Views/Shared/_ShowMap.cshtml")
</div>
this is the call to my Partial View
My partial View in this case is simple
The case that does not work is like this.
I add this line at bootom of JavaScript function...
$("#myModalMapa").modal();
HTML Div is like this.
And my partial view looks like this.
As I sow in differents questions, I made same changes to my scripts
$(document).ready(function () {
$('#myModalMapa').on('shown.bs.modal', function () {
var currentCenter = map.getCenter(); // Get current center before resizing
google.maps.event.trigger(map, "resize");
map.setCenter(currentCenter); // Re-set previous center
});
});
I have the following code and I want to set and change the circle's radius through user's input using input box and button. Any help will be appreciated. EDIT. This is the revised code based on the example provided below but still won't work for me. Every help will be appreciated.
<apex:page controller="GeoLocatorController" sidebar="false" showheader="false">
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width:100%;height:80%; }
.controls
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJkHXEVXBSLY7ExRcxoDxXzRYLJHg7qfI"></script>
<script>
var circle;
function initialize() {
//Setting default center of the system
var mapCenter = {
center: new google.maps.LatLng(36.2048, 138.2529),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapCenter);
//Get User's Geolocation and Set as the Center of the System
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
userLat = position.coords.latitude;
userLng = position.coords.longitude;
userLoc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(userLoc);
//User Marker's Image
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
//Create Marker for the User's Location
var centerLoc = new google.maps.Marker({
position : new google.maps.LatLng(userLat, userLng),
map : map,
icon: image,
title : 'Your Position!',
draggable : true,
animation: google.maps.Animation.DROP
});
//Create Circle and Bind it to User's Location
circle = new google.maps.Circle({
map: map,
radius: 100, // 10 miles in metres
fillColor: '#AA0000'
});
circle.bindTo('center', centerLoc, 'position');
marker.setMap(map);
});
function updateRadius(){
var rad = document.getElementById("value_rad").value;
circle.setRadius(parseFloat(rad));
}
}
loadHotels();
}
//Load Records from Cloud
function loadHotels({Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.GeoLocatorController.findAll}',
function(result, event){
if (event.status) {
for (var i=0; i<result.length; i++) {
var id = result[i].Id;
var name = result[i].Name;
var lat = result[i].Location__Latitude__s;
var lng = result[i].Location__Longitude__s;
addMarker(id, name, lat, lng);
}
} else {
alert(event.message);
}
},
{escape: true}
);
}
//Create Markers for the Records from the Cloud
function addMarker(id, name, lat, lng) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: name,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
console.log()
</script>
</head>
<body>
<div id="googleMap" style="width:100%;height:80%;"/>
<input id="value_rad" />
<input id="radius" type="button" value="Search" onclick="updateRadius()"/>
</body>
</apex:page>
See this code (it's work), and adapt your code
var user_lat;
var user_lng;
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
user_lat = crd.latitude;
user_lng = crd.longitude;
};
function error(err) {
alert('ERROR(' + err.code + '): ' + err.message);
};
var circle;
var myCenter;
function initialize() {
navigator.geolocation.getCurrentPosition(success, error, options);
myCenter = new google.maps.LatLng(user_lat, user_lng);
var mapProp = {
center: myCenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
circle = new google.maps.Circle({
map: map,
radius: 100, // 10 miles in metres
fillColor: '#AA0000',
center: myCenter
});
marker.setMap(map);
}
function updateRadius(){
var rad = document.getElementById("value_rad").value;
circle.setRadius(parseFloat(rad));
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJkHXEVXBSLY7ExRcxoDxXzRYLJHg7qfI"></script>
<div id="googleMap" style="width:500px;height:380px;"></div>
<input id=value_rad />
<input id="radius" type="button" value="test" onclick="updateRadius()"/>
Hi guys anybody know how to get latitude and longitude by type on google map using PHP or Javascript?
for example, I want to get all restaurant on this location:
location: United Kingdom, devon
type:restaurant
it should return name of restaurant, latitude, longitude.
any help would be appreciated :)
Check this
$(function () {
var lat = 44.88623409320778,
lng = -87.86480712897173,
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
//zoomControl: true,
//zoomControlOptions: google.maps.ZoomControlStyle.LARGE,
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_left
}
},
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
moveMarker(place.name, place.geometry.location);
$('.MapLat').val(place.geometry.location.lat());
$('.MapLon').val(place.geometry.location.lng());
});
google.maps.event.addListener(map, 'click', function (event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
infowindow.close();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"latLng":event.latLng
}, function (results, status) {
console.log(results, status);
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("#searchTextField").val(results[0].formatted_address);
}
});
});
function moveMarker(placeName, latlng) {
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
//infowindow.open(map, marker);
}
});
Working demo fiddle
HTML AND JS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="default.css"
rel="stylesheet">
<title>Places search box</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
var input = /** #type {HTMLInputElement} */(document.getElementById('target'));
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
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(25, 25)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#target {
width: 345px;
}
</style>
</head>
<body>
<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>
<div id="map-canvas"></div>
</body>
</html>
AND CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
height: 100%;
}
#media print {
html, body {
height: auto;
}
#map-canvas, #map_canvas {
height: 650px;
}
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
REFER HERE FOR MORE ! GOOGLE PLACES
I'm new to both Google Maps and Javascript but have to get this issue solved! I have an .html file with a google map of our client's location loaded into the map_canvas div. Through tutorials, I have been able to figure out how to write enough Javascript to get the map to function, have a custom marker and and infowindow that pops up when you click on it. The only part left is to have a link inside the infowindow that says "directions to here" and there's a text field that the user can type in their starting address. I'm seeing plenty of documentation to help me write my own code on the Google Developer's site but I am not advanced enough to do this. Can anyone help me figure out how to do this? Here is my Javascript:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
var latlng = new google.maps.LatLng(33.929011, -84.361);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(33.929011, -84.361),
map: map,
title: 'Atlanta/Sandy Springs',
clickable: true,
icon: 'images/mapmarker.png'
});
var infowindow = new google.maps.InfoWindow({
content: 'client address'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
</script>
There are several pieces I added. First, you need a better HTML form inside the infowindow, since I only put in the basic parts and it won't respond when you press Enter.
Next, I added a geocoder because the directions Service won't take "human readable" addresses, only latLng coordinates. The geocoder converts the two. Finally, the directions Service and Display are added. The directions text goes into a div (directionsPanel).
See the working fiddle or use this code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%
}
#map_canvas {
margin: 0;
padding: 0;
width: 50%;
height: 100%
}
#directionsPanel {
position: absolute;
top: 0px;
right: 0px;
width: 50%
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var directionsService;
var directionsDisplay;
function initialize() {
var latlng = new google.maps.LatLng(33.929011, -84.361);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(33.929011, -84.361),
map: map,
title: 'Atlanta/Sandy Springs',
clickable: true
});
var infowindow = new google.maps.InfoWindow({
content: "Your address: <input id='clientAddress' type='text'>"+
"<input type='button' onClick=getDir() value='Go!'>"
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
geocoder = new google.maps.Geocoder();
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: false
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function getDir() {
geocoder.geocode({
'address': document.getElementById('clientAddress').value
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var origin = results[0].geometry.location;
var destination = new google.maps.LatLng(33.929011, -84.361);
var request = {
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
} else {
document.getElementById('clientAddress').value =
"Directions cannot be computed at this time.";
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="directionsPanel"></div>
</body>
</html>