First want to say that I'm new in this and don't have a lot of Javascript knowledge. Just need to create a website but can't afford paying someone else do it for me!
What I'm trying to build is a map where I can locate multiple different markers that I created myself. They are .png files no bigger than 20KB. I have loaded them to my server inside images/numbers/. They look like this:
I will probably need more than 50, each one also with its own infowindow.
This is an example I tried to edit, but couldn't make it work:
https://developers.google.com/maps/documentation/javascript/tutorials/custom-markers?hl=es
Here the javascript code I have so far:
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(41.388426, 2.171339),
mapTypeId: 'roadmap'
});
var iconBase = 'images/numbers/';
var icons = {
001: {
icon: iconBase + '001.png'
},
002: {
icon: iconBase + '002.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(41.388426, 2.171339),
type: '001'
}, {
position: new google.maps.LatLng(41.387815, 2.139496),
type: '002'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
Hope you can help!
Thankssss
The main problem I can see is in your for loop.
Try to replace it with this:
for (var i = 0, i<features.length; i++) {
addMarker(features[i]);
}
Then, like #MrUpsidown mentioned in the comments, you should define your objects correctly in the icons array.
var icons = {
'001': {
icon: iconBase + '001.png'
},
'002': {
icon: iconBase + '002.png'
}
};
Since in features, it is defined as string, it should be the same in icons.
The rest looks to be ok.
Related
What I am trying to do here. When I press the marker. It should send me to the that id's page. It sending me to id's page. But it doesn't matter which marker I click I always going to same id's page. Listener is not working properly... I guess...
This is the full map:
var estates = <?php echo json_encode($estates);?>;
function initMap()
{
var options =
{
zoom : 6,
center : {lat:34.652500, lng:135.506302}
};
var map = new google.maps.Map(document.getElementById('map'), options);
#foreach ($estates as $est)
var marker = new google.maps.Marker({
map: map,
icon: 'imgs/marker.png',
url: "/pages/{{$est->id}}",
label: {
text: estates.data[0].price.substring(0, 5),
color: "#fff",
},
position: {
lat: {{$est->lat}},
lng: {{$est->lng}}
}
});
google.maps.event.addListener(marker, 'click', function () {
window.location.href = marker.url;
});
#endforeach
}
Any idea to fix this problem?
Please try:
google.maps.event.addListener(marker, 'click', function () {
window.location.href = this.url;
});
It seems like that window.location.href = marker.url; lack of [i] of marker
I am getting weird and unpredictable behavior when specifying an icon to use with google.maps.Markers. Basically, the markers show up (with default icon) if I don't specify an icon property, but if I do specify the icon property, no markers show up (although I have other case where I can get a custom icon to show, so that's why it's weird).
Here's the relevant code:
function initMap() {
var markers = route_log.map(function(segment) {
return new google.maps.Marker({
position: new google.maps.LatLng(segment.lat, segment.lng)
});
});
...calculate bounds..
var map = new google.maps.Map(document.getElementById('route_log_map_map'), {
position: bounds.getCenter(),
zoom: 15
});
...other unrelated code...
for(i=0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
This is called with:
<script src="https://maps.googleapis.com/maps/api/js?key=...key...&callback=initMap" async="" defer=""></script>
and the above results in:
Obviously that's a lousy marker to use in this case (there's almost 2000 points), so if I change the marker creation to be like this:
var markers = route_log.map(function(segment) {
return new google.maps.Marker({
position: new google.maps.LatLng(segment.lat, segment.lng),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 1
}
});
});
the markers don't show up (and there's no errors either) (note those blue circles are unrelated to this code):
EDIT
This is interesting. It works if the array I'm building the markers from has only one element, but fails to display if it has more than one. E.g. this works and displays one marker:
var route_log = [
{lat: 41.86219805, lng: -71.04886590000001}
];
var markers = route_log.map(function(segment) {
return new google.maps.Marker({
position: new google.maps.LatLng(segment.lat, segment.lng),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
}
});
});
but this displays no markers (only change is to add another element to the array):
var route_log = [
{lat: 41.86219805, lng: -71.04886590000001},
{lat: 41.87219805, lng: -71.05886590000001}
];
var markers = route_log.map(function(segment) {
return new google.maps.Marker({
position: new google.maps.LatLng(segment.lat, segment.lng),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
}
});
});
Wow.
I have position in the options to the new google.maps.Map call. It should be center, which is required. position is not even a valid option for google.maps.MapOptions.
I blame the Google Maps API for this one. :-)
Creating markers for different categories and want to have different marker icons for different place types.
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: mapit,
position: place.geometry.location,
icon: "link-to-icon"
});
}
What can be included in the above code to test whether the place is of different types?
For example with just two types "night_club" and "cafe" i'm going for something along these lines:
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: mapit,
position: place.geometry.location,
icon: "link-to-icon"
});
if (place.type == ['cafe']) {
marker.setIcon("link-to-cafe-icon]");
}
if (place.type == ['night_club']) {
marker.setIcon("link-to-night-club-icon]");
}
}
Or perhaps
function createMarker(place) {
var placeLoc = place.geometry.location;
if (place.type == ['cafe']) {
var marker = new google.maps.Marker({
map: mapit,
position: place.geometry.location,
icon: "link-to-cafe-icon"
});
}
if (place.type == ['night_club']) {
var marker = new google.maps.Marker({
map: mapit,
position: place.geometry.location,
icon: "link-to-night-club-icon"
});
}
}
What is the correct the syntax for place.type? i don't see anything like it or place.getType, something to get the place type for conditional statements, in the Google Maps API documentation.
How to make the conditionals work and display different icons for markers of different place types?
The Places API returns types array for each result, not type. This is because one location can have assigned multiple types like ["restaurant", "lodging"]. Here is the list of the supported types. See documentation here if you use "Places search" call or here if you use "Places details" call.
So your code to determine the icon will have to be more complicated than a simple switch. Maybe you can watch for an existence of a certain type in the types array. This depends on your needs, you will have to decide it yourself, maybe something like (with use of jQuery library!):
function isInArray(a, b) {
return !!~a.indexOf(b)
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var placeIcon = "link-to-default-icon"; //some default icon, if you don't find a match
if(isInArray(place.types, "cafe")){
placeIcon = "link-to-cafe-icon";
}else if(isInArray(place.types, "night_club")){
placeIcon = "link-to-night-club-icon";
}//and so on for other icons
var marker = new google.maps.Marker({
map: mapit,
position: place.geometry.location,
icon: placeIcon
});
}
I suggest this way
function createMarker(place) {
var myIcon;
var placeLoc = place.geometry.location;
switch (place.type) {
case 'cafe':
myIcon = "link-to-cafe-icon";
break;
case 'night_club':
myIcon = "link-to-night-club-icon";
break;
}
var marker = new google.maps.Marker({
map: mapit,
position: place.geometry.location,
icon: myIcon
});
}
I am using webservice to load markers from sql server. and a cluster-er to group those markers, then I re-size the map to fit the bounds using map.fitBounds(bounds).. it works fine on chrome and firefox,, BUT not working on IE,, it gives me an error of Out of stack space in one of google map api 3 files (main.js)
you can check this demo for the issue : http://aprilit.com/gmap/default.aspx
here is a part of my code.
function LoadMap(arrMarkers) {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var markers = [];
var tempCount = 0;
var bounds = new google.maps.LatLngBounds();
for (var XMLCount = 0; XMLCount < arrMarkers.length; XMLCount++) {
var Points = $.parseXML(arrMarkers[XMLCount]);
$Markers = $(Points).find("Marker");
for (var i = 0; i < $Markers.length; i++) {
var tempID = $Markers.find('mid')[i].innerHTML;
var tempCID = $Markers.find('cid')[i].innerHTML;
var myLatLng =
new google.maps.LatLng($Markers.find('lt')[i].innerHTML,
$Markers.find('lg')[i].innerHTML);
markers.push(new google.maps.Marker({
position: myLatLng,
map: map,
animation: google.maps.Animation.DROP,
markerid: $Markers.find('mid')[i].innerHTML,
catid: $Markers.find('cid')[i].innerHTML,
icon: LoadIcon($Markers.find('cimg')[i].innerHTML)
}));
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
google.maps.event.addListener(markers[tempCount], 'click', function () {
infowindow.setContent('<div ><img src="img/assets/loader.gif"/>
Loading../div>');
infowindow.open(map, this);
$.ajax(
{
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Markers.asmx/GetMarker",
data: JSON.stringify({ MarkerID: this['markerid'],
CategoryID: this['catid'] }),
dataType: "json",
success: function (msg) {
infowindow.setContent(formatInfoDivHTML(msg.d));
}
});
map.panTo(this.getPosition());
infowindow.open(map, this);
});
bounds.extend(myLatLng);
tempCount++;
}
}
//////////////////////////Here is the problem
map.fitBounds(bounds);
var mcOptions = { gridSize: 50, maxZoom: 12 };
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
google.maps.event.trigger(map, 'resize');
}
thanks and ill appreciate your help
also note that I am using fitbounds in other places and it is working just fine.
Just for the reference,, when I checked with an older version of google chrome (Version 31.0.1650.57 m) it gave me the same error..but when I updated chrome the issue has gone
Your SplitXML function is appending an extra null element to the array of markers. Most versions of IE don't like that.
I solved this issue,,
It appears that IE doesn't support the innerHTML property I used here:
$Markers.find('mid')[i].innerHTML
or any where else where I am retrieving the data from my xml fields.
so it had to be replaced with the the textContent property as this:
$Markers.find('mid')[i].textContent;
and that solves the whole issue.!!
thanks for your help guys
I am trying to populate some map points on a canvas which have been read from a JSON file.
I can create one set of points fine but I want to add different icons depending on what kind of point it is. I have tried evaluating the JSON data the map will not load with more than on kind of icon.
My code is as follows:
$.each( data.markers, function(i, marker) {
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
if (marker.company == "Capgemini") {
'icon':new google.maps.MarkerImage("capico.png"),
} else if (marker.company == "Accenture") {
'icon':new google.maps.MarkerImage("accico.png"),
}
'bounds': true
}).click(function() {
//$('#map_canvas').gmap('openInfoWindow', {
// 'content': marker.content
$.mobile.changePage("#details");
Not sure where im going wrong here.
Any help greatly appreciated
try this code
var customIcons = {
"Capgemini": {
icon: 'path_to_your_marker_pictures/capico.png',
},
"Accenture": {
icon: 'path_to_your_marker_pictures/accico.png',
}
};
var icon = customIcons[marker.company] || {};
var marker = new google.maps.Marker({
position: point,
icon: icon.icon,
});
Best,
Darko