Since yesterday I'm trying to add marker in Google Maps Api v3 . I read the documentation and all. Here's my code :
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(28.63, 77.21),
zoom: 8,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
// google.maps.event.addDomListener(window, 'load', initialize);
function getFillingDetails(){
var vehicleId = $('#selectVehicle option:selected').val();
$.getJSON('getFillingDetails.php', {id : vehicleId}, function(data){
var lat = [];
var lon = [];
var price = [];
$.each(data, function(key, value){
lat.push(value.latitude);
lon.push(value.longitude);
price.push(value.price);
});
});
var myLatlng = new google.maps.LatLng(23.72,77.10);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
map: map,
});
}
</script>
Everything looks fine to me. The initialize() function is called after onload of body tag.
And getFillingDetails() function is called when I click a button.
But still I'm getting no success.
You have a syntax error at:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
map: map, <--- get rid of this comma
});
next time you should look in the developer console for any errors.
// To add the marker to the map, call setMap();
marker.setMap(map);
source : https://developers.google.com/maps/documentation/javascript/markers
Related
How do I add a user-input marker to Google Maps widget on my website, and get the latitude and longitude data from it?
Right now I am building an application which has to allow users to drop a marker to any location so that I can get that data and process it.
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(2.8,-187.3),
mapTypeId: 'terrain'
});
// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
document.getElementsByTagName('head')[0].appendChild(script);
}
// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
}
</script>
Right now I am using this, but this doesn't offer any user submitted markers.
Try running this working jsfiddle for demonstration and guidance on how users can place markers on a Google map. Note that it's based off of Google's example on adding and removing markers.
Full JS code below:
var map;
var markers = [];
function initMap() {
var haightAshbury = {
lat: 37.769,
lng: -122.446
};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: haightAshbury,
mapTypeId: 'terrain'
});
// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function(event) {
addMarker(event.latLng);
});
// Adds a marker at the center of the map.
addMarker(haightAshbury);
}
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
You can get the marker's coordinates from the map's click event listener, e.g.:
map.addListener('click', function(event) {
console.log(event.latLng.lat());
console.log(event.latLng.lng());
addMarker(event.latLng);
});
Or from the addMarker method:
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
console.log(marker.getPosition().lat());
console.log(marker.getPosition().lng());
markers.push(marker);
}
Hope this helps!
I have map which was set up on server and based on google map. To embeded it to my webpage I used iframe. Now i need to get lat and long on click to map and than write data to my db. How can i get it?
Here is my iframe
<iframe src="https://my_domain/projects/?first=7&second=123&third=567" width="100%" height="350px" align="left" id="inneriframe" scrolling="no"></iframe>
Here is no initialize or else function that usualy i use for google map, thats why can not get it by functions.
You can initialize the map on window.load and get the value using event addListener.
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(24.18061975930,79.36565089010);
var myOptions = {
zoom:7,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("gmap"), myOptions);
// marker refers to a global variable
marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(map, "click", function(event) {
// get lat/lon of click
var clickLat = event.latLng.lat();
var clickLon = event.latLng.lng();
alert(clickLat.toFixed(5));
alert(clickLon.toFixed(5));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(clickLat,clickLon),
map: map
});
});
}
window.onload = function () { initialize() };
I use a google map with javaScript and my code is :
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-12.043333,-77.028333);
var myOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
google.maps.event.addListener(map, "mousedown", function (e) {
//lat and lng is available in e object
var latLng = e.latLng;
console.log(latLng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>`
The result of e.latLng is an empty object.
I tried to click the event, but the result is empty.
What should I do or change?
Your code is working fine :
Click on map and your coordinates will come in alert
Please check here
In my website, when I'm doing the design the google map was worked. After the hosting it shows an error:
Oops! Something went wrong"
I tried to find the solution and found API key is missing. I had created a key with my personal Gmail account and added to footer place like below.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=my api key=google-map" type="text/javascript"></script>
But after that also it didn't work. below is my google map script in HTML and js.
//Google Map
var latitude = $('#google-map').data('latitude')
var longitude = $('#google-map').data('longitude')
function initialize_map() {
var myLatlng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 14,
scrollwheel: false,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var contentString = '';
var infowindow = new google.maps.InfoWindow({
content: '<div class="map-content"><ul class="address">' + $('.address').html() + '</ul></div>'
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize_map);
});
<div id="google-map" class="wow fadeIn" data-latitude="13.0938666" data-longitude="80.202357" data-wow-duration="1000ms" data-wow-delay="400ms"></div>
My map is missing the pin drop, I tried figuring out the api page but i cant seem to get the pin on my google map. here is my code so far. If anyone has any ideas on how to get that pin on there I would appreciate it.
<!-- GOOGLE MAPS -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
That code is creating a map centered on lat 33.6676314, lng -117.6598071 and I'm pretty sure the map is showing fine. You haven't yet created any markers, so go on and make one. The code to achieve that, in its most basic form is
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: map
});
}
please note that the map property of a marker should point to whatever variable you named your map to. For example:
var AwesomeMap = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: AwesomeMap
});
Position can be any valid LatLng object or LatLng literal. The following, for example, is valid too
var newmarker= new google.maps.Marker({
position: {lat:33.6676314, lng:-117.6598071},
map: AwesomeMap
});
Check this out
http://www.x2tutorials.com/tutorials/google-maps-v3/using-map-markers.php
If this is not what you are trying to achieve, please elaborate on the problem you are facing