Custom Google Map API V3 PEGMAN Button - javascript

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&region=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>

Related

zoomin and zoomout tool option

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

Draggable Icon Not Showing on top of the Google Map and not Duplicating

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.

need the search box to not refresh the page so the function will load the marker

// html
<!DOCTYPE html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
// load google map
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? key=&sensor=true">
</script>
<script type="text/javascript">
var myLatlng = new google.maps.LatLng(33.319914, 44.304771);
var marker = new google.maps.Marker({map: map, position:myLatlng, title:"Hello World!"});
var map = null;
function initialize()
{
var mapOptions =
{
center: new google.maps.LatLng(33.319914, 44.304771),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// marker.setMap(map);
}
// second map with marker
function initialize2()
{
var mapOptions =
{
center: new google.maps.LatLng(33.319914, 44.304771),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<head>
<body>
<div id="map-canvas"/>
</div>
// button works to load second map
<button onclick="initialize2()">Enter ID</button>
// form will load second map but refreshs page and goes back to first map without marker
<form name="searchbox">
<input type="text" class="searchbox" name="searchterm"/>
<input type="image" src="images/opacbox1.png" class="searchbox_submit" value="Search"" ONCLICK="Javascript:doSearch()" onsubmit="javascript:doSearch()" />
<script type="text/javascript">
function doSearch()
{
searchvalue = document.searchbox.searchterm.value
if (searchvalue == "1")
{
initialize2();
}
else
{
alert("no good");
}
}
</script>
</body>
</html>
// if there is a better way to load markers with the seachbox or button im all ears been trying all day
// css
body
{
}
#map-canvas
{
height: 500px;
width: 500px;
margin: 50px 50px 50px 50px;
}
#searchwrapper
{
width:310px;
height:40px;
background-image:url('images/searchbox6.png');
background-repeat:no-repeat;
padding:0px;
margin:0px;
position:relative;
}
#searchwrapper form
{
display: inline;
}
.searchbox
{
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:9px;
width:256px;
height:28px;
color: #fff;
}
.searchbox_submit
{
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:265px;
width:32px;
height:28px;
}
stop the form from summiting, like this:
$('#upload').submit(function(e){
e.preventDefault();
...
});
Hope this helps :/

Javascript and the Google Maps API

I'm in a spot of bother and my hairline is on the chopping block. When I integrated the maps API on this site, ritaknoetze.com, everything worked perfectly.
However, copying that exact code for a different demo website, scarabpaper, the map doesn't show up at all? Could someone show me the ropes on what I'm doing wrong?
Here's the code I got from Google itself that I modified for my WordPress theme/installation:
JavaScript:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-34.009839, 22.78101);
var myOptions = {
zoom: 9,
center: myLatlng,
navigationControl: true,
mapTypeControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = '<?php bloginfo('template_url')?>/assets/googlemaps_marker.png';
var myLatLng = new google.maps.LatLng(-34.009839, 22.78101);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
</script>
My HTML where the javascript goes:
<div class="contact_container">
<div id="map_canvas"></div>
<div class="clearfloat"></div>
</div>
My CSS for the affected divs
#map_canvas {
width: 880px;
height: 300px;
margin-left: 10px;
margin-bottom: 30px;
margin-top: 10px;
float: left;
border: 1px solid #dedcdc;}
.contact_container { /*container for ALL the contact info*/
background-color: #fff;
border: 1px solid #dedcdc;
width: 900px;
margin-top: 30px;
padding: 20px;
padding-bottom: 0;}
Any Help would be greatly appreciated...
You're never calling the initialize() method. It works if you call that method, even using a console.

Google maps moving marker on click

What I want to do is,
on my map, when I click somewhere on the map, it shows a marker on the point, then I click different point on the map then it shows a another marker. But I want it to move the first marker to the second point.
( I put " behind the html tags for putting the code here.)
This is my code:
<html>
<style type="text/css">
#map_canvas {
height: 760px;
width: 1100px;
position: static;
top: 100px;
left: 200px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(42.55308, 9.140625);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
animation: google.maps.Animation.DROP,
});
map.setCenter(location);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
Every time placemarker() is ran, it creates a new marker.
You need to create the marker once outside of the placemarker function and after that, inside placemarker, use marker.setPosition().
Another solution is to move a marker, for that you just user marker.setPosition(). (thanks kjy112 for the warning :)
<html>
<style type="text/css">
#map_canvas {
height: 760px;
width: 1100px;
position: static;
top: 100px;
left: 200px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var marker;
function initialize() {
var latlng = new google.maps.LatLng(42.55308, 9.140625);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
if (marker == undefined){
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP,
});
}
else{
marker.setPosition(location);
}
map.setCenter(location);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
To remove a marker just setMap(null) it.
<html>
<style type="text/css">
#map_canvas {
height: 760px;
width: 1100px;
position: static;
top: 100px;
left: 200px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var oldMarker;
function initialize() {
var latlng = new google.maps.LatLng(42.55308, 9.140625);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
animation: google.maps.Animation.DROP,
});
if (oldMarker != undefined){
oldMarker.setMap(null);
}
oldMarker = marker;
map.setCenter(location);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>

Categories