I'm trying to get the lat, lng separately from google maps, I have already the position, what should I do?!!
function initialisation(){
var centreCarte = new google.maps.LatLng(36.846815, 10.198352);
var optionsCarte = {
zoom: 17,
center: centreCarte,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
google.maps.event.addListener(maCarte, 'click', function(event) {
var Mark =(new google.maps.Marker({
position: event.latLng,//coordonnée de la position du clic sur la carte
draggable: true, //marqeur daplacable
title:'marker',//titre des marqeur
map: maCarte//la carte sur laquelle le marqueur doit être affiché
}));
google.maps.event.addListener(Mark, 'dblclick', function(event) {
function sayHello() {
var te = Mark.getPosition().toUrlValue();
return te ;
}
alert(sayHello());
});
//rightclick
google.maps.event.addListener(Mark, 'rightclick', function(event){
Mark.setMap(null);
});
});
}
google.maps.event.addDomListener(window, 'load',initialisation);
Just use .lat() and .lng() on your LatLng object.
In your case, you can get latitude and longitude of your clicked marker using
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
Related
This is my fiddle
http://jsfiddle.net/6wp7enot/12/
var map = null;
var markerArray = []; //create a global array to store markers
var myPoints = [
[43.65654, -79.90138, 'ABC'],
[43.65654, -79.90138, 'DEF'],
[43.65654, -79.90138, 'GHA']
]; //create global array to store points
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787, -79.359741),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var mcOptions = {
gridSize: 50,
maxZoom: 15
};
var mc = new MarkerClusterer(map, [], mcOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
for (var i = 0; i < myPoints.length; i++) {
createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
}
mc.addMarkers(markerArray, true);
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function createMarker(latlng, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
markerArray.push(marker); //push local var marker into global array
}
window.onload = initialize;
Could you please let me know how to handle this
You created all the three markers at same position means same latitude and longitude. So three markers created at one place only. Please change latitude and longitude of other two elements from the array.
eg.
var myPoints = [
[43.65654, -79.90138, 'ABC'],
[44.65654, -79.90138, 'DEF'],
[45.65654, -79.90138, 'GHA']
]; //create global array to store points
I tried everything I could think of, but the first time the page loads I have a blank google gray image, after refresh is working.
<script>
var latitude,longitude;
function GetLocationInstant() {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': '7521 Reindeer Ct, Las Vegas, NV 89147' /* This address will come from a post variable*/ }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
// console.log("Latitude: " + latitude + "\nLongitude: " + longitude);
} else {
console.log("geocoder.geocode() failed.<?php echo $address; ?>");
}
});
};
var map;
function initializeInstant() {
var image = "http://example.com/wp-content/themes/mytheme/icon.gif";
// console.log(latitude,longitude);
var myLatlng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 20,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image
});
}
GetLocationInstant();
if ('undefined'!==latitude&&'undefined'!==longitude)
google.maps.event.addDomListener(window, "load", initializeInstant);
</script>
<div style="height: 200px;margin-bottom: 20px;padding: 0px" id="map-canvas"></div>
How can I get the a google map Image searching by address?
EDIT: http://jsfiddle.net/qzygw4jL/4/
Geocoding is an asynchronous operation and you're not waiting for the result before initializing the map. You should call initializeInstant() inside the geocoder callback like this:
var latitude,longitude, map;
function GetLocationInstant() {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address' : '7521 Reindeer Ct, Las Vegas, NV 89147 '
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
// Initialize map after address is found
initializeInstant();
} else {
console.log("geocoder.geocode() failed.<?php echo $address; ?>");
}
});
};
function initializeInstant() {
var image = "http://example.com/wp-content/themes/mytheme/icon.gif";
var myLatlng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 20,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, "load", GetLocationInstant);
Working demo
I am building this JS programmatically. Each marker is being represented by separate variables like marker_0,marker_1, etc... This works but is there a way to generate the markers & info windows in a more efficient/elegant way?
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(41.056466,-85.3312009),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
//**************************************************************
//Add 1st marker
//**************************************************************
var contentString_0 ='<strong>Club name: Fort Wayne Time Corners</strong>';
var infowindow_0 = new google.maps.InfoWindow({
content: contentString_0
});
var image_0 = '/js/markers/marker1.png';
var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709);
var marker_0 = new google.maps.Marker({
position: Latlng_0,
title:"0",
icon: image_0});
marker_0.setMap(map);
google.maps.event.addListener(marker_0, 'click', function() {
infowindow_0.open(map,marker_0);
});
//**************************************************************
//Add 2nd marker
//**************************************************************
var contentString_1='<strong>Club name: Roanoke</strong>';
var infowindow_1 = new google.maps.InfoWindow({
content: contentString_1
});
var image_1 = '/js/markers/marker2.png';
var Latlng_1 = new google.maps.LatLng(41.17805990,-85.4436640);
var marker_1 = new google.maps.Marker({
position: Latlng_1,
title:"1",
icon: image_1});
marker_1.setMap(map);
google.maps.event.addListener(marker_1, 'click', function() {
infowindow_1.open(map,marker_1);
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
Yes, you can do this easily:
Create an array of data that describes each marker.
Write a function that adds a single marker based on the description in one entry of that array.
Call that function for each entry in that array.
So the only part you have to generate dynamically is that array of data; all of the actual marker code is shared for all markers.
Like this:
var map;
var places = [
{
lat: 41.057814980291,
lng: -85.329851919709,
image: 'marker1',
title: '0',
club: 'Fort Wayne Time Corners'
},
{
lat: 41.17805990,
lng: -85.4436640,
image: 'marker2',
title: '1',
club: 'Roanoke'
}
];
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(41.056466,-85.3312009),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map-canvas"),
mapOptions
);
for( var i = 0; i < places.length; i++ ) {
addPlace( places[i] );
}
function addPlace( place ) {
var content = '<strong>Club name: ' + place.club + '</strong>';
var infowindow = new google.maps.InfoWindow({
content: content
});
var image = '/js/markers/' + place.image + '.png';
var latlng = new google.maps.LatLng( place.lat, place.lng );
var marker = new google.maps.Marker({
position: latlng,
title: place.title,
icon: image
});
marker.setMap( map );
google.maps.event.addListener( marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Hi,
that's normal code at Google
var map;
function initialize()
{
var latLng = new google.maps.LatLng(41.079120183660486, 28.994637246032653);
var mapOptions = {
center: latLng,
zoom: 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
});
google.maps.event.addListener(map, 'click', function (event) {
//map.setZoom(9);
//map.setCenter(marker.getPosition());
});
}google.maps.event.addDomListener(window, 'load', initialize);
and I want to multiply marker from my DB and I can't do it. I searched in site but always result is gray map.
And my code is:
<script type="text/javascript">
var map;
var latLng;
function initialize() {
var mapOptions = {
//center: latLng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var markers = [];
#foreach (var item in Model)
{
#:markers.push("#item.map")
// item.map content coming like this : 41.079120183660486,28.994637246032653
}
for (var i = 0; i < markers.length; i++) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
});
}
//google.maps.event.addListener(map, 'click', function (event) {
// //map.setZoom(9);
// map.setCenter(marker.getPosition());
// //placeMarker(event.latLng);
//});
}
google.maps.event.addDomListener(window, 'load', initialize);
I can't add markers. I think missing a lot of things? I really need your opinion. Thanks
Based on your code, it looks like you're adding markers to the same lat/lng. The code below adds a few markers in a loop.
<script>
var map;
var center = new google.maps.LatLng(39.715, -84.103);
$(document).ready(initialize);
function initialize() {
// Create map
var mapOptions = {
zoom: 10,
center: center,
panControl: false,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map_canvas')[0], mapOptions);
for (var ii = 0; ii < 5; ii++) {
var lat = center.lat() + (0.1 * ii);
var lng = center.lng() + (0.1 * ii);
var loc = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: loc,
map: map
});
}
}
</script>
After a while, Google Maps seems to change the property name (Qa or Pa) to Na or another name.
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) {
AlertPos(event.latLng);
});
}
function AlertPos (location) {
// try to show the latitude and longitude
document.getElementById('lat').value = location.Qa;
document.getElementById('long').value = location.Pa;
alert(location.Qa)
alert(location.Pa)
}
This affects my application. Can any body help?
Use lat() and lng():
function AlertPos (location) {
// try to show the latitude and longitude
document.getElementById('lat').value = location.lat();
document.getElementById('long').value = location.lng();
alert(location.lat());
alert(location.lng());
}