i have put the google map java script code in my site and it does not working.Here is the code
function map_initialize() {
var latlng = [
__lats_and_langs__
];
if (google.maps.BrowserIsCompatible()) {
var image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=15|FF0000|000000",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
map = new google.maps.Map2(document.getElementById('salon_map'));
map.addControl(new google.maps.LargeMapControl3D());
map.addControl(new google.maps.MenuMapTypeControl());
map.setCenter(new google.maps.LatLng(0, 0), 0);
for (var i = 0; i < latlng.length; i++) {
var marker = new google.maps.Marker({
position: latlng[i],
map: map,
icon: image,
title: location[0],
zIndex: location[3]
});
//var marker = new google.maps.Marker(latlng[i]);
map.addOverlay(marker);
}
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
latlngbounds.extend(latlng[i]);
}
map.setCenter(latlngbounds.getCenter(), map.getBoundsZoomLevel(latlngbounds));
map.setZoom(12);
// put markers and custom icon ??
__marker_list__
}
}
// google.maps.Event.addDomListener(window, 'load', map_initialize);
google.maps.Event.addDomListener(window, 'unload', google.maps.Unload);
Url is : http://myshopsalon.com/find-a-shop-salon
The markers are there(you may have noticed the single marker in the top-left corner of the map, it's not 1 marker, all these markers are placed at this location)
Reason: you are using the Maps-Library V2, but you create the Markers with the arguments expected in V3.
In V2 the 1st expected argument is the LatLng, nothing else.
var marker = new google.maps.Marker(latlng[i],{/*markerOptions*/});
(I've ommitted the options, because you've done the same mistake with the icon )
To clarify: When you use V2, you must use the methods as described here: https://developers.google.com/maps/documentation/javascript/v2/reference
Related
i trying to make an algorithm that show only markers in a given radius this is my code:
for( i = 0; i < markers.length; i++ ) {
d = google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(user_logged_in[0][0],user_logged_in[0][1]),
new google.maps.LatLng(markers[i][0], markers[i][1]));
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = {url:"http://".concat(markers[i][3]),
scaledSize: new google.maps.Size(20, 20), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) };
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][4].toString().concat(' ').concat(markers[i][5].toString()),
icon: icon,
url:'im:<sip:'+markers[i][6]+'>'
});
if(<?=$this->translate($this->layout()->is_super_admin)?>==0){
marker.setVisible(false);
$(document).ready(function() {
$('#select-distance').change(function() {
var e = document.getElementById("select-distance");
var value = parseInt(e.options[e.selectedIndex].value);
if(d < value){
marker.setVisible(true);
}else{
marker.setVisible(false);
}
circle.setRadius(value);
circle.bindTo('center', markerc, 'position');
find_closest_marker(value);
});
});
}
}
But when I test it, it works only for the last user in the given radius. For example, if I have 3 users with distances 2km, 3km, 1km and I select a radius of 5km I get only the user with 3 km!!! Thanks for help.
Make new object of each marker and use that object.
See Below:
//here use the var keyword and a new marker object
var marker[i] = new google.maps.Marker({
position: position,
map: map,
title: markers[i][4].toString().concat(' ').concat(markers[i][5].toString()),
icon: icon,
url:'im:<sip:'+markers[i][6]+'>'
});
if(<?=$this->translate($this->layout()->is_super_admin)?>==0){
marker[i].setVisible(false);
$(document).ready(function() {
$('#select-distance').change(function() {
var e = document.getElementById("select-distance");
var value = parseInt(e.options[e.selectedIndex].value);
if(d < value){
marker[i].setVisible(true);
}else{
marker[i].setVisible(false);
}
circle.setRadius(value);
circle.bindTo('center', markerc, 'position');
find_closest_marker(value);
});
});
You are using the same object each time so it is replacing previous one. That's why it is drawing only last one marker.
I'm using the following JavaScript code to display Google Maps in my ASP.Net website. With this code I have added Google Places search that suggests results/places as the user types. I am displaying properties based on the searched location. However, I would like to display markers of the searched properties as well. I found a solution here: http://www.dotnetbull.com/2013/06/multiple-marker-with-labels-in-google.html but considering my limited knowledge of JavaScript I wasn't able to integrate it with my existing code to display places search along with markers on Google Maps. If you could please help me get it working I'll be thankful.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script type="text/javascript">
function LoadGoogleMAP() {
//Gets value of latitude and longitude of the search location from txtLatitude and txtLongitude textboxes.
var lat = document.getElementById('<%=txtLatitude.ClientID%>').value;
var lon = document.getElementById('<%=txtLongitude.ClientID%>').value;
var myLatlng = new google.maps.LatLng(lat, lon)
var markers = [];
var mapOptions = {
center: myLatlng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
marker: true
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// Create the search box and link it to the UI element.
var input = (document.getElementById('MainContent_txtSearch'));
map.controls[google.maps.ControlPosition.CENTER].push(input);
var searchBox = new google.maps.places.SearchBox((input));
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(15);
});
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function () {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
</script>
Try this code from Official Google Doc:
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = /** #type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** #type {HTMLInputElement} */(input));
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
When Google Map load, it cost several seconds to load all submaps, each time i want to change a marker i need to load all map again and again, it is possible to load map once and update markers dynamic?
function initialize(markers) {
console.log(markers);
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(40.4378271,-3.6795367)
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var j=0;
for (var i=0;i<((markers.length)-3);i=i+3){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i],markers[i+1]),
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+j+'|FE6256|000000',
title: markers[i+2]
});
j++;
}
}
google.maps.event.addDomListener(window, 'load', initialize(markers()));
You must store the Map-instance somewhere where it's accessible inside initialize, then you'll be able to re-use the Map on further calls and must only remove previous markers and draw the new markers.
Sample(stores the Map as property of the map-div):
function initialize(markers) {
var node = document.getElementById('map-canvas'),
j = 0,
marker;
//create a single Map-instance and store it as property of the map-container
if (!node.map) {
//create a MVCObject, used for binding of the markers map-property
node.mvc = new google.maps.MVCObject();
//the map
node.map = new google.maps.Map(node, {
zoom: 2,
center: new google.maps.LatLng(40.4378271, -3.6795367)
});
}
//this will remove previous markers
node.mvc.set('map', null);
node.mvc.set('map', node.map);
for (var i = 0; i < ((markers.length) - 3); i = i + 3) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i], markers[i + 1]),
map: node.map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' +
j + '|FE6256|000000',
title: markers[i + 2]
});
//bind the markers map-property
marker.bindTo('map', node.mvc, 'map', true);
google.maps.event.addListener(marker, 'map_changed', function () {
//remove the binding when map has been set to null
if (!this.getMap()) {
this.unbind('map');
}
});
j++;
}
}
Demo: http://jsfiddle.net/doktormolle/ns7j3sx0/
I am using the Google Maps Javscript API :
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
var image = {
url: places[0].icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for the closest result
marker = new google.maps.Marker({
map: map,
icon: image,
draggable : true,
title: places[0].name,
position: places[0].geometry.location
});
$('#inputLocalisation').val(places[0].geometry.location);
markers.push(marker);
bounds.extend(places[0].geometry.location);
map.fitBounds(bounds);
});
This handler is triggered when the user searches a location. It creates a marker on the closest result.
I would like to return the marker to use it later in an other handler :
google.maps.event.addListener(marker,'dragend',function() {
$('#inputLocalisation').val(marker.getPosition());
});
This one is triggered when the marker is dragged, but I need the marker object. How can I access the previously created marker?
So you should be adding that event listener at the same time as you're creating the marker I assume?
In the event listener function you can refer to it using the keyword this.
marker = new google.maps.Marker({
map: map,
icon: image,
draggable : true,
title: places[0].name,
position: places[0].geometry.location
});
google.maps.event.addListener(marker,'dragend',function() {
$('#inputLocalisation').val(this.getPosition());
});
Here I have a code that works fine, so here is simple google places code that show me a places based on location and I add an label on every marker so:
http://jsbin.com/UqafeCI/4/edit - CODE and DEMO
Now I want to in label show opening time so I add to my code:
if (!!place.opening_hours.periods[1].open.time) open = place.opening_hours.periods[1].open.time;
and now my code looks like this:
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
//THIS CODE I ADD TO PREVIOUS CODE THAT WORK, so if there is open time to show in label
var open = 'No work time';
if (!!place.opening_hours.periods[1].open.time) open = place.opening_hours.periods[1].open.time;
// Create a marker for each place.
var marker = new MarkerWithLabel({
map: map,
icon: image,
title: place.name,
position: place.geometry.location,
labelContent: open,
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75},
labelAnchor: new google.maps.Point(22, 0)
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
So how I can show open time of an object on label if time exist???
UPDATE:
I try to add request and service.getDetails function but again I cant get opening_time:
CODE:
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var request = {
reference: place.reference
};
service.getDetails(request, function(place, status) {
var open = null;
try{
open = place.opening_hours.periods[1].open.time;
}
catch(e){
open='No work time';
}
var otvoreno = place.openNow+"</br>"+place.name;
// Create a marker for each place.
var marker = new MarkerWithLabel({
map: map,
icon: image,
title: place.name,
position: place.geometry.location,
labelContent: open,
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75},
labelAnchor: new google.maps.Point(22, 0)
});
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
Use a try-catch-statement:
try{
open = place.opening_hours.periods[1].open.time;
}
catch(e){
open='No work time';
}
...otherwise you will get an error when any of following is undefined:
place.opening_hours
place.opening_hours.periods
place.opening_hours.periods[1]
place.opening_hours.periods[1].open
But however, the documentation seems to be misleading, it suggests that the returned results are placeDetails. But that's not the fact , you need a further request for each place to request the placeDetails(which will contain the opening_hours.periods, when available)