Google maps KM bounds box reapplying itself on map zoom - google-maps

I have a map in which I apply a custom overlay using KMbox overlay to signify where I think the users general point of interest lies. What I want is to display this map to the user and allow them to click on the map to give me an exact location match of their POI.
This all works fine except for when the user clicks on the map and changes the zoom of the map.
Here's my code to add the marker to the map.
function addMarker(location) {
if(KmOverlay)
{
KmOverlay.remove();
}
if(last_marker)
{
last_marker.setMap(null);
}
marker = new google.maps.Marker({
position: location,
map: map
});
// Keep track for future unsetting...
last_marker = marker;
}
And to show the map I have this function.
function show_map(lt, ln, zoom, controls, marker)
{
var ltln = new google.maps.LatLng(lt, ln);
var vars = {
zoom: zoom,
center: ltln,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: controls,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN} ,
mapTypeControl: false,
scaleControl: false,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), vars);
KmOverlay = new KmBox(map, new google.maps.LatLng(lat, lon), KmOpts);
var totalBounds = new google.maps.LatLngBounds();
totalBounds.union(KmOverlay.getBounds());
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
I have a working example at the following link here

fixed this by using the setMap() method on the KmOverlay and passing null as a parameter.
eg:
function addMarker(location) {
if(KmOverlay)
{
KmOverlay.setMap(null);
}

Related

streetview and map side by side

I am trying to implement this example on my webforms page, slightly different. I have a map and when I change its mode to streetview, I want to show a small map on its bottom left corner that follows the streetview. The image I think is clear of what I try to achieve.
When the map is initialised I do the following
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 10,
tilt: 30,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var smallmapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15
};
smallmap = new google.maps.Map(document.getElementById("smallmap"), smallmapOptions);
and when the pegman is dropped I set the streetview to the little map as following
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function () {
if (this.getVisible()) {
$("#smallmap").show();
var streetViewPanorama = new google.maps.StreetViewPanorama(document.getElementById("map"), {
position: new google.maps.LatLng(latitude, longitude),
pov: {
heading: 34,
pitch: 10
}
});
smallmap.setStreetView(streetViewPanorama);
} else {
$("#smallmap").hide();
}
});
however I do not get the desired result as you see in this pic. My setup or way of doing this must be wrong.
edit: I also tried the following, but no difference
var streetViewPanorama = new google.maps.StreetViewPanorama(document.getElementById("map"), {
position: new google.maps.LatLng(this.position.lat(), this.position.lng()),
pov: {
heading: 34,
pitch: 10
}
});
by the way, I do not understand this pov property of the above, maybe this is causing the issue?
I changed the smallmapOptions code to the following and moved it inside the visible_changed event and now I see the small map clearly with the pegman walking according to the map's streetview
var smallmapOptions = {
center: new google.maps.LatLng(this.position.lat(), this.position.lng()),
zoom: 15
};
smallmap = new google.maps.Map(document.getElementById("smallmap"), smallmapOptions);

Google Map api V3, setPosition/setCenter is not working

There are two places where i need to show google maps.
I'm using same code for both maps(I mean I'm reusing same code for both maps).
Below are links where you can find screen shots of those two maps.
https://drive.google.com/file/d/0B2JnvvXsAALUdlVzemRVMzNMajF4OFB1V0JXc0RuN1p4eWFV/view - map1
https://drive.google.com/file/d/0B2JnvvXsAALUVGRhNm1HSldhQnpZT3k4S2I2R1YyQkp4OWZz/view - map2
I'm showing second map(map2) in bootstarp modal
first map(map1) is working fine. But in second map(map2), though I have used setCenter method, marker is not showing at center of the map(instead it is showing at top left corner).
what should i do to place marker at center of the map(in second map)?
below is my code..
initialize: function(options){
//initializing the geocoder
this.geocoder = new google.maps.Geocoder();
this.map;
},
//on show of the view
//onShow is a marionette method, which will be triggered when view is shown
onShow: function(){
var address = this.model.get("address");
//render the map with dummy latLang
this.renderMap();
//render the Map with Proper address
if(address!== ""){
this.renderMapWithProperAddress(address);
}
},
renderMap: function(){
var mapCanvas = document.getElementById("mapCanvas"), self = this,
mapOptions = {
center: new google.maps.LatLng(64.855, -147.833),//dummy latLang
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: false,
mapTypeControl: false,
streetViewControl:false
};
//initializing google map
self.map = new google.maps.Map(mapCanvas, mapOptions);
$("#myModal").on("shown.bs.modal",function(){
google.maps.event.trigger(self.map, "resize");
});
},
renderMapWithProperAddress: function(address){
var self = this,marker;
self.geocoder.geocode( { "address": address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
self.map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: self.map,
position: results[0].geometry.location,
title: address
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
My guess, without seeing your code, is that you need to trigger a map resize event after the bootstrap modal has been shown.
Bootstrap modal
Maps events
$('#myModal').on('shown.bs.modal', function () {
google.maps.event.trigger(map, 'resize');
});
Edit:
Here is a complete and working example. As per my comment, you should 1) Trigger a map resize and 2) set the map center to your marker coordinates.
var center = new google.maps.LatLng(59.76522, 18.35002);
function initialize() {
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: center
});
}
$('.launch-map').on('click', function () {
$('#modal').modal({
backdrop: 'static',
keyboard: false
}).on('shown.bs.modal', function () {
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});
});
initialize();
JSFiddle demo

