I have some code I put together and I see that there must be some problem with zLat and zLng. I am wondering why it is when I replace zLat and zLng with tLat and tLng inside my for loop then I get one marker which makes sense. With zLat and zLng in there I get no markers. Why would this be happening?
P.S. My alert for zLat and zLng is producing what looks like proper output but it must not be?
// // // // // // // // Ajax returns from PHP
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var obj = $.parseJSON(xmlhttp.responseText);
var tLat = getCookie("tLat");
var tLng = getCookie("tLng");
var options = {
zoom: 4,
center: new google.maps.LatLng(40.7257, -74.0047),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map'), options);
// Adding a marker to the map
/*var marker = new google.maps.Marker({
position: new google.maps.LatLng(tLat, tLng),
map: map,
title: 'Click me',
icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png'
});*/
var marker;
alert(obj.length);
for(var i=0;i<obj.length;i++) {
var zLat = String(obj[i].lat);
var zLng = String(obj[i].lng);
marker = new google.maps.Marker({
position: new google.maps.LatLng(zLat, zLng),
map: map,
title: 'Click me'
});
alert(zLat+','+zLng+','+i);
}
$('#map').show();
}
}
// // // // // // // //
// // // // // // // // Ajax returns from PHP
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var obj = $.parseJSON(xmlhttp.responseText);
var tLat = getCookie("tLat");
var tLng = getCookie("tLng");
var options = {
zoom: 4,
center: new google.maps.LatLng(tLat, tLng),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map'), options);
var myLatLng = new google.maps.LatLng(parseFloat(obj[0][2]), parseFloat(obj[0][1]));
//var marker = new google.maps.Marker({ position: myLatLng, map: map });
var marker;
for(var i=0;i<obj.length;i++) {
var myLatLng = new google.maps.LatLng(parseFloat(obj[i].lat), parseFloat(obj[i].lng));
var marker = new google.maps.Marker({ position: myLatLng, map: map });
}
$('#map').show();
}
}
// // // // // // // //
Related
<script>
/* Edit */
function initialize()
{
var latlng = new google.maps.LatLng(51.165691,10.451526000000058);
var map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 13
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
draggable: true,
anchorPoint: new google.maps.Point(0, -29)
});
var input = document.getElementById('searchInput');
// map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var geocoder = new google.maps.Geocoder();
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
alert('Edit=' +place.formatted_address);
bindDataToForm(place.formatted_address,place.geometry.location.lat(),place.geometry.location.lng());
infowindow.setContent(place.formatted_address);
infowindow.open(map, marker);
});
// this function will work on marker move event into map
google.maps.event.addListener(marker, 'dragend', function() {
geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
bindDataToForm(results[0].formatted_address,marker.getPosition().lat(),marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
});
}
function bindDataToForm(address,lat,lng){
document.getElementById('location').value = address;
document.getElementById('lat').value = lat;
document.getElementById('lng').value = lng;
alert('Edit'+lng);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
I need to get data from this array:
var array = [['USA', 'USA Office'], ['Canada', 'Canada Office']]
and create for each country marker with infowindow.
For now I have this (countries only):
jQuery(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(54.236107, -4.548056),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(jQuery('#map_canvas')[0], myOptions);
var addresses = ['Canada', 'Germany', 'France','USA','Ireland'];
for (var x = 0; x < addresses.length; x++) {
jQuery.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 infowindow = new google.maps.InfoWindow({
content: 'addresses'
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
alert("Marker clicked");
infowindow.open(map,marker);
});
});
}
});
What's with your array? Are those Addresses or the same address in each subarray ?
I think you already know that you should geocode the addresses in your array in order for you to get the lat and lng so to display the marker.
There is this Link, Hope I helped.
<script type="text/javascript">
var map;
var mc; //marker clusterer
var mcOptions = { gridSize: 10, maxZoom: 8 };
var infowindow = new google.maps.InfoWindow(); //global infowindow
var geocoder = new google.maps.Geocoder(); //geocoder
var address = new Array("15.8700, 74.5000", "15.871463, 74.500777", "15.871505, 74.500884", "32.7714,-97.2915");`enter code here`
var content = new Array("Unit`enter code here`No1", "UnitNo42", "UnitNo43", "UnitNo44");
//min and max limits for multiplier, for random numbers //keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;
function createMarker(latlng, text) {
var marker = new google.maps.Marker({ position: latlng, map: map });
///get array of markers currently in cluster
var allMarkers = mc.getMarkers();
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i = 0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
if (latlng.equals(pos)) {
text = text + " & " + content[i];
}
}
}
// WHERE TO ADD: mc.addMarker(marker); //??
google.maps.event.addListener(marker, 'click', function () {
infowindow.close();
infowindow.setContent(text);
infowindow.open(map, marker);
});
return marker;
}
function initialize() {
var options = {
zoom: 2,
center: new google.maps.LatLng(21.7679, 78.8718),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
var gmarkers = [];
for (i = 0; i < address.length; i++) {
var ptStr = address[i];
var coords = ptStr.split(",");
var latlng = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]))
gmarkers.push(createMarker(latlng, content[i]));
}
//marker cluster
mc = new MarkerClusterer(map, gmarkers, mcOptions);
for (i = 0; i < address.length; i++) {
geocodeAddress(address[i], i);
}
}
</script>
var mapOptions = {
center: new google.maps.LatLng(20, 77),
zoom: 3,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_Google"), mapOptions);
var allmarkers = new Array(); ;
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < markers.length; i++) {
if (allmarkers.length >= i + 1) {
}
else {
var image = { url: markers[i][3] };
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
icon: image,
animation: google.maps.Animation.DROP, cursor: "default"
});
marker.mycategory = "Halla";
allmarkers.push(marker);
bounds.extend(marker.getPosition());
google.maps.event.addListener(allmarkers[i], 'click', (function (allmarkers, i) {
return function () {
//map.setZoom(21);
//map.setCenter(marker.getPosition());
infowindow.setContent(markers[i][0]);
infowindow.open(map, allmarkers[i]);
}
})
(allmarkers, i));
}
map.fitBounds(bounds);
});
How I can put an image on a popup window when I click on a marker (bondi beach) in google maps v3 ? :
Here the code :
var locations = [
// Here I would put the Image ['Bondi Beach', -33.890542, 151.274856, 4],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(46.713251, 7.833252),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
map.setOptions({styles: styles});
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));
}
Try this :
<div id="map" style="width:500px;height:500px;"></div>
script :
var locations = [
['Bondi Beach', -33.890542, 151.274856, 'http://www.destination360.com/australia-south-pacific/australia/images/s/australia-bondi-beach.jpg'],
/*
add more locations here on the form :
[ name, lat, long, img ]
[ name, lat, long, img ]
..
*/
];
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(-33.890542, 151.274856),
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() {
var content=locations[i][0]+'<br><img src="'+locations[i][3]+'" style="width:300px;">';
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
DEMO
result :
Hi I've searched so many things and found many contents but didn't found what I required actually.
I can loading all markers but unable to Refresh it or Reload it please help me out here's the code:
$(document).ready(function() {
var myLatLng = new google.maps.LatLng(24.86802, 67.06416);
MYMAP.init('#map', myLatLng, 11);
$(document).ready(function(e){
MYMAP.placeMarkers('testasp.asp');
});
});
var curr_infw;
var MYMAP = {
map: null,
bounds: null,
infowindow:null
}
MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.HYBRID
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}
MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
var name = $(this).find('name').text();
var address = $(this).find('address').text();
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
var infowindow = null;
// extend the bounds to include the new point
MYMAP.bounds.extend(point);
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map,
clickable: true,
icon: 'truck_green.png'
});
//var infowindow = null;
infoWindow = new google.maps.InfoWindow();
var html='<strong>'+name+'</strong.><br />'+address;
google.maps.event.addListener(marker, 'mouseover', function() {
infoWindow.setContent(html);
infoWindow.open(MYMAP.map, marker);
});
MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}
If somebody help me out I want to refresh it using click event or settimeout function though.
Regards and looking forward to hear it here soon. thanks
Not an answer, but what's this meant to be?
$(document).ready(function() {
var myLatLng = new google.maps.LatLng(24.86802, 67.06416);
MYMAP.init('#map', myLatLng, 11);
$(document).ready(function(e){
MYMAP.placeMarkers('testasp.asp');
});
});
Why are you nesting document.ready? Just do
$(document).ready(function() {
var myLatLng = new google.maps.LatLng(24.86802, 67.06416);
MYMAP.init('#map', myLatLng, 11);
MYMAP.placeMarkers('testasp.asp');
});
For event use
google.maps.event.addListener([ mapObject ], 'bounds_changed', function() {
// [ update code here ]
});