i've done like this video has shown but something just not working. mine not showing the place i seaching for and the marker also didnt move to that place. Youtube tutorial
and this is my code
var map = new google.maps.Map(document.getElementById('map-canvas'),{
center:{
lat:-7.9666,
lng:112.6326
},
zoom:15
} );
var marler = new google.maps.Marker({
position:{
lat:-7.9666,
lng:112.6326
},
map:map,
draggable:true
});
var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch'));
google.maps.event.addListener (searchBox, 'places_changed', function(){
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i=0; place=places[i];i++){
//console.log(place.geometry.location);
bounds.extend(place.geometry.location);
marker.setPosition(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(15);
});
problem starts from var searchBox line down below
im using libraries=places at the end of google api script.
thanks for your help :beer
viola, i actually have a typo for the marker that written as marler.
case close everyone,
you should go to that youtube tutorial, that works!
Related
I'm trying to create a map with info windows that open with the user clicks on a marker. So far the code doesn't seem to be working, the map was displaying before but once I put in the code for the info window pop-ups not only did the info window not show but the map also stopped showing on my webpage. Here's the code:
<div id= "map"> </div>
<script>
var map;
var markers=[];
function initMap(){
map= new google.maps.Map(document.getElementById('map'),{
center:{ lat:40.7413549, lng:-73.9980244},
zoom:13
});
var locations=[
{title:"Park Ave Penthouse",location:{lat:40.7713024,lng:-73.9632393}},
{title:"Chelsea Loft", location;{lat:40.7444883,lng:-73.9949465}},
{title:"Union Square Open Floor Plan",location:{lat:40.7347062,lng:-73.984377}},
{title:"East Village Hip Studio",location:{lat:40.7281777,lng:-73.984377}},
{title:"TriBeCa Artsy Bachelor Pad",location:{lat:40.7195264,lng:-74.0089934}},
{title:"Chinatown Homey Space",location:{lat:40.7180628,lng:-73.9961237}}
];
var largeInfowindow= new google.maps.InfoWindow();
var bounds= new google.maps.LatLngBounds();
for (var i=0; i< locations.lenght;i++){
var position = locations[i].location;
var title = locations[i].title;
var marker= new google.maps.Marker({
map: map,
position:position,
title:title,
animation:google.maps.Animation.Drop,
id:i
});
markers.push(marker);
bounds.extend(marker.position);
marker.addListner ("click",function(){
populateInfoWindow(this,largeInfowindow);
});
map.fitBounds(bounds);
};
markers.push(marker);
markers.addListner("click",function(){
populateInfoWindow(this,largeInfoWindow);
});
}
function populateInfoWindow (marker, infowindow){
if(infowindow.marker=!marker){
infowindow.marker= marker;
infowindow.setContent("<div>"+marker.title+"</div>");
infowindow.open(map,marker);
infowindow.addListner("closeclick",function(){
infowindow.setMarker(null);
});
}
}
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvrWT4KKcsDSSGYXpxRry3m7j90pPjZgA&v=3&callback=initMap"></script>
The error is in this line:
if(infowindow.marker=!marker){ //it is "!=" and not "=!"
Always check console for javascript errors. After infowindow code, you could not even see the mao which means you have javascript errors.
I've been looking around for a solution to this problem, but i can't seem to find somthing that solves this. The closest i get is this thread. But this doesn't work.
What i'm trying to do is to run fitbounds based on a set of markers which works fine. But i would also like to center the map based on the users location (the bouncing marker in the plunk) and still keep all markers within the map view.
If i try to setCenter after fitBounds, some markers are outside of the map view.
Is there some nifty way of combining these two functions?
Here's the plunk illustrating the issue.
function initialize() {
var userCenter = new google.maps.LatLng(51.508742, -0.120850);
var userCenterMarker = new google.maps.Marker({
position: userCenter
});
userCenterMarker.setAnimation(google.maps.Animation.BOUNCE);
var mapProp = {
center: userCenter,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var bounds = new google.maps.LatLngBounds();
var markers = getMarkers();
$(markers).each(function() {
bounds.extend(this.position);
this.setMap(map);
});
userCenterMarker.setMap(map);
map.fitBounds(bounds);
setTimeout(function() {
map.setCenter(userCenter);
}, 1500);
}
Thanks!
Simple solution: Add your "user marker" to the bounds, do fitBounds, then decrement the resulting zoom by 1 and center on that marker.
bounds.extend(userCenterMarker.getPosition());
map.fitBounds(bounds);
google.maps.event.addListenerOnce(map,'bounds_changed', function() {
map.setZoom(map.getZoom()-1);
});
working fiddle
More complex solution: Center on the "user marker", check to see if the marker bounds is completely included in the map's current bounds (map.getBounds().contains(markerBounds)), if not, decrement the zoom level by 1.
The above answer didn't work for me. Here's what did:
contained = true;
map.fitBounds(bounds);
map.setCenter(center);
newbounds = map.getBounds();
for (i = 0; i < l; i ++) {
if (!newbounds.contains(markers[i].getPosition())) {
contained = false;
}
}
if (!contained) map.setZoom(map.getZoom() - 1);
I have this code, this works perfectly to save my latitude and longitude. I read some articles here, they doesnt work for me. I know how to code with PHP but jquery and javascript are my frenemy.
I just can't edit cos' i dont know the syntax of this. I want to add the value to and input with the id, but i have to add the Decoded Address. I knoe Google maps have a way, they call it Geocode or something like that.
I have also a working model, but with geolocalization, and i can't change the vars, because i dont know how to. :(
PD: Is there a course Javascript for Dummies? It will help me to understand better.
function initialize() {
var myLatlng = new google.maps.LatLng(21.1675922,-86.8563953);
var mapProp = {
center:myLatlng,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Tu casa u oficina',
draggable:true
});
document.getElementById('latitud').value= 21.1675922
document.getElementById('longitud').value= -86.8563953
document.getElementById('direccion').value= 'Direccion desconocida'
// marker drag event
google.maps.event.addListener(marker,'drag',function(event) {
document.getElementById('latitud').value = event.latLng.lat();
document.getElementById('longitud').value = event.latLng.lng();
});
//marker drag event end
google.maps.event.addListener(marker,'dragend',function(event) {
document.getElementById('latitud').value = event.latLng.lat();
document.getElementById('longitud').value = event.latLng.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
If you want a guide on how to do Reverse Geocoding, then you can check the Google documentation for it. It will provide you an example and sample code on how to make reverse geocoding by location and Place ID. For more information, check this tutorial.
I have a question that may be somewhat strange. I have implemented Google Maps on different parts of my website, but in one part the map canvas is not showing smooth imaging. It is showing the distinctive grid squares. I have double checked the map api reference and it seems to be the right code. I have also checked against other parts of my site and the code is almost identical.
Here is the code I have for the offending grid lines map (googlemap.js)
var scriptTag = '<' + 'script src="http://maps.google.com/maps/api/js?v=3&key={my-key}&sensor=false">'+'<'+'/script>';
document.write(scriptTag);
var latlng = '0';
var imagename = '';
var GPSLatitude = '48.2099177267394';
var GPSLongitude = '16.37563705444336';
window.setTimeout('initGmaps();',1000);
function initGmaps()
{
var myOptions = {
zoom:4,
center:new google.maps.LatLng(GPSLatitude,GPSLongitude),
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(GPSLatitude,GPSLongitude)
});
function placeMarker(location)
{
if (marker)
{
marker.setPosition(location);
}
else
{
marker = new google.maps.Marker({
position: location,
map: map
});
}
}
// google.maps.event.addDomListener(window, 'load', initialize); <-- if I leave this in, it doesn't load the map for some strange reason
Here is where I call the map (functions.php <-- this sends the co-ords to the map)
$google_map = "
<script type='text/javascript' src='googlemap.js'></script>
<script type='text/javascript'>
GPSLatitude = '$GPSLatitude';
GPSLongitude = '$GPSLongitude';
imagename = '$image_name';
</script>
";
Here are a couple of screenshots of the issue
Distinctive Grid Lines
Smooth Image
Just not quite sure where I am going wrong with this. Any help is greatly appreciated
I'm working with google maps api and javascript which I am not much familiar with. Here's the code I use to draw markers on my map. I get Latitudes and Longitudes from my database:
var geocoder;
var map;
var jsonStr = '<?php echo json_encode($arajka) ?>';
var LatLong = JSON.parse(jsonStr);
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(50.000001, 20.000001),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var marker = [];
for(var i=0;i<LatLong.length;i++){
var LatLong1 = new google.maps.LatLng(LatLong[i].lat, LatLong[i].lon);
marker.ajdi=LatLong[i].id; // storing additional data (I need to get it when user clicks on certain marker)
marker.push(new google.maps.Marker({position: LatLong1, map: map, title: LatLong[i].login}));
}
// trying to set some listener but it fails.
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
alert("ASDASDASD" + marker.ajdi);
});
}
So, this listener doesn't work, I don't know why. Well, I expect that it doesn't exactly know what marker is it about. When I tried to do it with a single one, like in tutorial, it worked properly. I don't know what to do when I have this array. Any suggestions please?
You have several mistakes in your code:
As #Hollister mentions, marker is an array, so you need to put the addListener call inside the loop;
You have to store the additional marker data into the marker, not into the marker array;
you have to use this in the listener, not marker.
for(var i=0;i<LatLong.length;i++){
var LatLong1 = new google.maps.LatLng(LatLong[i].lat, LatLong[i].lon);
var this_marker = new google.maps.Marker({position: LatLong1, map: map, title: LatLong[i].login});
this_marker.ajdi=LatLong[i].id; // storing additional data (I need to get it when user clicks on certain marker)
marker.push(this_marker);
// trying to set some listener but it fails.
google.maps.event.addListener(this_marker, 'click', function() {
map.setZoom(8);
map.setCenter(this.getPosition());
alert("ASDASDASD" + this.ajdi);
});
}