Showing additional marker in google map through ajax - javascript

I have created a google map using "maps.googleapis.com/maps/api/js?v=3". In that map I am showing markers for different locations, which is working fine. Below is the code which i have used.
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
});
Now I want to add some more location markers in Ajax. For ex: I will add the location name from a dropdown, it will do an ajax call to the server side. Pull out the location latitude and longitude and will show in the map. How can i achieve it.
I have written a separate js function to do the ajax call, but inside that the code is not getting 'map' instance.Here I have used only this code
new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
Here I am not initializing the map again. So its not getting the map instance and throwing error. How to fix it.

The scope of your map is limited to inside your event handle. Try this:
var map, markerCollection;
google.maps.event.addDomListener(window, 'load', function() {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
function addMarker(lat, lng){
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lng),
});
markerCollection.push(marker);
}
NOTES:
1) Be to fill in the values for "latitude" and "longitude" when defining the center of your map. Otherwise you just would get a map displayed.
2) I know it might not be the best practice to add your markers into an array but I find this makes than easy to access latter.

Since map is not a global variable it is getting dereferenced. Make the map object either global or within a container function that stores all of your code.
Global JS example
//now it's global
var map;
google.maps.event.addDomListener(window, 'load', function () {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
});

Related

How to display markers from firestore using JS?

I'm trying to display markers from Firestore, but nothing happens.
Every solution that I found had coordinates stored like this so I think that the problem might be in the marker position in my code, but I don't know how to fix it.
This is what my Firestore looks like
and my code for displaying markers.
function initialize() {
var latlng = new google.maps.LatLng(58.2600006, 22.5297743);
var myOptions = {disableDefaultUI: true, zoom: 9, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map"), myOptions);
firebase.firestore().collection('markers').get().then((snapshot) => {
snapshot.forEach(function(child) {
console.log(child);
var marker = new google.maps.Marker({
position: {lat: parseFloat(child.lat), lng: parseFloat(child.lng)},
map: map,
});
});
});
}

Place a Javascript API Google Map with iFrame

I need to place a Google Map made using Javascript API within an iFrame so that I can perform operations on the map and then submit a form that I create below that takes values from the map, for example, the latitude and longitude. How can I make that happen?
<script>
var map;
var circle=null;
myLatlng = {lat: 28.713956, lng: 77.006653};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: myLatlng,
zoom: 13
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'click', function (event) {
document.getElementById("lat").value = event.latLng.lat();
document.getElementById("long").value = event.latLng.lng();
marker.setPosition(event.latLng);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<my-API-key>&callback=initMap"></script>
Also, I need to process the data coming from the map, so I don't want to use Google Maps Embed API. I know it can be placed in an iFrame using it. I have tried doing that but that is not what I need.

missing the pin on google map

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

Markers not showing on google maps

I'm trying to show markers on my map. but it's not showing them.
this is the code I use:
var map;
var markers = new Array();
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(27.9881, 86.9253),
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'click', addMarker);
}
function addMarker(event) {
markers.push(event.latLng);
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
console.log(markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
the console is logging on every click an new coordinate, so the function is called, and coordinates are passed. And I can't really see any problems in the marker code.
So can anyone see the problem?
map is a local variable, only visible inside initialize.
Use this instead of map when you set the map-property of the marker:
function addMarker(event) {
markers.push(event.latLng);
marker = new google.maps.Marker({
position: event.latLng,
map: this
});
}
Explanation:
the callback will be executed in the scope of the object that triggers the event. Here it is the Maps-instance(because the click-listener has been applied to the map ), this will refer to this object inside the callback.
markers.push(event.latLng);
Here you're pushing the latlng, not the marker.
markers is an array variable with global scope, whereas marker is a local variable.
In markers array you have to insert each inidividual marker and then process it.
function addMarker(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
markers.push(marker);
}

google maps API v3 set marker and get point

I have a problem to set marker and get latitude and longitude for that marker. How can I do that in google maps v3 API
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("divGoogleMaps"), myOptions);
google.maps.event.addListener(map, 'click', function() {
});
this is my start code.
You should check Google Maps API doc web-site they have a fex example to help you started.
http://code.google.com/apis/maps/documentation/javascript/basics.html
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
Here you set a marker and get the position.
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
Taken directly from Google Maps API v3
If you want to attach an event listener to the marker, it is advisable to do it right after you add it to the map, while you still have a fresh reference to it (in the case where you're potentially looping through some marker adding code, as is common).

Categories