if I'm having code below to initialize google map onload
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var lat = 45.430817;
var lon = 12.331516;
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(lat, lon),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
</script>
how can I modify this to load this map only on certain event (click on tab with id = tab-link)
<li id="tab-link">Show map </li>
var myCenter=new google.maps.LatLng(45.430817, 12.331516);
var marker=new google.maps.Marker({
position:myCenter
});
function initialize() {
var mapProp = {
center:myCenter,
zoom: 14,
draggable: false,
scrollwheel: false
};
var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
};
$(document).ready(function(){
$('#tab-link').bind('click', function() {
initialize()
});
});
Related
I want to move my marker and get the long and lat when I click the map.
Currently, my map is displayed but I'm unable to change the marker location.
I tried imitating coder in this .
My reference uses the button to change the location of the marker. In my situation, I need to click on the map. I tried to modify it to cater my situation and still not working.
here is my code :
jQuery(document).ready(function( $ ) {
function myMap(lat,long) {
var myCenter = new google.maps.LatLng(lat,long);
var mapCanvas = document.getElementById("googleMap");
var mapOptions = {
center: myCenter,
zoom: 15,
treetViewControl: false,
mapTypeControl: false
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
//sets variable for lat and long
$('.lat').text(lat);
$('.long').text(long);
}
function newLocation(newLat,newLng)
{
map.setCenter({
lat : newLat,
lng : newLng
});
}
google.maps.event.addDomListener(window, 'load', myMap(3.1412,101.68653));
$(document).ready(function ()
{
google.maps.event.addListener(map, 'click', function(event) {
newLocation(event.myCenter);
});
});
});
1) click on map and change marker's position to where you clicked
var map, marker;
$(document).ready(function() {
function myMap(lat,long) {
var myCenter = new google.maps.LatLng(lat,long);
var mapCanvas = document.getElementById("googleMap");
var mapOptions = {
center: myCenter,
zoom: 15,
treetViewControl: false,
mapTypeControl: false
};
map = new google.maps.Map(mapCanvas, mapOptions);
marker = new google.maps.Marker(
{
position:myCenter,
draggable: true
}
);
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
//sets variable for lat and long
$('.lat').text(lat);
$('.long').text(long);
}
function newLocation(newLat,newLng)
{
map.setCenter({
lat : newLat,
lng : newLng
});
}
google.maps.event.addDomListener(window, 'load', myMap(3.1412,101.68653));
$(document).ready(function ()
{
// click on map and set you marker to that position
google.maps.event.addListener(map, 'click', function(event) {
marker.setPosition(event.latLng);
});
});
});
2) change a marker's position by drag and drop
var map;
$(document).ready(function() {
function myMap(lat,long) {
var myCenter = new google.maps.LatLng(lat,long);
var mapCanvas = document.getElementById("googleMap");
var mapOptions = {
center: myCenter,
zoom: 15,
treetViewControl: false,
mapTypeControl: false
};
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker(
{
position:myCenter,
draggable: true // set marker draggable
}
);
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
// when dragend, show new lat and lng in console
google.maps.event.addListener(marker, 'dragend', function(){
console.log("lat: "+marker.position.lat())
console.log("lng: "+marker.position.lng())
})
//sets variable for lat and long
$('.lat').text(lat);
$('.long').text(long);
}
function newLocation(newLat,newLng)
{
map.setCenter({
lat : newLat,
lng : newLng
});
}
google.maps.event.addDomListener(window, 'load', myMap(3.1412,101.68653));
$(document).ready(function ()
{
google.maps.event.addListener(map, 'click', function(event) {
newLocation(event.myCenter);
});
});
});
Is it possible to add the LatLng to the label of the marker that is placed at random to show where that marker is? Also considering the infoWindow option but have not been successful yet.
var map;
var markers = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markersIndex = 0;
function initialize() {
var Wilm = new google.maps.LatLng(34.2257,-77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map-
canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
label: markers[markersIndex++ % markers.length],
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
Not sure what you mean by a label.
this will add markers to the map with an info window with the latlng:
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap">
</script>
I have written code to display a marker on a googlemap. The code is copied almost verbatim, from the Google API docs. Yet the marker is not displaying on the page.
Here is my code: What am I doing wrong?
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.setMap(map);
});
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I notice that there are similar questions, the only thing that seems to be different with my question is that I am creating my marker in the jQuery ready() event - NOT the initialize() function.
Is this why the marker is not been displayed?
Note: I don't remember reading anything in the Google API docs that states that markers should be created when the map is being created, so that can't obviously be the case
Move your marker creation to the initialize function.
$(document).ready(function(){}) works when DOM elements are loaded, which doesn't necessarily mean that the map is loaded. So if you try to create the marker in the document ready function, the map might not be created then, once the map is ready map variable has the map object, so you can make the marker on that, and you can add the markers dynamically after the map is loaded.
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
console.log('map loaded');
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
makePin(42.745334, 12.738430);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
console.log('document loaded');
})
function makePin(lat, long){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
title: 'This is the title'
});
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<button onclick="makePin(42.749334, 12.739430)">Add Pin</button>
<div id="map"></div>
How can you make marker without loaded map. Map need to initialize first then marker will work
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
marker.setMap(map);
}
Here is the solution:
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
});
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I embed custom google map to my homepage (under contact) - but how to set the marker on the map and map itself on the right place?
addition to html was:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="map.js"></script>
and js code is:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
In initialize function you need add var marker variable. Below is simple example to set marker on map when click. Hope this help
function initializeMap() {
var options = {
center: new google.maps.LatLng(21.1569, 106.113),
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'), options);
directionsDisplay = new google.maps.DirectionsRenderer();
infoWindow = new google.maps.InfoWindow();
marker = new google.maps.Marker();
directionsDisplay.setMap(map);
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
geocoder.geocode({latLng : location}, function(response, status){
if (status == google.maps.GeocoderStatus.OK) {
console.log(response);
if (response[0]) {
marker.setMap(map);
marker.setPosition(location);
infoWindow.setContent(response[0].formatted_address);
infoWindow.open(map, marker);
}
}
});
}
I have implemented the Google map successfully. But one more thing has left to do. I need to retrieve the Longitude and Latitude data when the user clicks on the map (any co-ordinates). My entire code looks like this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(<?=$decimalValueLon?>,<?=$decimalValueLat?>);
var myOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// marker STARTS
var marker = new google.maps.Marker({
position: myLatlng,
title:"Click to view info!"
});
marker.setMap(map);
// marker ENDS
// info-window STARTS
var infowindow = new google.maps.InfoWindow({ content: "<div class='map_bg_logo'><span style='color:#1270a2;'><b><?=$row->bridge_name?></b> (<?=$row->bridge_no?>)</span><div style='border-top:1px dotted #ccc; height:1px; margin:5px 0;'></div><span style='color:#555;font-size:11px;'><b>Length: </b><?=$row->bridge_length?> meters</span></div>" });
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
// info-window ENDS
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>`
Thanks in advance !
You can add a click-handler like you have a load handler:
google.maps.event.addListener(map, "click", function (e) {
//lat and lng is available in e object
var latLng = e.latLng;
});
<script>
var map;
function init_map() {
var opts = { 'center': new google.maps.LatLng(35.567980458012094,51.4599609375), 'zoom': 5, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById('mapdiv'), opts);
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('latlongclicked').value = event.latLng.lat()
document.getElementById('lotlongclicked').value = event.latLng.lng()
});
google.maps.event.addListener(map,'mousemove',function(event) {
document.getElementById('latspan').innerHTML = event.latLng.lat()
document.getElementById('lngspan').innerHTML = event.latLng.lng()
});
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>