I need to create info-window out of this code, I'm lacking of application logic and totally new to programming i use this open-source code
This code add users to the map along with their marker
function loadMarkers(data) {
for(key in data) {
var user = data[key];
xmartlabschat.addUser(user);
markers[key] = getMarker(user.lat, user.lng, user.name);
}
}
I tried to use the basic code for info-window
var infoWindow = new google.maps.InfoWindow(user.name);
markers[key].addListener('click', function(){
infoWindowMe.open(map,markers[key);
However this code turns all marker into same name with the user instead of different names since im clicking other users marker
Please Help
Here the screenshot I took
You can try this. Hope this helps.
var locations = [
['Location name', LAT, LON],
['...', ..., ...],
//...
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(LAT, LON),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
var lat = locations[i][1];
var lng = locations[i][2];
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
}); // generates all the markers
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
zIndex: 1000;
infowindow.setContent(locations[i][0]); // replace locations[i][0] with which data you want to show
infowindow.open(map, marker);
}
})(marker, i)); // generates corresponding info-window
}
Related
So this set of code is pulling in locations (Latitude, Longitude, and Address) from a C# backend.
the backend code pulls data from a SQL database and inputs it into the ASP.Net DataField columns.
It was an enhancement to a prebuilt application to include Google Maps.
The locations pull just fine and stepping through it shows the latitude and longitude correctly.
The issue I'm having is that only one marker shows up which looks to be the last one.
Its as if each location isn't actually adding a new marker, but overwriting the current one which leaves the last location as the marker on the map.
What do I need to change to get each location to show up as a new marker?
<script type="text/javascript">
function locate() {
var inputList = GridView1.getElementsByTagName("td");
var rows = GridView1.getElementsByTagName("tr");
// var markers = inputList[0].innerHTML;
for (i = 1; i < rows.length; i++) {
var lat = rows[i].cells[2].innerHTML;
var lng = rows[i].cells[3].innerHTML;
var addr = rows[i].cells[1].innerHTML;
var mapOptions = {
center: new google.maps.LatLng(rows[1].cells[2].innerHTML, rows[1].cells[3].innerHTML),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var markers = [];
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var data = rows[i]
var myLatlng = new google.maps.LatLng(data.cells[2].innerHTML, data.cells[3].innerHTML);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
markers.push(marker);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.cells[1].innerHTML);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</form>
</body>
</html>
You're creating the map and the marker within the same loop. i.e. you're creating a map with a single marker on it, rows times. You want to create the map outside of your loop. Something like this:
function locate() {
var rows = GridView1.getElementsByTagName("tr");
var mapOptions = {
center: new google.maps.LatLng(rows[1].cells[2].innerHTML, rows[1].cells[3].innerHTML),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (i = 1; i < rows.length; i++) {
var data = rows[i];
var myLatlng = new google.maps.LatLng(data.cells[2].innerHTML, data.cells[3].innerHTML);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.cells[1].innerHTML);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
I have a Google map. I created some markers, but I can not hide these markers. I looked at this document. I have one function, but it failed.
function LoadMap () {
var markers = JSON.parse('<%=Stations() %>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
map2 = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions2);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map2,
title:"Hello",
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
icon: InitIcon
});
}(marker, data);
}
}
You need to apply the setMap(null) to your Array of markers.
If your markers variable contains all your markers, you need to loop through each markers and delete each of them using
markers[i].setMap(null);
as shown on your sample
BTW, your code contains somme errors, like a missing ; after var data = markers[i]
This is what I have... PHP pulls down 10 pairs of lat/long from an API url which I have managed to get working okay but I cannot seem to plot them on a map with multiple markers labelled 1-10.
My php code:
<?php
// Loading Domus API
$url_search = 'http://url/site/go/api/search';
$xml_search = #simplexml_load_file($url_search) or die ("no file loaded") ;
//Displaying latitude and longutude
$house = json_encode($house);
}; ?>
JavaScript bit:
var locations = "<?php foreach($xml_search->property as $house) { echo $lat = $house->address->latitude , $long = $house->address->longitude;}; ?>";
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(37.0625,-95.677068),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Which is then needs to be displayed in here
<div id="map" style="width: 500px; height: 400px"></div>
But I just get a blank page, of course.
Okay, I've managed to figure it out.
Here is my php code in the head part
<?php
// Loading Domus API
$url_search = 'http://url/site/go/api/search';
$xml_search = #simplexml_load_file($url_search) or die ("no file loaded") ;?>
Then I have my javascript
// Load property ID followed by Lat and Long for each house (total of 10)
var locations = [<?php foreach($xml_search->property as $house) {
echo '['.$house->id. ',' .$house->address->latitude. ',' .$house->address->longitude.'],';
} ?>];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
Works beautifully, now just need to set up labelled markers and I am good to go.
below is my code, where I've created a geolocation marker and a marker which the user can drag around the map.
I'm wondering what I need to do in order to keep the location of the dragged marker, if the user refreshes. Below is my code:
function initialize() {
var locations = [
['Your Hostel Is Here', 54.911615,-1.377025,],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(54.911615,-1.377025),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
draggable: true
});
localStorage.setItem('marker', marker);
var retrievedmarker = localStorage.getItem('marker');
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
// Check if user support geo-location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var geolocpoint = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 8,
center: geolocpoint,
mapTypeId: google.maps.MapTypeId.HYBRID
}
// Place a marker
var geolocation = new google.maps.Marker({
position: geolocpoint,
map: map,
title: 'Your geolocation',
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
You need to store the lat long value of a marker object in string, rather than the object. Furthermore, your need to listen to the marker mouseup event to store the marker value for later display.
Add this event:
//Record the new marker position
google.maps.event.addListener(marker, 'mouseup', function() {
localStorage.setItem('marker', marker.position.lat() + "," + marker.position.lng());
var retrievedmarker = localStorage.getItem('marker');
});
Edit the following code section:
//Get the last recorded marker position for display
var retrievedmarker = localStorage.getItem('marker');
mylatlng = retrievedmarker.split(",");
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
//position: new google.maps.LatLng(locations[i][1], locations[i][2]),
position: new google.maps.LatLng(mylatlng[0], mylatlng[1]),
map: map,
draggable: true
});
Note: I didn't check for the localStorage key existence, please make sure you check for it before the value retrieval.
I have three arrays : myLats, (latitudes) myLngs (longitudes) and myLocs (address strings)
e.g. myLats[0] = 53.3534751, ,myLngs[0] = -2.5682085, myLocs[0] = Longwood Rd Appleton Warrington. So the elements of each array all correspond to each other numerically.
When constructing the map in my initialize() function, I loop through these to place multiple markers at the correct coordinates, and i'm also trying to have each marker having an infowindow appear when clicked, yet when i click a marker an infowindow simply does not appear. Any help with this would be greatly appreciated.
Code:
function initialize() {
var myOptions = {
center: new google.maps.LatLng(54.00366, -2.547855),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker, infowindow, i;
for (i = 0; i <= myLats.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(myLats[i], myLngs[i]),
map: map,
clickable: true,
icon: '". url::base() ."resources/icons/accident.png',
});
infowindow = new google.maps.InfoWindow({
content: myLocs[i],
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
}
That's a common problem when dealing with more than one marker. You aren't in fact creating a new window for each marker but must redefining the single window for each marker.
You'll find the problem and solution on page 88 onwards of Google Map API V3
If you are new to Google Maps API, I would recommend reading that book, it gave me a great start and I avoided a lot of the "common" mistakes.
Hope this helps.
Jim
I made a few changes, like adding the markers inside a function, adding 'var', and changing i <= myLats.length to i < myLats.length. It was a combination of these changes that made it work.
var myLats = [ 54.20366, 54.42366, 54.64366];
var myLngs = [ -2.54788, -2.66788, -2.78788];
var myLocs = [ "Loc a" , "Loc b" , "Loc c"];
function initialize()
{
var myOptions =
{
center: new google.maps.LatLng(54.00366,-2.547855),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
var marker, infowindow, i;
for (i=0; i < myLats.length; i++)
{
addMarker(i);
}
function addMarker(i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(myLats[i],myLngs[i]),
map: map,
clickable: true,
//icon: '". url::base() ."resources/icons/accident.png',
});
var infowindow = new google.maps.InfoWindow({
content: myLocs[i]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
}
However, I'm guessing you want a solution that keeps only one infowindow open, I had this figured out first:
var myLats = [ 54.20366, 54.42366, 54.64366];
var myLngs = [ -2.54788, -2.66788, -2.78788];
var myLocs = [ "Loc a" , "Loc b" , "Loc c"];
var map, marker, infowindow, i;
function initialize()
{
var myOptions =
{
center: new google.maps.LatLng(54.00366,-2.547855),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
infowindow = new google.maps.InfoWindow({ });
for (i = 0; i < myLats.length; i++) {
addMarker(i);
}
}
function addMarker(i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(myLats[i],myLngs[i]),
map: map,
clickable: true
//icon: '". url::base() ."resources/icons/accident.png'
});
google.maps.event.addListener(marker, 'click', function(event) {
infowindow.setContent(myLocs[i]);
infowindow.open(map,marker);
});
}