i want to add marker on a google map where by my ng-click pass the object which have latitude and longitude so that it will put the marker to the map.....any help plz
example code
HTML
<a class="button icon icon-right ion-location" href="location.html" ng-click="search_item(item)">
call function
$scope.search_item = function (item){
lat = item.lat;
lng = item.lng
}
marker code
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
zoom: 15,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
This question seems to have been answered here and an example can be found in googles documentation here
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
What is not working is not clear, however...
Assuming have map loaded:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
async></script>
<script>
note async and callback=initMap, put a var map at top to allow easier later use
//add global variable for map
var map;
// Initialize and add the map mon callback when goole.map api loaded
function initMap() {
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.036 };
// Create the map and store in global variable
map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
}
Then when call the function from the button it using the map varable rather than trying to create a new on
function placeMarker(myLatlng){
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!",
});
});
Then your function call code on button click.
$scope.search_item = function (item){
lat = item.lat;
lng = item.lng
latLng = new google.maps.LatLng(lat, lng);
placeMarker(latLng);
}
Related
I'm trying to implement a marker on a map. I can verify that the map renders correctly at the right center and zoom, but the marker does not show up.
function initMap() {
var latLng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}})
var mapOptions = {
center: latLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: latLng,
visible: true,
map: map
});
}
I've also tried the implementation of adding the marker directly using marker.setMap(map):
function initMap() {
var myLatlng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}});
var mapOptions = {
zoom: 14,
center: myLatlng
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
Neither render a marker. I've noticed that even when I replace the handlebars values for latitude and longitude with numerical coordinates for testing, the marker still does not appear. Any help appreciated!
I'm testing in Chrome.
You need to use this syntax window.onload = function initMap() and you are not assigning the marker to the map marker.setMap(map);, try in this way:
window.onload = function initMap() {
//I just put some custom LatLng to make it work
var LatLng = new google.maps.LatLng(41.9026329,12.452200400000038);
var mapOptions = {
center: LatLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map
});
marker.setMap(map);
};
Here you can find a working Plunker made with this code + css + html.
If you are doing it with some AngularJS, give a look at my answer to this Question by #Dorin.
Window.OnLoad W3Schools Documentation
Question Related to Window.OnLoad
If you have still some problems, just let me know.
I hope I've been helpful.
I have the following link:
choose on map
showMap accepts geocoding coordinates and shows marker at this place.
function showMap(lat,lng) {
window.open('map?lat='+lat+'&lng='+lng, 'map', 'width=600,height=400');
}
on map.jsp i have following js:
function initialize() {
var myLatlng = new google.maps.LatLng("${lat}","${lng}");
var mapOptions = {
zoom: 12,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
marker.setMap(null);
marker = new google.maps.Marker({
position: location,
map: map
});
}
}
I want to achieve that after I have changed marker position on map this change should affect showMap arguments
showMap(changedMarkerLat, changedMarkerLng)
Possible approach: instead of passing lat/lng as parameters to the function(as suggested by #esc), store these data somewhere and access them inside the function.
Example:(stores the lat/lng as attributes of the link)
<a href="#" id="context-map"
data-lat="57.8166994"
data-lng="28.33447339999998"
onclick="showMap(this)">choose on map</a>
function showMap(o) {
//you only need to open a new window when its not open yet
if(!o.map ||o.map.closed){
o.map = window.open('map?lat='+o.getAttribute('data-lat')+
'&lng='+o.getAttribute('data-lng'),
'map',
'width=600,height=400');
}
//otherwise only bring the window into front
else{
o.map.focus();
}
}
Inside the new window set the data-lat and data-lng-attributes of the link
function initialize() {
var myLatlng = new google.maps.LatLng("${lat}","${lng}");
var mapOptions = {
zoom: 12,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
try{//use a try-catch to avoid errors when the opener has been closed
var link=opener.document.getElementById('context-map');
link.setAttribute('data-lat',location.lat());
link.setAttribute('data-lng',location.lng());
}catch(e){}
//there's no need to create a new Marker,
//simply update the position of the existing Marker
marker.setPosition(location);
}
}
Demo: http://www.googledrive.com/host/0BwPgjOA-i5WyQ0VmR3JZTU9BS0U
I cant able to get the longitude and latitude after dragging the marker please notify my mistake
thank you in advance
js code here:
<script>
function initialize_map(lat,lng) {
$("#request-form").show();
latitude = parseFloat(lat);
longitude = parseFloat(lng);
var myLatlng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 14,
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!',
draggable: true,
});
google.maps.event.addListener(marker, 'dragend', function (marker) {
var latLng = marker.latLng;
document.getElementById("latitude").value = latLng.lat()
document.getElementById("longitude").value = latLng.lng();
});
}
Instead of passing marker into the dragend function handler, pass event instead.
google.maps.event.addListener(marker, 'dragend', function (event) {
...
}
I can not get the marker to show up on the map. Can anyone help me find out what is wrong that would be a huge help?
Here is the code:
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(33.748995, -84.387982);
var mapOptions = {
center: myLatlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(map_canvas, mapOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
Atlanta = new google.maps.LatLng(33.748995, -84.387982);
addMarker(Atlanta);
}
google.maps.event.addDomListener(window, 'load', initialize);
You appear to be missing the var keyword in front of the marker and Atlanta variables. To fix, I would also declare the map, marker and Atlanta variables outside of the initialize() function in the global space, so they are accessible to other functions. Try this:
var map;
var marker;
var Atlanta;
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(33.748995, -84.387982);
var mapOptions = {
center: myLatlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(map_canvas, mapOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
Atlanta = new google.maps.LatLng(33.748995, -84.387982);
addMarker(Atlanta);
}
google.maps.event.addDomListener(window, 'load', initialize);
I am making a google maps application in which i allow a user to place only one marker on the map by clicking on the map. Everytime the user click again on the map, the old marker is deleted and the marker is placed on the new click location. I have a hidden input field and i want the its value to change each time the marker changes position. This value should be the coordinates of the new marker location. The code i have written for this is as follows,
var map;
var marker;
var coords;
function initialize() {
var latlng = new google.maps.LatLng(19.074448,72.872314);
var myOptions = {
zoom: 12,
center: latlng,
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) {
if (marker) {
marker.setMap(null);
marker = null;
placeMarker(location);
}
else {
marker = new google.maps.Marker({
position: location,
map: map
});
document.getElementById("id_lat").value = marker.getPosition().toUrlValue()
}
};
Specifically, i am using this line to change the value,
document.getElementById("id_lat").value = marker.getPosition().toUrlValue()
where the id of the relevant hidden field is "id_lat"
This doesn't seem to work though. What am i doing wrong and how do i fix it ? I am new to javascript.
I think you forgot to add your one marker at initialize() function. Other than that your code seems to work fine.
var map;
var marker;
var coords;
function initialize() {
var latlng = new google.maps.LatLng(19.074448,72.872314);
var myOptions = {
zoom: 12,
center: latlng,
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);
});
// add a marker on map
placeMarker(latlng);
};
function placeMarker(location) {
if (marker) {
marker.setMap(null);
marker = null;
placeMarker(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
document.getElementById("id_lat").value = marker.getPosition().toUrlValue();
// worked for me for <input type="text" value="Submit" id="id_lat" style="display:none"/> element
alert(document.getElementById("id_lat").value);
}
};