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.
Related
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!
I'm working on a javascript Google map where I have marked the location of each of the state capitals with a custom marker and a title of that capital and state. Right now when you view the map you see the whole US with each marker. I want to keep that but add a sidebar where you click the name of a state and the map zooms to the state and capital. I would also like to add a link that zooms out view the full map. Does anyone have a tutorial on how to do this? I found several examples of Google maps with sidebars but none that zooms to a specific location.
Edit:
This is what I am trying to achieve: http://econym.org.uk/gmap/example_map2.htm
Here is the code I am working with:
<script>
function init() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(38.781494, -96.064453),
mapTypeId: google.maps.MapTypeId.ROAD
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var image = 'Alabama.png';
var myLatLng = new google.maps.LatLng(32.366805, -86.299969);
var AlabamaMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title:"Montgomery, Alabana"
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
You need to associate listeners (for example, using jquery) with the click event on your state names. Provided they had an id attribute with the USPS code, it would be something like
jQuery(document).on('click','#RESET',function() {
map.setZoom(5);
map.setCenter({lat:41, lng:-89.5});
});
jQuery(document).on('click','#CA',function() {
map.setZoom(7);
map.setCenter({lat:36.4, lng:-120.9});
});
jQuery(document).on('click','#FA',function() {
map.setZoom(7);
map.setCenter({lat:28, lng:-81});
});
You see, I included one link with id RESET that allows me to reset to the initial state.
Here you can see it at work
http://bl.ocks.org/amenadiel/38e0541592bf331cb298
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);
});
}
I wanted to add a map to my website. I found this easy tutorial below.
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
It worked perfectly until I realised the location I had specified in the coordinates merely centres the map, there is no actual cursor.
I googled a bit but none of the suggestions seemed to work for me. I'm hoping I just need to alter the html etc slightly.
I'm sure somebody must have done this successfully as it seems such a simple thing and the part I've already done was so easy.
Thanks.
Edit: Have fixed the link url.
Edit2: Ok here is my code at the moment:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(50.837004,-0.13244),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var marker = new google.maps.Marker({
position: new google.maps.LatLng(50.837004,-0.13244),
map: myMap,
title: "BLAHBLAH PLACE"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
and in the body section I have:
<div id="map_canvas"></div>
Thanks. :S
If I understand correctly, you are interesting in adding a marker (or pin) on the map? You can add a marker to a map like so:
var myMap = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(44.5403, -78.5463),
map: myMap,
title: "My pin title"
});
See here for more info on adding markers.
I am trying to create jsp page with google map.There i am initializing google map like this..
var map;
var markersArray = [];
function initialize()
{
var chicago = new google.maps.LatLng(8.3641835,77.252415);
var mapOptions = {
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
};
map=new google.maps.Map(document.getElementById("map_canvas")
,mapOptions);
}
After response from one ajax call i am trying to adding markers on this google map
function showOverlays() {
////alert("overlay");
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
But markers are not displaying in the google map...What is the reason.Can anyone pls help
The problem is you don't seem to be adding anything to markersArray, at least in the code you've given us. Also nowhere do you seem to be creating markers.
However assuming that you are adding markers and pushing them into the array, then you merely have a simple mistake in your code. Change the loop to this:
for (i in markersArray) {
i.setMap(map);
}
Actually it was a problem with custom marker image.when i removed custom marker,it works