Custom Google Maps Icon Using Sprite - javascript

I've found custom Google Maps icon images that can be laid out as a sprite (matrix of small pics). I effectively want to create custom icons which are numbered 1-10 (for my 10 results per page) and also have mouseover effects (change color).
I'm not sure how to do this. The relevant code is the following:
$('.entries').each(function(index){
var entry=$(this);
latlng[index]=new google.maps.LatLng($(this).attr('data-lat'),$(this).attr('data-lng'));
marker[index]=new google.maps.Marker({
position:latlng[index],
map:map,
icon:image_url
});
if(marker[index]){
marker[index].setMap(map);
}
Even if I can't make it a sprite (which seems unlikely right now) I'd like to change the icon on mouseover.
I've tried to do so and created a hack that SORT of works. The problem here is that the map flickers occassionally when reset. Is there a better way?
google.maps.event.addListener(marker[index],'mouseover', function(){
entry.addClass('map-hover');
// alert(marker[index].icon);
marker[index].icon='{{site}}media/map-icons/iconb'+(index+1)+'.png'
marker[index].setMap(map);
});
google.maps.event.addListener(marker[index],'mouseout', function(){
entry.removeClass('map-hover');
marker[index].icon='{{site}}media/map-icons/iconr'+(index+1)+'.png'
marker[index].setMap(map);
});

function initialize() {
var mapDiv = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(mapDiv, {
center: latLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
​
This code might help you to get an idea about placing custom markers.

Related

google maps api getZoom() after zooming

Small problem.
So, i'm working with the google maps api for a small project at my internship.
This is how I make my map.
function initMap() {
window.map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 62.323907, lng: -150.109291},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage ='https://developers.google.com/maps/documentation/javascript/';
srcImage += 'examples/full/images/talkeetna.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
The problem I have is the next: I want to determine the zoom, I tried this with:
var zoom = window.map.getZoom();
alert(zoom);
This works! But the only problem I have, this always shows me '12'. And I want to get the current zoom level, after zooming in or out and that doesn't seem to work, it always keeps displaying '12'. How can I fix this?
It is quite simple add a "zoom_changed" listener for your map and get the current zoom of the map
The code can be like
map.addListener("zoom_changed", function() {
alert("Zoom :" + map.getZoom());
});

Google Map marker not showing after uploading to server, locally works fine

I'm trying to implement a simple page that have google maps enabled, but I'm having an issue where my google maps marker is not showing after uploading the files to the hosting, it works fine locally.
I tried both using a custom marker and the default one, the issue is the same, it works locally but doesn't after uploading.
Here's the script I'm using
/*GOOGLE MAPS*/
function initialize() {
// Declare map style
var grayscale = [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}];
var mapOptions = {
center: {lat: 46.211000, lng: 16.913157},
zoom: 13,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Change map style
map.setOptions({styles: grayscale});
var image = 'img/vemo-google-map-marker.png';
var marker = new google.maps.Marker({
position: {lat: 46.211000, lng: 16.913157},
map: map,
title: "VEMO TRADE d.o.o.",
icon: image,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You need to specifiy whole absolute path here:
var image = '//YOUR_DOMAIN/img/vemo-google-map-marker.png';

Trouble with multiple google maps on one table

I have an html table that contains 10 container for Google map
Below is the js function that create the map object
Function takes the lat and the lng of the map + the div element to insert the map to.
function GetMap(lat,lng,number)
{
var show_in=document.getElementsByClassName("map_conteiner")[number];
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(show_in,
mapOptions);
var marker = new google.maps.Marker({
position:new google.maps.LatLng(lat,lng),
map: map,
title:"Hotel"
});
$(show_in).fadeIn();
}
The problem is that the map is displayed correctly only on the first invoke of this function
(No matter which div I start with)
after the firts invoke this function will allways present distorted maps (As you can see in the attached picture)
You should trigger the resize-event of the map in the complete-callback of $.fadeIn()
Furthermore you better create only 1 maps-instance for each map_conteiner and on subsequent calls of GetMap only set the new center of the existing map and the new position for the marker.

Google Maps Markers setPosition leaves old marker on map

Pretty simple implementation of Google Maps on AngularJS. The following code works perfect on my desktop using FireFox. However, on my android this code leaves the old marker after I click to change positions. I can drag around the map and "wake" it up. The data behind the map is correct but it just won't refresh the marker overlay. Can I force it to refresh? Am I doing something wrong?
$scope.mapOptions = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.setMarkerPosition = function($event) {
$scope.marker.setPosition($event.latLng);
}
$scope.$watch('myMap', function(map) {
if (map) {
$scope.marker = new google.maps.Marker({
map: $scope.myMap,
position: myLatlng
});
}
});

How to add multiple markers for single location on Google Map

I'm using Google Maps version 3 and would like to add two markers for a single location on the map.
One would be the default marker which appears with Google Maps, but second would show the name of the brand associated with that location.
My code is
function initialize() {
var filterLatlng = new google.maps.LatLng(18.928184,72.832601);
var mapOptions = {
center: filterLatlng,
zoom: 19,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var marker = new google.maps.Marker({
position: filterLatlng,
title:"Filter Shop"
});
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
marker.setMap(map);
}
You probably want this library:
http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303
It will allow you to add a label on the map.
That label will be attached to a hidden marker like you described.
The use is quite simple you should be able to figure it out quite easy.

Categories