How do I take Google map coordinates from the map and automatically populate another form element?
This is my form: http://www.barbadosphonebook.com/list-your-business-for-free/. At the bottom there is a Google map which, on-click, displays the coordinates. I would love it to also populate the element below with the coordinate data.
My map code:
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(13.175771, -59.556885);
var myOptions = {
zoom: 10,
center: latlng,
navigationControl: true,
mapTypeControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//
var contentString = '<strong>Copy the numbers between the brackets</strong><br />';
google.maps.event.addListener(map, 'click', function(event) {
new google.maps.InfoWindow ( { position: event.latLng, content: contentString+event.latLng.toString() } ).open(map);
});
}
</script>
You could try changing your map click listener to this:
google.maps.event.addListener(map, 'click', function(event) {
new google.maps.InfoWindow ( { position: event.latLng, content: contentString+event.latLng.toString() } ).open(map);
$('.ginput_container input').val(event.latLng.toString());
});
Related
<Body>
<!--Button to pull out marker co-ords-->
<p><button onclick="document.getElementById('latlnginpara').innerHTML = map.marker.getBounds()">Get map bounds</button></p>
<!--This is where the co-ords will sit for now-->
<div id="latlnginpara"></div>
<!--This plots a slot for the map-->
<div id="map" style="width:100%;height:500px;"></div>
<!--Now starts the Map fun-->
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var mapOptions = {
center: myCenter,
zoom: 5,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true,
};
var map = new google.maps.Map(mapCanvas, mapOptions);
//1 marker bit
var marker;
function placeMarker(location) {
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
}
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5WIxyWvYfFU3vY27DM7mc-JClPwPLB0A&callback=myMap"></script>
</Body>
For the life of me, I'm trying to get co-ordinates OUT of google maps from a marker, for later use in a database......
I have most of the code but I can't seem to get it to work together!
This super brain helped someone get 1 marker that updates
GoogleMaps v3 API Create only 1 marker on click
This code pulled out co-ordinates into the body of the page.
https://www.w3schools.com/graphics/tryit.asp?filename=trymap_ref_getbounds
But all together....
Your help would be much appreciated!!!
You can simply get the marker's coordinates using .lat() and .lng().
var marker, map;
function placeMarker(location) {
if (marker) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
}
document.getElementById('location').textContent = location.toString();
document.getElementById('lat').textContent = location.lat(); // get latitude
document.getElementById('lng').textContent = location.lng(); // get longitude
}
function myMap() {
var mapCanvas = document.getElementById("map");
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var mapOptions = {
center: myCenter,
zoom: 5,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true,
};
map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
myMap();
<!--Button to pull out marker co-ords-->
<p><button onclick="document.getElementById('latlnginpara').innerHTML = map.marker.getBounds()">Get map bounds</button></p>
<p id='location'></p>
<p id='lat'></p>
<p id='lng'></p>
<!--This is where the co-ords will sit for now-->
<div id="latlnginpara"></div>
<!--This plots a slot for the map-->
<div id="map" style="width:100%;height:500px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5WIxyWvYfFU3vY27DM7mc-JClPwPLB0A&"></script>
Many thanks! This is the answer
var marker, map;
function placeMarker(location) {
if (marker) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
}
document.getElementById('location').textContent = location.toString();
document.getElementById('lat').textContent = location.lat(); // get latitude
document.getElementById('lng').textContent = location.lng(); // get longitude
}
function myMap() {
var mapCanvas = document.getElementById("map");
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var mapOptions = {
center: myCenter,
zoom: 5,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true,
};
map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
myMap();
<!--Button to pull out marker co-ords-->
<p><button onclick="document.getElementById('latlnginpara').innerHTML = map.marker.getBounds()">Get map bounds</button></p>
<p id='location'></p>
<p id='lat'></p>
<p id='lng'></p>
<!--This is where the co-ords will sit for now-->
<div id="latlnginpara"></div>
<!--This plots a slot for the map-->
<div id="map" style="width:100%;height:500px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5WIxyWvYfFU3vY27DM7mc-JClPwPLB0A&"></script>
I've googled and searched deeply in stackoverflow with no results.
i have the following code:
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(45.47554, 9.204712),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(map, "click", function (event) {
alert("click");
});
</script>
and when I click on map I haven't the alert. Where am I wrong please? Thank you.
You mentioned no way to add a marker, in this case to add a marker in the map you can use following code
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
// options
});
// Add a marker at center/current latlng
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Some Title'
});
// To add a click event on the marker you can use
google.maps.event.addListener(marker, 'click', function() {
// ...
});
}
Read more.
Currently I'm trying to set markers on a map based on user clicks. I have tried everything I can think of and NOTHING works. It seems as though my map doesn't even detect clicks. Currently, I'm trying to keep the script as simple as possible, I'm just trying to detect clicks on the map at this point:
<script type="text/javascript">
function initialize()
{
<!-- Set the initial location-->
var latlng = new google.maps.LatLng(44, -71);
<!-- initialization options -->
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
<!-- The map variable
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- END INITIALIZE -->
}
google.maps.event.addDomListener(window, 'load', initialize);
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
</script>
I've tried so many variants on this sort of code, every it never works. If I change it to "addDomListener(window, ...)" it works, but never using the map as the listener. Ideas?
EDIT: OK, solved it by changing the function somewhat and changing its location in the script:
<script type="text/javascript">
function initialize() {
<!-- Set the initial location -->
var latlng = new google.maps.LatLng(44, -71);
<!-- initialization options -->
var myOptions = {
minZoom: 3,
zoom: 8,
maxZoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
<!-- The map variable-->
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- Add the functionality of placing a marker on a click-->
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
alert('You clicked the map.'+event.latLng);
});
<!-- END INITIALIZE -->
}
google.maps.event.addDomListener(window, 'load', initialize);
<!-- Add the functionality of placing a marker on a click-->
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
alert('You clicked the map.'+event.latLng);
});
</script>
I guess you place this code in improper place (or do it in improper time). Recently I've encountered with the same problem and it took some time to solve it. Look what works for me:
var mapservice = {};
mapservice.map = {};
mapservice.options = {};
mapservice.putMarker = {};
mapservice.init = function (divName, textSearch)
{
this.options =
{
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map($(divName)[0], this.options);
google.maps.event.addListener(this.map, 'click', function (event)
{
mapservice.putMarker(event.latLng);
});
}
mapservice.putMarker = function (location)
{
//...
}
I have a map_canvas with a width of 225.
I want my infobox to be smaller than this (eg. 150 px).
Is this possible? I tried maxWidth and adding styles, but nothing seemed to work.
A screen (on imgshack) can be found below:
Also,
I'm using v3 of Google Maps
Javascript:
var results_coods;
var map_2;
var marker_2;
var infowindow_2;
function call_gmap()
{
if($('#map_text').attr('lat')){
var lat = Number($('#map_text').attr('lat').replace(",","."));
var lng = Number($('#map_text').attr('long').replace(",","."));
initialize(lat,lng);
/*
var lat= '51.0153389';
var lng = '2.7253832';
*/
}
}
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 13,
center: latlng,
disableDefaultUI: true,
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
draggable: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: $('#map_text').html(),
maxWidth: 150
});
var image = 'beachflag.png';
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.open(map,marker);
google.maps.event.addListener(
marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
function GcodeAddress()
{
var map;
geocoder = new google.maps.Geocoder();
var address = $('#map_address').html();
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 13,
center: results[0].geometry.location,
navigationControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infowindow = new google.maps.InfoWindow({
content: $('#map_text').html()
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
results_coods = results[0].geometry.location;
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
infowindow.open(map,marker);
google.maps.event.addListener(
marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.trigger(map, 'resize');
marker_2 = marker;
map_2 = map;
infowindow_2 = infowindow;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
function resizeMap()
{
//hiervan komt 1 error, de andere van infowindow
google.maps.event.trigger(map_2, 'resize');
map_2.setCenter(results_coods);
infowindow_2.open(map_2,marker_2);
}
Javascript, bottom of html page:
$(document).ready(function($) {
GcodeAddress();
resizeMap();
});
HTML (VB.Net):
'-- Google Map
g_map_text.Text = "<div id=""map_canvas"" style=""width: 225px; height: 225px; position: relative;"" /></div>" & vbCrLf
g_map_text.Text &= String.Format("<div id='map_text' style=""display:none;width:150px;"">{0}</div>", LoadKantoor)
g_map_text.Text &= String.Format("<div id='map_address' style='display:none;' >{0}</div>", Bedrijf.Bedrijf("postalcode") & " " & Bedrijf.Bedrijf("city") & "," & Bedrijf.Bedrijf("address"))
An easier approach is to style using CSS. You need wrap the contents of the infoWindow in a div with your custom CSS.
Javascript:
marker.openInfoWindowHtml('<div class="iwContainer">' + yourContent + '</div>');
CSS:
.iwContainer {
width: 300px;
height: 200px;
}
Are you setting the maxWidth for the infowindow before the call to open as described here
EDIT:
I've looked at this again and it looks fine. I don't understand why it doesn't work.
You could use InfoBox.js instead?
API Reference: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
Download JS: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/
Examples: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/
Let me know how you get on.
Maybe you interested using this infobubble:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/
you can apply css on this and easy to custom with the example
I have a map with two markers on it.
The initial view of the map only shows one marker, and I want to provide a link next to the map that will move the map to the 2nd marker when clicked.
Here's a demo of what I want, using v2 of the API: http://arts.brighton.ac.uk/contact-university-of-brighton-faculty-of-arts (note the links below the map)
Here's what I have so far:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(50.823817, -0.135634);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
} ,
scaleControl: false
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
// 1st marker
var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(50.823817, -0.135634), map: map, title: 'my title' });
var infowindow = new google.maps.InfoWindow({ content: 'my window content' });
google.maps.event.addListener(marker1, 'click', function() { infowindow.open(map, marker1); });
// 2nd marker
var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'});
var infowindow2 = new google.maps.InfoWindow({ content: 'content for my 2nd window' });
google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map, marker2); });
}
</script>
So what I'd like to add is a link to marker2, to move the map some 50-odd miles up,
e.g. Second location.
How would I do this?
Use addDomListener to add a click event to the link that will move the map to that marker (you'll also need to add an id to the link tag so you can reference it in code):
Edit: Set the event in a initialization function:
<head>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'});
google.maps.event.addDomListener(document.getElementById("linkID"), "click", function(ev) {
map.setCenter(marker2.getPosition());
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
Second place
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>