I trying to add gmap to my app.I have on the page table and div with map, and I want to make sure that the user when add marker on the map - in table add one row.
there is my script (default script from google example)
window.onload = function() {
var mapOptions = {
center: new google.maps.LatLng(21.0000, 78.0000),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
var location = e.latLng;
var marker = new google.maps.Marker({
position: location,
map: map
});
google.maps.event.addListener(marker, "click", function(e) {
var infoWindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br />Longitude: ' + location.lng()
});
infoWindow.open(map, marker);
});
});
};
sorry for my bad English
In the Google example you provided, you would do it after the line
google.maps.event.addListener(map, 'click', function(e) {
You could insert something like
$('myTable').append('<tr><td>THIS IS MY NEW ROW</td></tr>');
depending on what your "row" should hold.
Related
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 a problem with my GeoJson layers which I want to cluster (with MarkerClusterer) and then be able to show and hide them via checkboxes or similar. Therefore I tried something like the code below:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.515696, 13.392624),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var bounds = new google.maps.LatLngBounds();
var barLayer = new google.maps.Data();
var cafeLayer = new google.maps.Data();
barLayer.loadGeoJson('json/eat_drink/bar.geojson');
cafeLayer.loadGeoJson('json/eat_drink/cafe.geojson');
var markerClusterer = new MarkerClusterer(map);
var infowindow = new google.maps.InfoWindow();
markerClusterer.setMap(map);
function displayMarkers(layer) {
var layer = layer;
google.maps.event.addListener(layer, 'addfeature', function (e) {
if (e.feature.getGeometry().getType() === 'Point') {
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'),
map: map
});
// open the infoWindow when the marker is clicked
google.maps.event.addListener(marker, 'click', function (marker, e) {
return function () {
var myHTML = e.feature.getProperty('name');
infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
infowindow.setPosition(e.feature.getGeometry().get());
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
infowindow.open(map, marker);
};
}(marker, e));
markerClusterer.addMarker(marker);
bounds.extend(e.feature.getGeometry().get());
map.fitBounds(bounds);
map.setCenter(e.feature.getGeometry().get());
}
});
layer.setMap(null);
google.maps.event.addListener(map, "click", function () {
infowindow.close();
});
};
document.getElementById('bar').onclick = function(){ // enable and disable markers
if(document.getElementById('bar').checked == true){
displayMarkers(barLayer);
}else{
return null;
}
};
}
Unfortunatley this doesn't work and I don't no exactly why.
If I remove the displayMarkers() function around the code and replace "layer" with the desired GeoJson layer, e.g. "barLayer", it works just fine.
Since I will end up with tons of GeoJason layers I would prefer a "compact" solution like this insted of copying the code multiple times. Have you guys any ideas how to do that properly?
I'm afraid I haven't done much more than refactor your code. Could you give this a try, and if it doesn't work specify exactly what doesn't work?
function displayMarkers(layer, map, markerClusterer) {
google.maps.event.addListener(layer, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'Point') {
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'),
map: map
});
// open the infoBox when the marker is clicked
google.maps.event.addListener(marker, 'click', function(e) {
var myHTML = e.feature.getProperty('name');
var infowindow = new google.maps.InfoWindow();
infowindow.setContent("<div style='width:150px; text-align: center;'>" + myHTML + "</div>");
infowindow.setPosition(e.feature.getGeometry().get());
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -30)
});
infowindow.open(map, marker);
google.maps.event.addListener(map, "click", function() {
infowindow.close();
});
});
markerClusterer.addMarker(marker);
var bounds = new google.maps.LatLngBounds();
bounds.extend(e.feature.getGeometry().get());
map.fitBounds(bounds);
map.setCenter(e.feature.getGeometry().get());
}
});
layer.setMap(null);
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.515696, 13.392624),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var barLayer = new google.maps.Data();
var cafeLayer = new google.maps.Data();
barLayer.loadGeoJson('json/eat_drink/bar.geojson');
cafeLayer.loadGeoJson('json/eat_drink/cafe.geojson');
var markerClusterer = new MarkerClusterer(map);
markerClusterer.setMap(map);
document.getElementById('bar').onclick = function() { // enable and disable streetViewControl
if (document.getElementById('bar').checked == true) {
displayMarkers(barlayer, map, markerClusterer);
} else {
return null;
}
};
}
Why is it that only the first (one only) InfoWindow showing on Google Map? I want all of the pinned address show InfoWindow.
I already searched for answers like Only the first marker showing on google map , Google Maps API InfoWindow only showing the first location for all the markers and Google maps-api v3 InfoWindow automatically open on page load but still no luck.
here is my code.
$scope.initialise = function(){
$http.get('http://remoteapi.com/' + $scope.name)
.success(function(data)
{
var myLatlng = new google.maps.LatLng(8.4844173, 124.6526134);
var mapOptions = {
center: myLatlng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for( var i in data ) {
var position = new google.maps.LatLng(data[i].lat, data[i].lon);
marker = new google.maps.Marker({
position: position,
map: map,
content: data[i].description
});
var infowindow = new google.maps.InfoWindow({
content: "<img style='max-width:50px;max-height50px;' src='images/"+data[i].image+"'>"
});
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
});
};
google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());
I've looked at all the suggestions from previously asked questions similar to mine, as well as following the google maps api developers info page on overlays, but no answers have helped - I'm trying to simply change the color of the markers from the standard to green, but every time I try and add fillColor, etc. to my code it either won't show the marker or won't show the map at all. Anyone have any idea what I'm doing wrong?
function createMap() {
// map options
var options = {
zoom: 4,
center: new google.maps.LatLng(39.909736, -98.522109), // centered US
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
// init map
map = new google.maps.Map(document.getElementById('map_canvas'), options);
}
function addMarker() {
fetchNewQuote();
var indext;
for (indext = 0; indext <array.length; ++indext) {
splitarr = array[indext].split(":");
geosplit = splitarr[1].split(", ");
if (indext < 50) {
$('#tweet_table').append(array[indext] + "</br></br>");
}
var marker = new google.maps.Marker({
position: new google.maps.LatLng(geosplit[0], geosplit[1]),
map: map,
title: 'Click me to see what this individual tweeted!'
});
(function(marker, splitarr, indext) {
var tweetclick = "TOBACCO VISUALIZATION</br>" + "Keyword: " + splitarr[0] + "</br> Coordinates: " + splitarr[1] + "</br> Tweet: " + splitarr[2];
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({
content: tweetclick
});
infowindow.open(map, marker);
});
})(marker, splitarr, indext);
marker.setMap(map);
markersArray.push(marker);
}
}
You can load your own marker like this :
var icon = https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|00FF00
You have to pass the color of the marker at RGB format after the pipe. If you want a blue marker, just pass 0000FF instead of 00FF00.
Then, use it like this :
var marker = new google.maps.Marker({
position: new google.maps.LatLng(geosplit[0], geosplit[1]),
map: map,
title: 'Click me to see what this individual tweeted!'
icon: icon
});
Hope this helps !
I currently have a googlemap canvas with a sidebar with links that when clicked, take the user to the latlong location with a marker and infowindow. When the map is loaded, this is centered but when they click the links the map doesnt pan to the center with the marker in the middle.
I have tried added a map.setCenter within my marker function but this makes the map and markers disappear with no errors in my console. Can anyone guide me to a snippet of code or tutorial which could help? Here is my example code:
<script type="text/javascript">
var side_bar_html = "";
var gmarkers = [];
var map = null;
function initialize() {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(46.18363372751015,12.4530029296875),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var point = new google.maps.LatLng(46.18363372751015,12.4530029296875);
var marker = createMarker(point,"example 1","location 1 info")
var point = new google.maps.LatLng(39.31517545076218, 35.25238037109375);
var marker = createMarker(point,"example 2","location 2 info")
document.getElementById("marker_list").innerHTML = side_bar_html;
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50),
});
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position:latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
gmarkers.push(marker);
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
</script>
If you want the map to center on the marker when it is clicked, you need to write code to do that. By default it pans so the InfoWindow is visible. Change this:
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
To something like:
function myclick(i) {
map.setCenter(gmarkers[i].getPosition());
google.maps.event.trigger(gmarkers[i], "click");
}