function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker ({
position: (51.508742,-0.120850),
map: map,
animation: google.maps.Animation.BOUNCE
});
$.getJSON("muziek.php", function (data){
$.each(data, function() {
$.each(this, function (key, value) {
if (value.location != undefined){
var myLatlng = new google.maps.LatLng(value.location.latitude, value.location.longitude);
var images = value.images.low_resolution.url;
var infowindow = new google.maps.infowindow({
content:
"<img src='" +images+ "'>"
});
google.map.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
});
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
My markers won't put photos on mine google map how can i fix this and put markers with the data from my istagram on mine google maps. I already consolelog my position but i wont get any result back.
I suggest double checking your img sources. The following works fine for me:
var contentString = '<img src="[URL of image]">';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Test',
//animation: google.maps.Animation.BOUNCE
});
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 need to in InfoWindow show match.offer.text.
Each marker has a different match.offer.text.
This is my code:
var markerImageURL, lat, lng;
if (myoffer) {
markerImageURL = 'assets/img/markers/marker_my.png';
lat = match.lat;
lng = match.lng;
} else {
markerImageURL = 'assets/img/markers/marker_' + match.strength + '.png';
lat = match.offer.lat;
lng = match.offer.lng;
}
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: window.googleMap,
icon: {
size: new google.maps.Size(54,56),
url: markerImageURL
},
draggable: false,
visible: true
});
var infowindow = new google.maps.InfoWindow({
content: match.offer.text,
maxWidth: 300
});
window.googleMapMarkers.push(marker);
if(!myoffer) {
window.MVC.Events.GoogleMap.prototype.showInfoWindow(marker, infowindow, match);
}
Event triggered after clicking on the marker:
marker.addListener('click', function() {
infowindow.open(window.googleMap, marker);
}
Please, help me.
The content is applied to the marker on Open therefore your code will apply the content in last item in your loop to all markers, in your openWindow function add the content to a single infoWindow object i.e.
Also the Maps API has its own event wrapper for the click event
function initMarkers(){
//create markers
var marker = new google.maps.Marker();
google.maps.event.addListener(marker, 'click', openInfoWindow(marker, i));
}
var infowindow = new google.maps.InfoWindow();
function openInfoWindow(marker,index){
return function(e) {
//Close other info window if one is open
if (infowindow) {
infowindow.close();
}
var content = marker.offer.text;
infowindow.setContent(content);
setTimeout(function() {
infowindow.open(map, marker);
}, 200);
}
}
I've got code to allow users to pin a marker on a map. What I am missing is how to save the markers so that when the map reloads, the markers are still there.
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var map;
var myCenter=new google.maps.LatLng(38.9047,-77.0164);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:7,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
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 infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You could utilize google.maps.Data API for that purpose, the example below demonstrates how to save and load markers info via localStorage.
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map, marker);
//place marker info
map.data.add(new google.maps.Data.Feature({properties:{},geometry:new google.maps.Data.Point(location)}));
}
function saveMarker() {
map.data.toGeoJson(function (json) {
localStorage.setItem('geoData', JSON.stringify(json));
});
}
function clearMarkers() {
map.data.forEach(function (f) {
map.data.remove(f);
});
}
function loadMarkers(map) {
var data = JSON.parse(localStorage.getItem('geoData'));
map.data.addGeoJson(data);
}
Demo
I'm trying to insert in a google Map,multiple markers,adding them into the map with a cycle;the problem is that I have a function inside the infoWindow() of the marker,but if I try with just two locations,the function is called in both markers,but only with the last value,in other words,the function takes just the last parameters.Here's the code
var luoghi = {"city":[
{ "lat":"45.46" , "lng":"9.19" , "name":"Milano" },
{ "lat":"41.12" , "lng":"16.86" , "name":"Bari" }
]} ;
var marker2,i;
for( i in luoghi.city){
lat = luoghi.city[i].lat;
lng= luoghi.city[i].lng;
var myLatlng = new google.maps.LatLng(lat,lng);
marker2 = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title: ''+myLatlng
});
google.maps.event.addListener(marker2,'click',(function(marker2){
return function(){
if(infoWindow) infoWindow.close();
var contentString = '<p>Visiona meteo e foto utenti flickr in questa zona</p>'+
'<input type= "button" value="Visualizza" onclick="visualizza()">';
infoWindow = new google.maps.InfoWindow({
content: contentString
});
infoWindow.open(map,marker2);
}
})(marker2));
}
The function visualizza() is correct,the problem is in the cycle,I can't figure out why it does not work as I expect. Thanks in advance !
You have a scope problem. Try this :
var luoghi = {"city":[
{ "lat":"45.46" , "lng":"9.19" , "name":"Milano" },
{ "lat":"41.12" , "lng":"16.86" , "name":"Bari" }
]} ;
var marker = {};
var infoWindow = {};
for(var i in luoghi.city){
var lat = luoghi.city[i].lat;
var lng= luoghi.city[i].lng;
var myLatlng = new google.maps.LatLng(lat,lng);
marker[i] = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title: ''+myLatlng
});
infoWindow[i] = new google.maps.InfoWindow({
content: '<p>Visiona meteo e foto utenti flickr in questa zona</p><input type= "button" value="Visualizza" onclick="visualizza()">'
});
google.maps.event.addListener(marker[i], 'click', function(marker){
infoWindow.open(map, marker);
}(marker[i]));
}
Hello I'm retrieving data from SqlServerCe so I created foreach loop to create markers - that works it creates multiple markers but now I wanted to add to each of these marker an infowindow. But now whenever I click on marker the infowindow pops-up on the lastly created marker.
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
, mapProp);
$(function () {
#foreach (var row in data)
{
<text>
var marker = new google.maps.Marker({ position: new google.maps.LatLng(#row.GeoLat, #row.GeoLong),
map: map });
marker.info = new google.maps.InfoWindow({
content: "test"
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
</text>
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
May someone help me with adding infowindow to each created markers?
Thank you for your responding and your time.
This is how I load from SqlServerCe
var db = Database.Open("StarterSite");
var data = db.Query("SELECT DescriptionService,GeoLong,GeoLat FROM services");
var array = new []{data} ;
You can use the following, written in javascript
var infoWindowContent = [];
for(var index=0; index< places.length; index++){
infoWindowContent[index] = getInfoWindowDetails(places[index]);
var location = new google.maps.LatLng(places[index].latitude,places[index].longitude);
bounds.extend(location);
marker = new google.maps.Marker({
position : location,
map : map,
title : places[index].title
});
google.maps.event.addListener(marker, 'click', (function(marker,index){
return function(){
infoWindow.setContent(infoWindowContent[index]);
infoWindow.open(map, marker);
map.setCenter(marker.getPosition());
map.setZoom(15);
}
})(marker,index));
}
function getInfoWindowDetails(location){
var contentString = '<div id="content" style="width:270px;height:100px">' +
'<h3 id="firstHeading" class="firstHeading">' + location.title + '</h3>'+
'<div id="bodyContent">'+
'<div style="float:left;width:100%">'+ location.address + '</div>'+
'</div>'+
'</div>';
return contentString;
}
I added an array infoWindowContent then added the information to the array. You can use the same logic