What I would like to do is create app where when anyone clicks on the map object and two fields get filled with latitude and longitude at every click. Is there sample code of Google Maps V3 JavaScript API (Geocoding API) somewhere out there that does something like that?
You can achieve this with google.maps.event' LatLng property:
Something like this would show how it works. Here is a JSFiddle Demo:
google.maps.event.addListener(map, 'click', function(event){
alert('Lat: ' + event.latLng.lat() + ' Lng: ' + event.latLng.lng());
});
Where map is your google map object. Yes the example is in V2 i think, and if you would like to create a marker on click you can simply create it within the click callback function.
Here is a complete code for version 2 which i had been using for a long time and i have published in the site.
http://vikku.info/programming/google-maps-v2/get-lattitude-longitude-onmouseover-and-onmouseclick-google-map-v2.htm
just click view source code from your browser and copy save the contents. it will work perfectly. only thing is you need to change the map api key.
Here is the code for google map version 3
http://vikku.info/programming/google-maps-v3/get-lattitude-longitude-onclick-and-onmouseover-google-map-v3.htm
function onload()
{
var map= new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
google.maps.event.addListener(map, 'click', function(event){
alert('Lat: ' + event.latLng.lat() + ' and Longitude is: ' + event.latLng.lng());
}
After loading code you can write this code to get latitude and longitude of fix points.
please try
var map = [google map];
google.maps.event.addListener(map, 'click', function (mouseEvent) {
alert(mouseEvent.latLng.toUrlValue());
});
Related
i was checking out the google map api to integrate in my website.
made this page with what ever i could understand so far.
everything is working fine but there is just one thing, that i want three markers on the same map.
when i am adding more than one markers then the map stops working.
test link : http://goo.gl/X9q92s
you will have a better understanding if u see my link.
this is the code that i got from google map api.
and i edited it to get grey scale map with my desired marker box.
i just want to add two more....
Please help.
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You should place your "new marker" code into its own function, like so:
function LoadMarkers(name, lat, lng) {
var MarkerLatLng = new google.maps.LatLng(lat, lng);
var MarkerOption = { map: map, position: MarkerLatLng, title: name};
var Marker = new google.maps.Marker(MarkerOption);
}
Putting this into its own function allows you to "refresh" the markers with ease, by simply invoking the function with a timer or some other event. A program I'm working on refreshes the map every few seconds, as my data source is constantly changing with new/removed/updated records that should be reflected immediately on the map. I think this is a great way to do this.
Then, in your program, you can create a loop that shoots the information for each marker in by invoking the LoadMarkers function. I've recently fallen in love with SqlDataReader.
Your loop would iterate through a SqlDataReader and each record read will invoke the script like so:
InvokeScript("LoadMarkers", New Object() {name, lat, lng})
This is a great moment to also add an InfoWindow for each marker.
var infowindow = new google.maps.InfoWindow(
{
content: "Content here"
});
As well as a click listener for the InfoWindows. ;)
google.maps.event.addListener(Marker, 'click', function () {
typeof infoWindowsOpenCurrently !== 'undefined' && infoWindowsOpenCurrently.close(); //If there is an InfoWindow currently open, close it
infowindow.open(map, Marker); //Open a new one for the selected marker
infoWindowsOpenCurrently = infowindow; //Set the new info window to the temporary variable
});
Some might not like this method of using a loop. I like it because I can "personalize" each marker for each record, while personalizing each of their InfoWindows too. In my code above, assume that "name" is a unique ID that lets you specify a specific marker for later use, such as identifying which marker was clicked and which InfoWindow is currently open.
I'm making a web application that uses google maps to help with solar deployment. In essence, I'm loading a google map in full screen and overlaying KML layers using this code:
window.solarLayer = new google.maps.KmlLayer({
url: 'somelink'
});
window.solarLayer.setMap(window.map);
Another feature of this application is that a user is able to click anywhere in the map, and using the latitude and logitude at the click point, it would return solar data to the user.
This all works fine by using a click event handler as such:
google.maps.event.addListener(map, 'click', function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
console.log( latitude + ', ' + longitude );
});
However, the portion of the map that has the KML layer only registers clicks for the layer and does not access the click event I created...
Does anyone know how to disable click events for KML layers? or how to make my event listener supersede that of the KML layer?
I have tried getting the lat and long by using a click event on the KML layer as well as the map but that only yields a static lat long of where that layer is positioned, not where the user actually clicks.
Thanks for any help in advance!
Set the clickable option of the KmlLayer to false.
from the KmlLayerOptions documentation:
clickable| Type: boolean
If true, the layer receives mouse events. Default value is true.
code snippet:
var map;
function initialize() {
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
});
window.solarLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
clickable: false
});
window.solarLayer.setMap(window.map);
google.maps.event.addListener(map, 'click', function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
document.getElementById('coords').innerHTML = event.latLng.toUrlValue(6);
console.log(latitude + ', ' + longitude);
});
}
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="coords"></div>
<div id="map_canvas"></div>
First time ever posting on StackOverflow so tell me and be crude if I am doing something terribly wrong anyway. I recently created a KML file with maps.google.com and I uploaded the kml to my site, and I am trying to implement to the google maps that we created, but I am stumped as I have no errors but it does not show at all.
// North Campus SHuttle KML implementation
var redShuttle = new google.maps.KmlLayer (
'http://blazelist.org/maps/test/RedShuttle.kml'
);
redShuttle.setMap(map);
Can you share more code?
In my example your code is working:
function initialize()
{
var map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(22.7964,73.8456),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
/* var kmlLayer = new google.maps.KmlLayer('http://blazelist.org/maps/test/RedShuttle.kml',
{
suppressInfoWindows: true,
map: map
});
*/
var redShuttle = new google.maps.KmlLayer ( 'http://blazelist.org/maps/test/RedShuttle.kml' ); redShuttle.setMap(map);
}
http://jsfiddle.net/iambnz/WbzpS/
I have 4 fields and one map on my form. I have to choose Start Location and End location. The start latitude, start longitude, end latitude and end longitude are the four fields. What I have to do is, to choose the start and end locations by clicking on the map. Can anybody suggest me how I should go about doing this?
Thanks,
Saurabh
Use this code to get lat long .
function onload()
{
var map= new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
google.maps.event.addListener(map, 'click', function(event){
map.setCenter(event.latLng,14);
var marker=new GMarker(event.latLng);
mapadd.push(marker);
map.addOverlay(marker);
map.setCenter(event.latLng,12);
var lat =event.latLng.lat();
var lng= event.latLng.lng();
}
then u can use these lat and lng varible to get ur locationa and can get directions
Add an event listener to the map that listens for a click. When the map is clicked it passes the lat/lng via event.latLng.lat() and event.latLng.lng()
google.maps.event.addListener(map, 'click', setLatLngs);
function setLatLngs( e ) {
document.getElementById('start_lat').value = e.latLng.lat();
document.getElementById('start_lng').value = e.latLng.lng();
}
I am trying to create a site that has option to add maps to the site using google maps api. I found hundreds of tutorial and blog posts on embeding map in the site. But what I actually want is a way to give the user choose a place on the map and add marker. Then get the co-ordinates of the marker and store it in the database of retrieving and showing in the front-end. I have seen this option given wordpress plugins like mappress. But now I'm trying to achieve this in codeigniter. I can't find any thing to start on. Can any one point out some one tell me where to start?
This is really easy the 3rd version of the Google maps API. Versions before that where much more complicated, and most of the tutorials floating around are for those versions. Have a look through the API documentation and examples.
Adding a marker is as simple as:
var marker=new google.maps.Marker({/* ... see API */});
Adding an event (eg click) to a marker is as simple as:
var marker_click=new google.maps.event.addListener(
marker,
'click',
function() {/*...*/});
Sounds like you'd want a click event for the map, which you'd translate into a latlong, then (a) generate a marker on the map with JS, and (b) post that back to your server using AJAX, or by storing the values in a hidden form field to be submitted after.
Update:
Mostly from the API documentation # http://code.google.com/apis/maps/documentation/javascript/events.html:
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
/*Do your processing here:
* eg. ajax.post('addMarkerDB&lat='+location.lat+'&long='+location.long);
*/
}
Note: There is no ajax.post function by default, but there could be :)