I am creating javascript web application using google maps. i am trying to create a tool for zoomin and zoomout option.i created two buttons for zoomin and zoomout, now i am trying to activate the tools. while i am using this tool for zoomin and zoomout option then it will zoomin and out operations on map. I am trying this code
<button name="button" value="" type="button" id="zoomin" onclick="document.getElementById('mapviewer').change(); clicked"></button>
<div id="mapviewer">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('mapviewer'),
mapOptions);
map.setOptions({draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function performClick(elemId) {
var elem = document.getElementById(elemId);
if(elem && document.createEvent) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, false);
elem.dispatchEvent(evt);
}
}
</script>
</div>
using this page as reference [blog]: How to add the pan tool within the iframe?
Now i am trying to write a script for zoomin option and if i click the button then the select arrow changed to zoom icon and it will zoom in the google map.Please provide me some code reference for this task
Map Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../include.css" />
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title>Textual Zoom Control (Maps API v3)</title>
<style type="text/css">
html, body { height:100%; width: 100%; }
#map {
float: left;
margin: 0 25px 10px 14px;
width: 64%;
height: 70%;
border: 1px solid gray;
}
#desc {
float: left;
margin: 0 25px 10px 20px;
width: 14em;
}
#zoomcontrol {
position: absolute;
top:172px; left:71%;
}
#media screen and (max-width: 890px) {
body, html, #map {
margin: 0;
}
#map {
width: 100%;
height: 50%;
}
#desc {
margin: 0 14px;
width: 93%;
}
.include >b {
float: right;
margin-top: 17px;
}
#zoomcontrol {
position: absolute;
top: 70%;
left: 41%;
}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.j
s"></script>
<![endif]-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1Wwh21ce7jnB6yDbjVGN3LC5ns7OoOL4&sensor=false">
</script>
<script type="text/javascript">
/* A TextualZoomControl is a GControl that displays
* textual "Zoom In" and "Zoom Out" buttons.
*/
function TextualZoomControl(map) {
/* Creates a one DIV for each of the buttons and places them in a container
* DIV which is returned as our control element. We add the control
* to the map container and return the element for the map class to
* position properly.
*/
var g = google.maps;
var control = document.createElement("div");
control.id = "zoomcontrol";
var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
control.appendChild(zoomInDiv);
zoomInDiv.appendChild(document.createTextNode("Zoom In"));
g.event.addDomListener(zoomInDiv, "click", function() {
map.setZoom(map.getZoom()+1);
});
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
control.appendChild(zoomOutDiv);
zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
g.event.addDomListener(zoomOutDiv, "click", function() {
map.setZoom(map.getZoom()-1);
});
/* Instead of appending it to the map container
* append it to body of the document
*/
document.body.appendChild(control);
return control;
}
// Set the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline";
button.style.color = "#0000cc";
button.style.backgroundColor = "white";
button.style.fontSize = "smaller";
button.style.border = "1px solid gray";
button.style.padding = "2px";
button.style.marginBottom = "3px";
button.style.textAlign = "center";
button.style.width = "6em";
button.style.cursor = "pointer";
}
function loadMap() {
var g = google.maps;
var opts_map = {
zoom: 10,
center: new g.LatLng(53.55486, 9.98989),
disableDefaultUI: true,
scrollwheel: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: g.MapTypeControlStyle.DEFAULT
},
mapTypeId: g.MapTypeId.ROADMAP
};
var map = new g.Map(document.getElementById("map"), opts_map);
// Add self created control
var zoom_control = new TextualZoomControl(map);
zoom_control.index = 1;
}
window.onload = loadMap;
</script>
</head>
<body>
<h3>Textual Zoom Control</h3>
<div id="map"></div>
</body>
</html>
This code will work for zoom in and zoom out tool option using click button
Related
I am using MarkerClustererPlus library in an AngularJS project with ngMap. I attached mouseover and mouseout event to MarkerClusterer object. When mouse is hovered over the cluster I am displaying all individual marker's detail in single InfoWindow of that cluster. Whenever user's mouse is out from cluster I want to hide the InfoWindow. Now the functionality works partially correct. When the mouse is put on the count of cluster, the mouseover and mouseout events are being called consecutively, due to that the InfoWindow get visible/hide and it creates a flickering effect. Am I missing anything in my code to eliminate that flicker?
I am giving you the both examples. On is in plain JavaScript and other is in AngularJs with ngMap. Also attached the video which shows the issue I am facing.
Thanks!
ngMap + MarkerClusterPlus + InfoWindow + MouseOver + MouseOut = InfoWindow Flickering Issue
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Dynamic ngMap demo</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script>
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_
= 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'; //changed image path
</script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markers.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('mapController', function($http, $interval, NgMap) {
var vm = this;
vm.dynMarkers = [];
NgMap.getMap().then(function(map) {
vm.map = map;
for (var i=0; i<1000; i++) {
var latLng = new google.maps.LatLng(markers[i].position[0], markers[i].position[1]);
vm.dynMarkers.push(new google.maps.Marker({position:latLng}));
}
vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'});
google.maps.event.addListener(vm.markerClusterer, 'mouseover', function(cluster) {
vm.map.showInfoWindow('bar', cluster.getCenter());
});
google.maps.event.addListener(vm.markerClusterer, 'mouseout', function() {
vm.map.hideInfoWindow('bar');
});
});
});
</script>
<style>
map, div[map] {display:block; width:600px; height:400px;}
</style>
</head>
<body>
<h1>Marker Cluster</h1>
<hr />
<div ng-controller="mapController as vm">
<ng-map zoom="2" center="[43.6650000, -79.4103000]" style="display:block; width:600px; height:400px;">
<info-window id="bar" max-width="200">
<div ng-non-bindable>
<div id="bodyContent">
<p>
<b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large
sandstone rock formation in the southern part of the
Northern Territory, central Australia.</p>
</div>
</div>
</info-window>
</ng-map>
</div>
</body>
</html>
https://plnkr.co/edit/4Yl8avzyKEgtEYvffIM7?p=preview
https://www.useloom.com/share/0e183dee979e4accb90887ba3d9ba59a
Plain JavaScript + MarkerClusterPlus + InfoWindow + MouseOver + MouseOut = InfoWindow Flickering Issue
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerClustererPlus V3 Example</title>
<style type="text/css">
.photo {
box-shadow : 0 0 10px rgba(0, 0, 0, 0.8);
}
.photo-thumblist {
display : inline-block;
margin : -1px 2px;
padding : 0;
position : relative;
}
.photo-longlist {
background-color : #f1f1f1;
border-top : 1px solid #d1d1d1;
border-bottom : 1px solid #d1d1d1;
height : 75px;
overflow : auto;
padding : 7px 7px;
}
.photo-preview {
background-color : #222222;
height : 150px;
width : 100%;
}
.photo-googlemaps {
background-color : #222222;
border : 1px solid #222222;
height : 300px;
width : 100%;
}
.photo-map {
background-color : #222222;
height : 500px;
width : 100%;
}
.photo-map-overlay {
background-color : rgba(255, 255, 255, 0.8);
display : none;
margin : -501px 0 0 1px;
height : 420px;
overflow : auto;
padding : 40px 50px;
position : absolute;
width : 100%;
}
.photo-map-overlayclose {
display : none;
margin : 0 0 0 10px;
position : absolute;
z-index : 100;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script type="text/javascript">
var marker;
var gm_map;
var markerArray = [];
var address = 'Sweden';
var geocoder = new google.maps.Geocoder();
var infoWindow = new google.maps.InfoWindow();
geocoder.geocode({ 'address': address }, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
// gm_map.setCenter(results[0].geometry.location);
// gm_map.fitBounds(results[0].geometry.bounds);
} else {
alert("Unable to complete the geological setting due to the following error:\n\n" + status);
}
});
function initialize() {
var marker, i;
var clusterMarkers = [
new google.maps.Marker({
position: new google.maps.LatLng(59.381059,13.504026),
map: gm_map,
title:"P1220214 1.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.338683,13.492057),
map: gm_map,
title:"P1220214 2.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.340715,13.49631),
map: gm_map,
title:"P1220214 3.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.327232,13.487384),
map: gm_map,
title:"P1220214 4.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.379034,13.516566),
map: gm_map,
title:"P1220214 5.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328631,13.485688),
map: gm_map,
title:"P1220214 6.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328657,13.485591),
map: gm_map,
title:"P1220214 7.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328501,13.485782),
map: gm_map,
title:"P1220214 8.JPG"
})
]
var options_googlemaps = {
minZoom: 4,
zoom: 18,
center: new google.maps.LatLng(59.328631,13.485688),
maxZoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
gm_map = new google.maps.Map(document.getElementById('google-maps'), options_googlemaps);
var options_markerclusterer = {
gridSize: 20,
maxZoom: 18,
zoomOnClick: false,
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
};
var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);
google.maps.event.addListener(markerCluster, 'mouseover', function(cluster) {
var markers = cluster.getMarkers();
var array = [];
var num = 0;
for(i = 0; i < markers.length; i++) {
num++;
array.push(markers[i].getTitle() + '<br>');
}
if (gm_map.getZoom() <= markerCluster.getMaxZoom()) {
infoWindow.setContent(markers.length + " markers<br>"+array);
infoWindow.setPosition(cluster.getCenter());
infoWindow.open(gm_map);
}
});
google.maps.event.addListener(markerCluster, 'mouseout', function() {
infoWindow.close();
});
for(i = 0; i < clusterMarkers.length; i++) {
var marker = clusterMarkers[i];
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infoWindow.setContent(this.getTitle());
infoWindow.open(gm_map, this);
}
})(marker));
}
}
$(document).ready(function() {
// INITIALIZE GOOGLE MAPS
initialize();
// CLOSE
$('body').on('click', '#close-link', function() {
$('#toggle-photolist').fadeOut();
$('#close-overlay').fadeOut();
});
});
</script>
</head>
<body>
<div class="photo-map-overlayclose" id="close-overlay">
Close
</div>
<div class="photo-map" id="google-maps"></div>
<center class="photo-map-overlay" id="toggle-photolist">
<div id="view-singlephoto"></div>
<div id="view-multiblephotos">
<div class="color-miniheadline paddingbottom-5 paddingleft-5" style="text-align: left;">
The following photos was found in a total of <span id="count-photos">0</span>
</div>
<div style="text-align: left;">
<div id="list-photos"></div>
</div>
</div>
</center>
</body>
</html>
http://jsfiddle.net/2onvfwdy/89/
https://www.useloom.com/share/9927951ace714557a3e8d803c96d073f
Use this while creating infowindow, it will create a little gap between the icon and infowindow
pixelOffset: new google.maps.Size(0, -5)
I made custom zoom controls and want to add Pegman control with the same style as well. Is it possible?
Custom zoom controls are added as follows (from this questions answer):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR-MAP_API-ID&sensor=false®ion=AU">
</script>
<script type="text/javascript">
function HomeControl(controlDiv, map) {
google.maps.event.addDomListener(zoomout, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 0){
map.setZoom(currentZoomLevel - 1);}
});
google.maps.event.addDomListener(zoomin, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 21){
map.setZoom(currentZoomLevel + 1);}
});
}
var map;
var markersArray = [];
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(-33.90224, 151.20215);
var mapOptions = {
zoom: 15,
center: myLatlng,
Marker: true,
panControl: false,
zoomControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="zoomout" style="border:1px solid; width:150px; heoght:50px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
<div id="zoomin" style="border:1px solid; width:150px; heoght:50px;cursor:pointer;">ZOOM ME IN</div>
</body>
</html>
Is it possible to add one more div element in the body with custom Pegman button, but it need to work exactly as it is working in default button (drag and drop yellow man to the map, Pegman is moving on hover etc) only the square button behind him will be another style.
When you only want to style the button, not the pegman, it's quite easy.
The button has the class gm-svpc , simply add your style.
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
streetViewControl: true
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
.gm-svpc {
background: tomato !important;
border: 2px solid firebrick;
border-radius: 20px !important;
}
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
I'm trying to use the Places search functionality of Google Maps API.
My problem is, the search box shifts and the height of the API container changes after the map is completely loaded.
I've made a demonstration of the problem. Try refreshing the page and you'll observe the above mentioned behaviour.
I found similar questions and the suggestions were --
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
or
window.onload = map_initialize;
However, neither of them seem to solve this shift behaviour.
One option would be to set the input to display:none, add it to the map on the idle event, then display it.
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
google.maps.event.addListenerOnce(map, 'idle', function() {
input.style.display = "block";
});
proof of concept fiddle
code snippet:
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
google.maps.event.addListenerOnce(map, 'idle', function() {
input.style.display = "block";
});
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
var icon = {
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.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initAutocomplete);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#target {
width: 345px;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box" style="display:none">
<div id="map"></div>
You can simply use the defer attribute for your <script> tag where you loading the google maps JS api, and a callback function to initialize your map.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google map demo</title>
<style type="text/css">
html,
body,
#map_canvas {
width: 100%;
height: 700px;
margin: 0;
padding: 0;
}
.infowindow * {
font-size: 90%;
margin: 0
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initialize" defer></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
<script type="text/javascript">
function initialize() {
alert("map api loaded");
// initialize map
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(37.422104808, -122.0838851)
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</html>
I'm trying to get each marker to direct to the url when clicked. Markers are dropped sequentially on the map and immediately settle after a brief bouncing animation. However, clicking each marker returns "webpage not found"? I don't see why this is the case since each url was saved in the mapUrl array variable. If an explict url is used, it works i.e
window.location.href = 'www.amazon.com';
But I have multiple markers, so I need the script to read the urls stored in the mapUrl array. This was suggested:
google.maps.event.addListener(marker, 'click', function () {
document.getElementById('goToLocation').innerHTML = 'Will send you to ' + this.url;
});
But the syntax after the equal sign doesn't work i.e. the this.url part.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with <code>setTimeout()</code>
</title>
<style>
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<div id="panel">
<button id="drop" onclick="drop()">Drop Markers</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
</head>
<body onload="initialize()" ;>
<div id="map-canvas"></div>
<script>
var sacramento = new google.maps.LatLng(38.576725, -121.493715);
var neighborhoods = [
new google.maps.LatLng(38.576725, -121.493715),
new google.maps.LatLng(35.011263, -115.473376),
new google.maps.LatLng(33.941820, -118.408466)
];
var markers = [];
var map;
var mapUrl = [
'http://www.google.com',
'http://www.youtube.com',
'http://maps.amazon.com'
];
function initialize() {
var mapOptions = {
zoom: 5,
center: sacramento
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
drop();
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
addMarker(i);
}
}
function addMarker(iterator) {
var marker = new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
url: mapUrl[iterator],
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function () {
window.location.href = markers.mapUrl;
});
google.maps.event.addListener(marker, 'click', toggleBounce);
markers.push(marker);
}
function toggleBounce() {
if (markers.getAnimation() != null) {
markers.setAnimation(null);
} else {
markers.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
</body>
</html>
Your code is a bit confusing, but I think you were pretty close to what you were trying to do.
google.maps.event.addListener(marker, 'click', function () {
window.location.href = markers.mapUrl;;
});
Should be:
google.maps.event.addListener(marker, 'click', function () {
window.location.href = this.url;
});
And since clicking on a marker is redirecting the page, the second click handler that calls toggleBounce is not used/needed. Here's a cleaned up and working version based on what it seemed you're trying to do. Also moved that div from the head to the body and removed the extra import of the maps API.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with 'setTimeout()'
</title>
<style>
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
</head>
<body onload="initialize()" ;>
<div id="map-canvas"></div>
<div id="panel">
<button id="drop" onclick="drop()">Drop Markers</button>
</div>
<script>
var sacramento = new google.maps.LatLng(38.576725, -121.493715);
var neighborhoods = [
new google.maps.LatLng(38.576725, -121.493715),
new google.maps.LatLng(35.011263, -115.473376),
new google.maps.LatLng(33.941820, -118.408466)
];
var markers = [];
var map;
var mapUrl = [
'http://www.google.com',
'http://www.youtube.com',
'http://maps.amazon.com'
];
function initialize() {
var mapOptions = {
zoom: 5,
center: sacramento
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
drop();
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
addMarker(i);
}
}
function addMarker(iterator) {
var marker = new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
url: mapUrl[iterator],
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function () {
window.location.href = this.url;
});
markers.push(marker);
}
</script>
</body>
</html>
How can I implement draggable icons markers using this Google Maps Example
So far I have the code below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places search box</title>
<style>
html, body, #map-canvas {
height: 93%;
width: 90%;
margin: 10px;
padding: 10px
}
#panel {
position: absolute;
top: 1%;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#target {
width: 345px;
}
#shelf{position:absolute; top: 0px; left:980px; height:100%;width:30%; float: right; background:white;opacity:0.7;}
#draggable {position:absolute; top:10px; left:10px; width: 30px; height: 30px;z-index:1000000000;}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
});
</script>
<script type="text/javascript">
var $map;
var $latlng;
var overlay;
// This example adds a search box to a map, using the
// Google Places autocomplete feature. People can enter geographical searches.
// The search box will return a pick list containing
// a mix of places and predicted search terms.
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(37.3333, -121.9000),
new google.maps.LatLng(37.3333, -121.9000));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
// [START region_getplaces]
// 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();
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);
});
// [END region_getplaces]
// 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);
});
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap($map);
}
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="shelf">
<img src="https://cdn1.iconfinder.com/data/icons/lightly-icons/30/location.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
</div>
<div id="map-canvas"></div>
<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>
</body>
</html>
If you load up the code, you will notice that the icon can be dragged only once. Also, when I try to drag the icon ONTO the map, the icon is dragged BEHIND the map and can not be seen. Any suggestions on what I am doing wrong? I have a feeling this piece of code is part of the problem...
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
Let me know.
NOTE: Below is the map that works with a draggable icon, BUT I want to implement this same method onto the search map that I have above. Thus, I am trying to combine the draggable function from the map below onto the search map above that I got from the Google Map Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Demo Map</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
width: 70%;
height: 100%;
}
#shelf{position:absolute; top: 0px; left:980px; height:100%;width:30%; float: right; background:white;opacity:0.7;}
#draggable {position:absolute; top:10px; left:10px; width: 30px; height: 30px;z-index:1000000000;}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
});
</script>
<script type="text/javascript">
var $map;
var $latlng;
var overlay;
function initialize() {
var $latlng = new google.maps.LatLng(37.32758, -121.89246);
var myOptions = {
zoom: 19,
center: $latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT },
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
panControl:false,
};
$map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap($map);
}
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: $map,
draggable:true,
icon: icon
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id='shelf'>
<img src="https://cdn1.iconfinder.com/data/icons/lightly-icons/30/location.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
</div>
</body>
</html>
I'm close but any ideas on what's wrong?
There are 2 tricks to avoid dragging behind the map. On the draggable item use these options:
helper: "clone",
appendTo: "body"
By appending to body, the cloned helper will be the newest item created, and will be on top of the map.