multiple mouse events not triggering

I am using google maps api. I want to have two mouse events ready to trigger at one time. Below is a code snipit.
function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3 }
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
function addLatLng(event) {
var path = poly.getPath();
if(!draw)
{
path.push(event.latLng);
path.push(event.latLng);
draw = true;
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map });
google.maps.event.addListener(map, 'mousemove', moveTrackLine);
}
else
{
path.push(event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map });
draw = false;
}
}
function moveTrackLine(event) {
var path = poly.getPath();
// replace the old point with a new one to update the track
path.pop();
path.push(event.latLng);
}
When I click on the map the first time I see a marker placed on the map. Then when the mouse is moved I see the polyline update and follow my curser correctly. Next if I click on the map I do not see a marker placed on the map nor do I ever go into the addLatLng function. Thanks in advance for your help and time.
-tim
set the clickable-option of the polyline to false.
The issue: As soon as the mousemove-event is applied to the map, you will not be able to click on the map anymore, because below the mouse-cursor is always the polyline.
When you set the clickable-option of the polyline to false, the polyline does not respond to mouse-events and the click-event will be passed to the map.

Invisible style on my Map

I'm using Google Maps For Javascript. I reorganized all options and working true location. But when i add style and marker, I don't see the effects. How can I fix it?
var locations = [
['MyLocation', 41.084951,29.016048],
];
var waStyle = [
{
featureType: "all",
stylers: [
{ saturation: -100 }
]
}
];
var map = new google.maps.StyledMapType(waStyle,{name: "MyLoc"});
var img = new google.maps.MarkerImage("/themes/bc/images/bc_pin.png");
var map = new google.maps.Map(document.getElementById('map_detail'), {
zoom: 10,
center: new google.maps.LatLng(41.084951,29.016048),
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() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Using your code, I see the marker. The style isn't visible because you don't use it on the map.
documentation
To actually use the style (your code with some comments and added code from the documentation referenced above):
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(waStyle,{name: "MyLoc"});
var img = new google.maps.MarkerImage("mapIcons/marker1.png");
// Create a map object, and include the MapTypeId to add
// to the map type control.
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(41.084951,29.016048),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
To use the marker icon you have defined, include it in the google.maps.Marker constructor:
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: img,
map: map
});
Note that if you have more than one marker, you are going to have issues with associating the infoWindow with the marker which can be fixed with function closure (a createMarker function) and is a FAQ.
working example based off your code

How to center and zoom a Google Map using the address bar

I have a page with a Google Map generated. I want to be able to use the address bar to change the zoom and center point. E. g.:
www.example.com/mymap?zoom=10&center=10,15
www.example.com/mymap?zoom=10&lat=10&lng=15
I remember that there was a similar combination that worked, but now I can't get any results with it.
Here is my function:
function initialize() {
// create the map
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(10,15),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(8, 12),
new google.maps.LatLng(12, 18));
var options = {
bounds: defaultBounds
};
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var infowindow = new google.maps.InfoWindow(
{ size: new google.maps.Size(150,50)});
Are you looking for something like this (translated to the Google Maps API v3 from Mike Williams' v2 tutorial):
http://www.geocodezip.com/v3_MW_example_linktothis.html?lat=42.359783&lng=-71.092800&zoom=18&type=h