I have integrated a Google Map on my page and add a search box to it with the following code:
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
// 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);
map.setZoom(17);
}
});
Currently this give me a search box with autocompletion list, which is good. But I have to click on a item of this list to go to the location. If I just type something in the input an hit enter, nothing happened..
Any help ?
Thanks !
Try changing
var searchBox = new google.maps.places.SearchBox(input);
to
var autocomplete = new google.maps.places.Autocomplete(input);
Related
I have a google Map with markers on a webpage.
Each marker has a unique feature position and type
This is the scenario I would like to put in place:
On another webpage I have static links to different markers of the map.
If you click on one of those links, you are directed to the map in which, one of these markers is centered (and its info window open).
But the markers latitude and longitude might change while the links will never change.
This means, I need the links not to use latitude and longitude info but markers feature type instead (which are remain the same).
How can I do that?
Here is my sample google Map script so far:
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 48.85639, lng: 2.33625}, // default centering
zoom: 18,
styles:
[
{featureType: 'poi',stylers: [{ visibility: 'off' }]},
{featureType: 'transit.station',stylers: [{ visibility: "off" }]}
]
});
var features = [
{position: new google.maps.LatLng(48.85659, 2.33555),type: 'markerone'},
{position: new google.maps.LatLng(48.85619, 2.33695),type: 'markertwo'}
];
var icons = {
'markerone': {icon: 'icon_one.png'},
'markertwo': {icon: 'icon_two.png'}
};
var contents= {
'markerone': {text: 'Content 1'},
'markertwo': {text: 'Content 2'}
};
for (var i = 0, feature; feature = features[i]; i++)
{
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
var content = contents[feature.type].text;
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
google.maps.event.addListener(marker,'mouseout', (function(marker,content,infowindow){
return function() {
infowindow.close(map,marker);
};
})(marker,content,infowindow));
}
}
</script>
In this sample, I have to markers.
One has a feature type of "markerone" and the second is "markertwo".
How can I set my links to redirect and center the map around a specific marker in this kind of fashion:
http://www.mywebsite.com/mymap.php?myvariable=markertwo
Thank you.
First you would have to get the parameters. The example below gets all parameters and put them into an array. There you can search for your certain paramater like "markerType" and check if it's given or not. If not you have to perform a default action, otherwise you can handle the certain markerType like finding the correct marker, setting the map center to it and open the corrosponding infoWindow.
You just have to call the focusMarkerType-method onload of your page.
function getSearchParameters() {
var prmstr = window.location.search.substr(1);
return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}
function transformToAssocArray( prmstr ) {
var params = {};
var prmarr = prmstr.split("&");
for ( var i = 0; i < prmarr.length; i++) {
var tmparr = prmarr[i].split("=");
params[tmparr[0]] = tmparr[1];
}
return params;
}
function focusMarkerType(){
var params = getSearchParameters();
if(params.markerType!=null){
//Handling the certain marker type
var found = false;
for (var i = 0, feature; feature = features[i]; i++) {
if (feature.type == params.markerType) {
found = true;
map.setCenter(feature.position);
//more...
break;
}
}
if (!found) {
console.log("unknown type")
}
}else{
//Handling default behaviour if no marker type is given
}
}
I would like to add a click event to (subsequently) clustered icons on a leaflet map (using the Leaflet.markercluster plugin). The event itself works, but the alert always yields the very last element of the array for every icon that is clicked. I don't see the reason. declaring 'marker' as array did not change the result.
map.clearLayers;
var marker = [];
var markers = L.markerClusterGroup({
disableClusteringAtZoom: 10,
spiderfyOnMaxZoom: true,
chunkedLoading: true
});
for (id in reclist) {
var posn = reclist[id]['info'][1];
var pose = reclist[id]['info'][2];
var title = reclist[id]['info'][0];
var mapicon = L.icon({iconUrl: 'url of icon');
marker[id] = new L.marker(new L.LatLng(posn, pose), {icon: mapicon})
.on('click', function(){alert(title)});
markers.addLayer(marker[id]);
}
map.addLayer(markers);
There are special events for that: see documentation
markers.on('clusterclick', function() {});
Note that it is one event for your cluster. So it is NOT defined in your loop.
var markers = L.markerClusterGroup({ ... });
markers.on('clusterclick', function() { ... });
for (id in reclist) { ... }
In case I misunderstood your question and you want to define a click event for each markers: if you want to display title, you cannot use the variable as you do. Should do like this:
var title = reclist[id]['info'][0];
var marker = new L.marker(new L.LatLng(posn, pose), {icon: mapicon});
marker.title = title;
marker.on('click', function(e){alert(e.target.title)});
Here is an example
Right now, the autocomplete box works just fine when I click on the location, but when I press down, highlight the location that I want to go to, and press enter, it simply goes back to the home location of the map. Any insights on this? I call this function in initialize(). I'm lost as to what I possibly did wrong. Is this just a google api bug? If so, any insights as to how to work around it?
function setupAutoComplete() {
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180));
var input = document.getElementById('placeSearch');
var options = {
bounds: defaultBounds,
types: ['(regions)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
alert('hi');
removeAllOverlays();
var place = autocomplete.getPlace();
var mapCenter = place.geometry.location;
var colLat = mapCenter.lat() - (halfPoints)*latSeparation;
var colLng = mapCenter.lng() - (halfPoints)*lngSeparation;
var tempStart = new google.maps.LatLng(colLat, colLng);
map.setCenter(mapCenter);
pointArray[0][0] = tempStart;
reService();
mapSearch();
drawBounds();
});
}
Thanks so much!
I guess the input#placeSearch is placed inside a <form>.
You submit the form when you press [ENTER].
You may either remove the surrounding form or cancel the submission by adding:
onsubmit="return false"
...to the form-element.
I just hit this issue and went with the following, as I do want to submit the form at a later stage. This code is from google groups.
var input = document.getElementById('create-location');
var options = {
//types: ['(cities)'],
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13)
{
if (e.preventDefault)
{
e.preventDefault();
}
else
{
// Since the google event handler framework does not handle early IE versions, we have to do it by our self. :-(
e.cancelBubble = true;
e.returnValue = false;
}
}
});
when my bing map loads push pin is not visilble.
When i move or click on map it suddenly display pushpin.
i am using custum pushpin with correct path.
Got to the link click on launch satellite on right sidebar green button.A map load.
http://tinyurl.com/3z25amr
my code
function geocodeCallback(result) {
document.getElementById('post-satellite-map-address').firstChild.nodeValue = result.resourceSets[0].resources[0].address.addressLine;
}
jQuery('#post-gallery a[rel="post-gallery-photo"]').colorbox();
(function() {
var icon;
var map = new VEMap('post-satellite-map');
var mapDiv = document.getElementById('post-satellite-map');
var interval = setInterval(function() {
if(mapDiv.attachEvent != undefined) {
clearInterval(interval);
var lat = document.getElementById('post-satellite-map-lat').value, long = document.getElementById('post-satellite-map-long').value;
var position = new VELatLong(lat, long);
map.LoadMap();
map.SetZoomLevel(19);
map.SetCenter(position);
map.SetMapStyle(VEMapStyle.Birdseye);
icon = new VEShape(VEShapeType.Pushpin, position);
icon.SetCustomIcon(document.getElementById('post-satellite-map-icon').value);
map.AddShape(icon);
/*var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', ['http://dev.virtualearth.net/REST/v1/Locations/point?output=json&jsonp=geocodeCallback&includeEntityTypes=Address&point=', lat, ',', long].join(''));
document.body.appendChild(script);*/
}
}, 10);
document.getElementById('post-gallery-satellite').onclick = document.getElementById('sidebar-map-launch').onclick = function() {
jQuery.colorbox({inline: true, href: '#post-satellite-map-overlay'});
map.Resize();
icon.Hide();
icon.Show();
return false;
};
jQuery.get(
WPAjaxURL,
{ action: 'osm_postviews', postID: document.getElementById('post-id').value },
function(views) {
document.getElementById('post-views-count').firstChild.nodeValue = document.getElementById('post-satellite-map-views-count').firstChild.nodeValue = views;
},
'json'
);
})();
Please help me in this issue.
thanks in advance
This is a known issue when in Birdseye view in Bing Maps V6.3. Two options to get around this is to either move the map programmatically a small amount to trigger the redraw of the map, or upgrade to the Bing Maps v7 control
I've got a setup in which multiple markers present, each loading in content to a single InfoWindow when it's clicked.
Unfortunately, it seems that the marker's click event is not being fired when it's clicked while another window is open.
This seems like an odd behavior. Has anyone else found this to be the case?
Thanks
My code below:
var infoWindow = new google.maps.InfoWindow();
if(markers) {
var length = markers.length;
for(var i = 0; i < length; i++) {
var details = markers[i];
markers[i] = new google.maps.Marker({
title: details.name,
position: new google.maps.LatLng(details.location[0],details.location[1]),
locCode: details.locCode
});
markers[i].setMap(map);
var thisMarker = markers[i];
google.maps.event.addListener(thisMarker, 'click', (function(thisMarker, i, details) {
// self calling function was the key to get this to work
return function() {
$.ajax({
url: 'js/locations/'+details.locCode+'.js',
dataType: 'script',
success: function(data) {
// do my specific stuff here, basically adding html to the info-window div via jQuery
// set the content, and open the info window
infoWindow.setContent($("#info-window").html());
infoWindow.open(map, thisMarker);
}
});
}
})(thisMarker, i, details));
}
}
Check out my answer here:
Jquery Google Maps V3 - Information window is always fixed to one marker
I think this will help resolve your issue.
Bob