I've found alot out there on customizing a marker/infoWindow separately but is it possible to make the infoWindow be used as the marker instead? (Only displaying the infoWindow). I've tried toying the marker css as display: hidden; and few other things but no luck.
var mapOptions = {
center: new google.maps.LatLng(37.7831,-122.4039),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var acOptions = {
types: ['establishment']
};
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'),acOptions);
autocomplete.bindTo('bounds',map);
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infoWindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
infoWindow.open(map, marker);
google.maps.event.addListener(marker,'click',function(e){
infoWindow.open(map, marker);
});
});
This works for me:
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infoWindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
infoWindow.setPosition(place.geometry.location);
infoWindow.open(map);
});
working example
Related
In my project users make reports and leave a marker on the map.
I was wondering if it was possible to mark the zones with more markers in the map with different colors.
Thanks
Below I wrote a part of my javascript code (also because StackOverflow doesn't let me insert everything).
You can view the data on the database and insert the marker on the map.
Markers are automatically inserted when the site starts.
I would like to mark the area with more red marker for example.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.6140747, lng: 8.8427703},
zoom:14
});
var markerCluster = new MarkerClusterer(map, markersArray,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
$( document ).ready(function() {
dbRef.on('value', function(snapshot) {
snapshot.forEach(function(child) {
var childs=child.val();
//var dataSegn = new Date(childs.data2.year,childs.data2.month,childs.data2.date);
var contentString = 'Segnalazione del: '+childs.data+'<br>Per: '+childs.motivo+'<br><img src="'+childs.urlimmagine+'" alt="Foto" style="width:200px;height:300px;">';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
if(childs.motivo =='ESCREMENTI') {
var marker = new google.maps.Marker({
position: {lat: childs.lat, lng: childs.lon},
map: map,
title: childs.motivo,
icon : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
markersArray.push(marker);
marker.addListener('click', function() {
map.setZoom(16);
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
}
if(childs.motivo =='PERICOLOSI'){
var marker = new google.maps.Marker({
position: {lat: childs.lat, lng: childs.lon},
map: map,
title: childs.motivo,
icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
markersArray.push(marker);
marker.addListener('click', function() {
map.setZoom(16);
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
}
if(childs.motivo =='RANDAGIO'){
var marker = new google.maps.Marker({
position: {lat: childs.lat, lng: childs.lon},
map: map,
title: childs.motivo,
icon : 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
});
markersArray.push(marker);
marker.addListener('click', function() {
map.setZoom(16);
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
}
if(childs.motivo =='MALTRATTATI'){
var marker = new google.maps.Marker({
position: {lat: childs.lat, lng: childs.lon},
map: map,
title: childs.motivo,
icon : 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
});
markersArray.push(marker);
marker.addListener('click', function() {
map.setZoom(16);
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
}
});
});
I want to ask I have a google map search function, then I want to add the function to set the marker location by using select options.
here my function
var map = null;
var marker = null;
$('#pilih_customer').on('change', function() {
lati = $(this).find(':selected').attr("data-latitude");
lngi = $(this).find(':selected').attr("data-longitude");
name = $(this).find(':selected').attr("data-name");
bindDataToForm(name, lati, lngi);
map.setCenter(new google.maps.LatLng(lati, lngi));
map.setZoom(17);
marker.setPosition(place.geometry.location);
})
function initialize() {
var latlng = new google.maps.LatLng(-6.189623, 106.835454);
var map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 17
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
draggable: true,
anchorPoint: new google.maps.Point(0, -29)
});
var input = document.getElementById('location');
// map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var geocoder = new google.maps.Geocoder();
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no 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(20);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
bindDataToForm(place.formatted_address, place.geometry.location.lat(), place.geometry.location.lng());
infowindow.setContent(place.formatted_address);
infowindow.open(map, marker);
});
// this function will work on marker move event into map
google.maps.event.addListener(marker, 'dragend', function() {
geocoder.geocode({
'latLng': marker.getPosition()
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
bindDataToForm(results[0].formatted_address, marker.getPosition().lat(), marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
});
}
function bindDataToForm(address, lat, lng) {
document.getElementById('location').value = address;
document.getElementById('lat').value = lat;
document.getElementById('lng').value = lng;
$('#calculate').attr('disabled', false);
}
google.maps.event.addDomListener(window, 'load', initialize);
<select class="form-control" id="pilih_customer" style="border-radius: 5px;" name="id_customer" required="">
<option value=""> *select </option>
<option value="817" data-latitude="-8.16837" data-longitude=" 113.45152" data-name="A`A Frozen Food"> A`A Frozen Food </option>
<option value="861" data-latitude="-8.16836" data-longitude=" 113.45156" data-name="AA Frozen Food "> AA Frozen Food </option>
</select>
my problem now is how can I move the marker based on the select option that I choose?
what should i change so my code can be work ? here I use data-latitude and data-longitude
Remove the var on marker on initialize() this will initiate on that function only.
$('#pilih_customer').on('change', function() {
/*
- Add + before $(this) to convert the value from string to number
- You can pass object (LatLngLiteral) on setPosition
*/
var lati = +$(this).find(':selected').attr("data-latitude");
var lngi = +$(this).find(':selected').attr("data-longitude");
var name = $(this).find(':selected').attr("data-name");
.....
marker.setPosition({lat: lati,lng: lngi});
})
function initialize() {
.....
/*
- Remove var. Do not initiate the marker variable again
*/
marker = new google.maps.Marker({
map: map,
position: latlng,
draggable: true,
anchorPoint: new google.maps.Point(0, -29)
});
.....
}
Doc: Google Map Marker
I am using Google place API to retrieve place reviews from the API, Here is the code that i am using to retrive data from Google place API its working fine but it is working on place name, i want it to search on place id. I have attachted the js code and screen shot that its working fine.
Screen shot
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 41.9030632,
lng: 12.466275999999993
},
zoom: 13
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
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);
}
// Set the position of the marker using the place ID and location.
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
'Place ID: ' + place.place_id + '<br>' +
place.formatted_address);
infowindow.open(map, marker);
var service = new google.maps.places.PlacesService(map);
var details_container = document.getElementById('details');
service.getDetails({
placeId: place.place_id
}, function(place, status) {
details_container.innerHTML ='<p><strong>Place ID:</strong> <code>' + place.place_id + '</code></p>' +
'<p><strong>Address:</strong> <code>' + place.formatted_address + '</code></p><h1>Reviews</h1>';
for(var a=0;a<5;a++){
details_container.innerHTML +='<h2 style="font-weight:300;color:red;">'+place.reviews[a].author_name+'</h2>';
details_container.innerHTML +='<p>'+place.reviews[a].rating+' Stars</p>';
details_container.innerHTML +='<p> Comment > '+place.reviews[a].text+'</p>';
}
console.log(place.place_id);
});
}); // end autocomplete addListener
}
I'm trying to use google map with mvc in my project.
I can find the location by typing in textbox while map is minimized.
The location is showed automatically.
However the location isn't showed automatically in the maximize state.
Here is my code :
function initialize() {
var latlng = new google.maps.LatLng(Lat, Long);
var map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 13
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
draggable: true,
anchorPoint: new google.maps.Point(0, -29)
});
var input = document.getElementById('searchInput');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var geocoder = new google.maps.Geocoder();
var autocomplete = new google.maps.places.Autocomplete(input);
//Set initial restrict countries.
autocomplete.setComponentRestrictions(
{ 'country': ['mm'] });
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
autocomplete.addListener('place_changed', function () {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
infowindow.setContent(place.formatted_address);
infowindow.open(map, marker);
});
// this function will work on marker move event into map
google.maps.event.addListener(marker, 'dragend', function () {
geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Screenshot :
Screenshot 1
Screenshot 2
Set a z-index for .pac-container that is above the map (warning undocumented behavior, may change with future releases of the API)
.pac-container {
z-index: 2147483648;
}
proof of concept fiddle
code snippet:
function initialize() {
var latlng = new google.maps.LatLng(21.958828, 96.089103);
var map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 13
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
draggable: true,
anchorPoint: new google.maps.Point(0, -29)
});
var input = document.getElementById('searchInput');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var geocoder = new google.maps.Geocoder();
var autocomplete = new google.maps.places.Autocomplete(input);
//Set initial restrict countries.
autocomplete.setComponentRestrictions({
'country': ['mm']
});
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
infowindow.setContent(place.formatted_address);
infowindow.open(map, marker);
});
// this function will work on marker move event into map
google.maps.event.addListener(marker, 'dragend', function() {
geocoder.geocode({
'latLng': marker.getPosition()
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
z-index: 0;
}
#searchInput {
top: 15px;
left: 120px;
}
.pac-container {
z-index: 2147483648;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="searchInput" />
<div id="map"></div>
I am using geolocation to get the address of places on my google maps API by looking up the longitude and latitude and returning the results to my page for use in my database.
I have been unable to display these results in my infowindow in my map.
How can I using the code below include the address in my infowindow. It currently displays the long and lat with the following code:
infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>');
infowindow.open(map, marker);
The function geocodePosition looks up the address of the coordinates and appends it to the html input in my form.
How can I adapt it to update the infowindow too. I have tried many methods now and no success. Any ideas??
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').value = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').value = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').value = str;
}
function initialize() {
var latLng = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Property location marker',
map: map,
draggable: true
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
var infowindow = new google.maps.InfoWindow();
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
var image = new google.maps.MarkerImage(
place.icon, new google.maps.Size(71, 71),
new google.maps.Point(0, 0), new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);
infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>');
infowindow.open(map, marker);
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>');
infowindow.open(map, marker);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
//Show property address in window
infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>');
infowindow.open(map, marker);
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
marker.getPosition() is not going to provide the street address. Given your current code, your best bet is to move:
infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>');
to your geocodePosition() function, and then to pass the infowindow object as a second argument to that function.
So in your initialize() function you would modify calls to geocodePosition by including a second argument:
function initialize() {
...
geocodePosition(marker.getPosition(), infowindow);
}
Then in your geocodePosition() function, you would accept the second argument, and update it with the responses[0].formatted_address value. I added variables to make it easier to pass on the values for address and the message.
function geocodePosition(pos, infowindow) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
var address = responses[0].formatted_address;
updateMarkerAddress(address);
infowindow.setContent('<div><strong>' + address + '</strong><br>');
} else {
var msg = 'Cannot determine address at this location.';
updateMarkerAddress(msg);
infowindow.setContent('<div><strong>' + msg + '</strong><br>');
}
});
}
You might want to use Google map api - http://code.google.com/apis/maps/documentation/geocoding/#GeocodingRequests
There are others APIs that will give you the same - but most of them will cost money and with Google you get a lot of 'miles' for free.