this line is not working and no error in console.
position: new google.maps.LatLng( coordsArray[i].location ),
data confirmed by alert(coordsArray[i].location);location been database field returning LatLng -43.59670,172.38247 as a string.
This line works: position: new google.maps.LatLng( -43.59670,172.38247 ),
What is the same data as above, any ideas what wrong with my code?
var list_location = localStorage.getItem('myHouse');
var obj = JSON.parse(list_location);
var coordsArray = obj;
var marker;
var locX;
var image = 'http://apppics.weebly.com....png';
var map = Appery("googlemap_6").options.mapElement.gmap('get', 'map');
var CreateMarker = function(coordsArray, i){
var marker = new google.maps.Marker({
position: new google.maps.LatLng( coordsArray[i].location ),
//position: new google.maps.LatLng( -43.59670,172.38247 ),
title: coordsArray[i].storeName,
map: Appery("googlemap_6").gmap,
});
for (var i = 0, j = coordsArray.length; i < j-1; i++)
alert(coordsArray[i].location);
CreateMarker(coordsArray, i);
This is incorrect: new google.maps.LatLng(coordsArray[i].location).
You state: "location been database field returning LatLng -43.59670,172.38247 as a string."
the google.maps.LatLng constructor takes two numbers as arguments (not a comma separated string).
If coordsArray[i].location is a comma separated string, convert it to two numbers.
var coords = coordsArray[i].location.split(",");
var latLng = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
var marker = new google.maps.Marker({
position: latLng,
map: map
});
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var location = "-43.59670,172.38247";
coords = location.split(",");
var latLng = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
var marker = new google.maps.Marker({
position: latLng,
map: map
});
map.setCenter(latLng);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<div id="map_canvas"></div>
Related
I am using google maps API to make some custom markers and i want to open a custom info window. I have been trying to set the position of the info window but its always opening on the extreme top left.
var markers = [
[37.09024, -95.712891, "images/white-star.png"],
[40.4173, -82.9071, "images/purple-star.png"],
[31.9686, -99.9018, "images/yellow-star.png"],
];
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = markers[i][2];
marker[i] = infowindow = new google.maps.InfoWindow({
content: html,
pixelOffset: new google.maps.Size(200, 0)
});
marker[i] = new google.maps.Marker({
position: position,
icon: icon,
map: map,
}).addListener('mouseover', function() {
infowindow.open(map, marker[i]);
});
}
I think your problem lies how to create marker and info window in your code.To create multiple markers in map, see code below .
Fiddle demo
function initMap() {
var myLatLng = {
lat: 40.4173,
lng: -82.9071
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var markers = [
[37.09024, -95.712891, "images/white-star.png"],
[40.4173, -82.9071, "images/purple-star.png"],
[31.9686, -99.9018, "images/yellow-star.png"],
];
for (i = 0; i < markers.length; i++) {
(function(markers) {
var position = new google.maps.LatLng(markers[0], markers[1]);
var icon = markers[2];
var infowindow = new google.maps.InfoWindow({
content: 'html',
pixelOffset: new google.maps.Size(200, 0)
});
var markerss = new google.maps.Marker({
position: position,
map: map,
//icon: icon,
});
google.maps.event.addListener(markerss, 'click', function() {
infowindow.open(map, markerss);
});
})(markers[i]);
}
}
marker[i] is not defined in this line:
infowindow.open(map, marker[i]);
Without a defined anchor, the infowindow ends up in the upper left hand corner of the map.
You can use this for the anchor in the mouseover event handler function:
infowindow.open(map, this);
You probably also want to remove the:
pixelOffset: new google.maps.Size(200, 0)
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [
[37.09024, -95.712891, "images/white-star.png"],
[40.4173, -82.9071, "images/purple-star.png"],
[31.9686, -99.9018, "images/yellow-star.png"],
];
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var html = "marker";
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = markers[i][2];
var infowindow = new google.maps.InfoWindow({
content: html,
// pixelOffset: new google.maps.Size(200, 0)
});
var marker = new google.maps.Marker({
position: position,
// icon: icon,
map: map,
}).addListener('mouseover', function() {
infowindow.open(map, this);
});
bounds.extend(position);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
I have this part of code, that should show pins on google map of certain locations.
<script>
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Sarajevo', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map,
icon: "http://i.imgur.com/DOd1sH3.png"
});
});
}
});
<div id="map_canvas"></div>
Map shows up and everything works, but the pins of locations are not shown.
I really dont know why.
Seems like you are calling the constructor without a reference to a variable.
Try this:
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: "http://i.imgur.com/D0d1sH3.png"
});
Alternatively you can set the markers to the map by calling the setMap function
var marker = new google.maps.Marker({
position: latlng,
icon: "http://i.imgur.com/D0d1sH3.png"
});
marker.setMap(map);
Hope this helps
I try to display multiple markers on my map. I put the multiples location in adata-attribute trough my php file. Then I try to grab this information in my javascript one.
If I directly paste the coordinates, the markers appear. If I reference the data-attribute they don't. (The only difference is on the line beginning with var locations.)
This code works:
function GoogleMapsInit(){
setTimeout(function initialize() {
var emplacements = $('#iframecarte').attr("data-emplacements");
// Emplacements returns [[45.5314817,-73.1835154], [45.570004,-73.448701] ]
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(45.5580421, -73.7303025)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var locations = [[45.5314817,-73.1835154], [45.570004,-73.448701] ];
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][0], locations[i][1]),
map: map
});
markers.push(marker);
}
}, 500);
}
This one doesn't:
function GoogleMapsInit(){
setTimeout(function initialize() {
var emplacements = $('#iframecarte').attr("data-emplacements");
// Emplacements returns [[45.5314817,-73.1835154], [45.570004,-73.448701] ]
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(45.5580421, -73.7303025)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var locations = emplacements;
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][0], locations[i][1]),
map: map
});
markers.push(marker);
}
}, 500);
}
What is wrong with the variable locations when it references the emplacements variable so that the markers don't show?
The non-working version emplacements is a string, not an array.
Convert the string to a javascript array:
var locations = JSON.parse(emplacements);
proof of concept fiddle
code snippet:
function GoogleMapsInit() {
setTimeout(function initialize() {
var emplacements = $('#iframecarte').attr("data-emplacements");
// Emplacements returns [[45.5314817,-73.1835154], [45.570004,-73.448701] ]
var mapOptions = {
zoom: 9,
center: new google.maps.LatLng(45.5580421, -73.7303025)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var locations = JSON.parse(emplacements);
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][0], locations[i][1]),
map: map
});
markers.push(marker);
}
}, 500);
}
GoogleMapsInit();
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
<div id="iframecarte" data-emplacements="[[45.5314817,-73.1835154], [45.570004,-73.448701], [45.6066487,-73.712409]]"></div>
I'm trying to use the script made by user netbrain as found here on stackoverflow to also show the address title when the user clicks on the marker. It should be relatively simple but I'm lost.
Any ideas? I've tried numerous options but nothing seems to work. netbrain's code below:
var map;
var elevator;
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'roadmap'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=true', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
title: addresses[0]
});
});
}
This answer assumes you're only after tool tip and not the infowindow.
The variables addresses and x cannot be used within the callback as the value of x will always be 5 (in this example, see length of addresses array). Instead look at the data object like so:
var map;
var elevator;
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'roadmap'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=true', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
title: data.results[0].formatted_address
});
});
}
EDIT
For completeness the data object is the result of the geocoding API call. The formatted_address is a property of a match within the results, see https://developers.google.com/maps/documentation/geocoding/#GeocodingResponses
Use this code:
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
var info_window = new google.maps.InfoWindow({maxWidth: 500});
info_window.setContent('Content here');
info_window.setPosition(latlng);
info_window.open(map, marker);
});
});
}
});
How to plot more number of markers in google map
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
var latt=[13.0423734,12.918907];
var lang=[80.2727993,80.145264];
for(i=0; i<latt.length;i++)
{
initialize(latt[i],lang[i]);
}
});
function initialize(lat,lng)
{
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
}
</script>
Use arrays.
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
var latt=[13.0423734,12.918907];
var lang=[80.2727993,80.145264];
initialize(latt, lang);
});
function initialize(lat_arr,lng_arr)
{
// Assuming first array element is where you want the map centered
var latlng = new google.maps.LatLng(lat_arr[0],lng_arr[0]);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var markers = [];
// start i at 0 if you want a marker at the center as well
for(var i = 1; i < lat_arr.length; i++) {
latlng = new google.maps.LatLng(lat_arr[i], lng_arr[i]);
markers[i] = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
}
}