I want to alert latitude and longitude value based on marker position.
I am unable to do it.
I have recently started learning about google maps api. Please help me along.
In below code my marker is correctly moving between different location but not showing
their latitude and longitude values.
<html>
<head>
<base href="<%=basePath%>">
<style type="text/css">
#map_canvas {
height: 430px;
width: 980px;
position: static;
top: 100px;
left: 200px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var marker;
function initialize() {
var latlng = new google.maps.LatLng(18.9647, 72.8258);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false
};
var 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 == undefined){
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
}
else{
marker.setPosition(location);
}
map.setCenter(location);
google.maps.event.addListener(marker, "click", function (event) {
alert(this.position);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
You don't want to create a separate event for displaying the event - make it part of the code that creates (or moves) the marker, as follows:
function placeMarker(location) {
if (marker == undefined){
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
}
else{
marker.setPosition(location);
}
map.setCenter(location);
alert(marker.position);
}
Rather than using an alert, you can get a much more beautiful effect by following the links given in this answer for a really cool tooltip effect. Definitely worth taking a look - the answer links both a tutorial and a demonstration.
Related
What I want to achieve:
I want to display a search box in google map. When a user search a location, result is displayed in map box. On the map, when a user RightClick, I want to store the marker in database.
Resource I tried to implement
storing marker to database:
https://www.sanwebe.com/2013/10/google-map-v3-editing-saving-marker-in-database
displaying search box in map
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
I tried to implement these two as one: here is my minimal code
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
var map;
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
With this code when I right click on the map, nothing happens i.e. neither the marker shows nor any error.
The map variable needs to be accessible from your create_marker function, therefore you declared it outside of your other functions. But also inside the map_initialize function. Remove the var declaration from there and it will work.
I have edited your original question to include a MCVE which means that I removed 90% of your code to keep only what you were after: adding a marker on right click.
Please take that as a suggestion for how to write your next questions.
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
First of all this is not a duplicate question . Other questions on Stack overflow and other sites don't have the complete thing I am asking for. I do not want a button below the iframe.
I want a button say button like a small red circle over the map in the down right corner of the iframe
Red Circle Button Sample - I want to keep a button like this in bottom right corner of the div/iframe
I have created a fiddle to make you understand the issue.The link is at the last part of the question
Code
HTML
<div id="map"></div>
<script>
var map;
var marker;
var location1 = {
lat: 34.0522,
lng: -118.2437
};
function initMap() {
var myOptions = {
zoom: 13,
center: location1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
marker = new google.maps.Marker({
position: location1,
map: map,
title: 'Click to zoom'
});
}
function changeCenter(center) {
map.setCenter(center);
marker.setPosition(center);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<button type="button" onclick="javascript:changeCenter(location1);">Location 1</button>
CSS
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
#map {
height: 90%;
width: 100%;
}
Also another thing that is not happening - I have kept the default zoom level at 13 , now when I am zooming in 3 times or say zooming out 3 times then when I click on the button I am getting zoom location of my default position as 10 or 16, not that original 13. Please help me with this thing also
#saravana has only solved a little part of my question.
Here is my updated fiddle
updated FIDDLE with zoom issue solved
The major thing is still there - I want to create a custom button over the map. Please help me with that
Please replace your changecenter function to below code
function changeCenter(center) {
map.setCenter(center);
map.setZoom(13);
marker.setPosition(center);
}
You can set zoom level by using map.setZoom() function. Cheers!!!
Update:
Please replace your html code to below code in fiddle
we have to add custom button or image manually in the google map. I hope this will help
<div id="map"></div>
<div><img src="http://www.clker.com/cliparts/X/9/P/m/2/g/transparent-red-circle-md.png" width="25px" style="position: fixed;z-index: 9999; right:10px; top:225px; float: right;" onclick="javascript:changeCenter(location1);"></div>
<script>
var map;
var marker;
var location1 = {
lat: 34.0522,
lng: -118.2437
};
function initMap() {
var myOptions = {
zoom: 13,
center: location1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
marker = new google.maps.Marker({
position: location1,
map: map,
title: 'Click to zoom'
});
}
function changeCenter(center) {
map.setCenter(center);
map.setZoom(13);
marker.setPosition(center);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<button type="button" onclick="javascript:changeCenter(location1);">Location 1</button>
When I load the site everything is displayed fine, but the google map is not loaded until I resize my web browser. I am using jquery mobile.
here attached the html and script i used
<div id="map-canvas" id="map-canvas" style="width: 100%; height: 600px; padding: 0;">
</div>
<script type="text/javascript">
shopLAT[1] = 30.197932;
shopLONG[1] = -97.710452;
</script>
<!-- Google Maps -->
<script type="text/javascript">
map="";
//function loadMap() {
var latLng = new google.maps.LatLng(shopLAT[1], shopLONG[1]);
var mapOptions = {
center: latLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var infowindow = new google.maps.InfoWindow({content: "Marker"});
var contentString = "<b>Customer:</b> George Adams";
var marker = new google.maps.Marker({
position: latLng,
map: map,
html: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
//}
$(document).ready(function(){
$("#idmaptab").bind('onClick', function() {
google.maps.event.trigger(map, 'resize');
$("#map-canvas").css("height","100%");
});
});
</script>
Try to set the map-canvas height and width in pixels. Then reload the page. See if that helps.
In css:
#map-canvas{
width: 200px;
height:200px;
}
here is my code i have done upto this point where when i add marker and hover it infowindow appears, but all of them has the same infowindow i need it to be change for each marker, second instead of clicking on the marker it gets deleted i want to creat a custom menu box on the top of marker where there should be options to add info and delete whe i click the marker.
<html>
<head>
<title>example</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
#map_canvas {
width: 100%;
height: 500px;
background-color: #CCC;}
#menu_bar{
width: 100%;
height: 150px;
position:absolute;
bottom:0px;
background-color:#008080;
border-top:1px solid red;}
body{
padding:0px;
margin:0px;}
</style>
<!-- google maps Scripting start -->
<script type="text/javascript">
var markers = [];
function initialize() {
var myLatlng = new google.maps.LatLng(44.5403, -78.5463);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
// add marker to positon
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
// deleting
google.maps.event.addListener(marker, 'click', function(event) {
this.setMap(null);
});
// adding info window to gMaps
var infowindow = new google.maps.InfoWindow({
content: "holdings content area"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- google maps Scripting ends -->
</head>
<body>
<div id="map_canvas"></div>
<div id="menu_bar">
</div>
</body>
</html>
First create a menu or popup or whatever you want in a html copy this html into javascript variable, next create gMap infoWindow and set content to your custom design, in last step bind event to your marker and in that event open your infowindow.
var map = new google.maps.Map(document.getElementById('yourmap'), mapOptions);
var popup= '<div>Design your whatever styled popup you want</div>';
var infowindow = new google.maps.InfoWindow({
content: popup
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'ABC'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
I have been working with google maps and now have a requirement to make a draggable marker that I can place on the map.
Is this a big difference in complexity from just placing markers by geolocation coordinates? What is the best way of going about making draggable markers that users can set?
Thank you,
Alex
You dont mention which version of the API you are using, so i will asume v3... There is a draggable property that you can either set in the constructor using the options parameter 'draggable: true' or by invoking the setDraggable(true) function after it is created.
Check http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker for more info.
Edit: For version 2 there are enableDragging() and disableDragging() functions...
As for adding markers, perhaps subscribe to the mouse click event on the map, and then add a marker in there. The coordinates are passed into the event handling function as part of the event parameter.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function (responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(9.010951935679284, 38.760017580032354);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 15,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function () {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function () {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function () {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
#mapCanvas {
width: 500px;
height: 400px;
float: left;
}
#infoPanel {
float: left;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
</style>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="mapCanvas"></div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div id="info"></div>
<b>Closest matching address:</b>
<div id="address"></div>
</div>
</body>
</html>