google-maps , Google Maps Javascript positioning control maps

Google Maps Javascript positioning control maps


Tag: google-maps

How can I position zoomControl options and panControl positioning next to each other? Thanks in regards..

map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(39.300299, 34.471664),
        zoom: 6,
        disableDefaultUI: true,
        mapTypeControl: true,
        //mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.RIGHT_TOP },
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.LEFT_TOP },
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        panControl: true,
        panControlOptions: { position: google.maps.ControlPosition.LEFT_TOP},
        zoomControl: true,
        zoomControlOptions: { style: google.maps.ZoomControlStyle.BIG, position: google.maps.ControlPosition.LEFT_TOP },
        scaleControl: true,


One option (use the custom pan control from this question):

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(39.300299, 34.471664),
    zoom: 6,
    disableDefaultUI: true,
    mapTypeControl: true,
    //mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.RIGHT_TOP },
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      position: google.maps.ControlPosition.LEFT_TOP
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.TOP_LEFT
                index: -1 */
    scaleControl: true,
    streetViewControl: false
  var PanControl = new geocodezip.web.PanControl(map);
  PanControl.index = 1;

google.maps.event.addDomListener(window, 'load', initialize);

 * @param {string} tagName
 * @param {Object.<string, string>} properties
 * @returns {Node}
function CreateElement(tagName, properties) {
  var elem = document.createElement(tagName);
  for (var prop in properties) {
    if (prop == "style") = properties[prop];
    else if (prop == "class")
      elem.className = properties[prop];
      elem.setAttribute(prop, properties[prop]);
  return elem;

 * @constructor
 * @param {google.maps.Map} map
function PanControl(map) { = map;
  this.originalCenter = map.getCenter();

  var t = this;
  var panContainer = CreateElement("div", {
    'style': "position: relative; padding: 5px;"

  //Pan Controls
  var PanContainer = CreateElement("div", {
    'style': "position: relative; left: 2px; top: 5px; width: 56px; height: 56px; padding: 5px; overflow: hidden;"
  var div = CreateElement("div", {
    'style': "width: 56px; height: 56px; overflow: hidden;"
  div.appendChild(CreateElement("img", {
    'alt': ' ',
    'src': '',
    'style': "position: absolute; left: 0px; top: -1px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"

  div = CreateElement("div", {
    'style': "position: absolute; left: 0px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
    'title': 'Pan left'
  google.maps.event.addDomListener(div, "click", function() {
  div = CreateElement("div", {
    'style': "position: absolute; left: 37px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
    'title': 'Pan right'
  google.maps.event.addDomListener(div, "click", function() {
  div = CreateElement("div", {
    'style': "position: absolute; left: 19px; top: 0px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
    'title': 'Pan up'
  google.maps.event.addDomListener(div, "click", function() {
  div = CreateElement("div", {
    'style': "position: absolute; left: 19px; top: 37px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
    'title': 'Pan down'
  google.maps.event.addDomListener(div, "click", function() {
  div = CreateElement("div", {
    'style': "position: absolute; left: 19px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
    'title': 'Reset center'
  google.maps.event.addDomListener(div, "click", function() {;

  return panContainer;

/** @param {PanDirection} direction */
PanControl.prototype.pan = function(direction) {
  var panDistance = 50;
  if (direction == PanDirection.UP || direction == PanDirection.DOWN) {
    panDistance = Math.round( / 2);, direction == PanDirection.DOWN ? panDistance : -1 * panDistance);
  } else {
    panDistance = Math.round( / 2); == PanDirection.RIGHT ? panDistance : -1 * panDistance, 0);

/** @enum */
var PanDirection = {
  LEFT: 0,
  RIGHT: 1,
  UP: 3,
  DOWN: 4

window["geocodezip"] = window["geocodezip"] || {};
window["geocodezip"]["web"] = window["geocodezip"]["web"] || {};
window["geocodezip"]["web"]["PanControl"] = PanControl;
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
<script src=""></script>
<script src=""></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>


Add or Remove Polygons Based on Zoom Levels

I am trying to add and remove polygons based on the zoom levels in Google Maps. This is what I am using to detect the zoom change in order to add or remove the polygons. google.maps.event.addListener(map, 'zoom_changed', function () { if (map.getZoom() <= 13) { polygons.setMap(null); } else { polygons.setMap(map);...

How to plot data points at particular location in a map in R

I have a dataset that looks like this: LOCALITY numbers 1 Airoli 72 2 Andheri East 286 3 Andheri west 208 4 Arya Nagar 5 5 Asalfa 7 6 Bandra East 36 7 Bandra West 72 I want to plot bubbles (bigger the number bigger would be the bubble) inside...

export KML google map

I use google map APIv3, I create my map with different marker and I create an itinerary everything works. My question is: I want export my itinerary in KML file with javascript, I have make lot of serch but no good answer or tuto found, anyone have solution or export...

GeoGoogle - Google Geocoder Java API

Is still valid this project or it is deprecated ? I got a 404 Error checking the examples

Change the URL of a KML file that Google Maps references on button click

I would like to initially display an 8 Day Average KML file in Google Maps on first page load, but allow the user to click the "1 Day" and "3 Day" button to have Google Maps reference those instead of the "8 Day". The goal is to create a mini...

Google map api load grey map instead of map images

i am having this weird issue with google maps api. I am trying to show map with clickable pins where data is loaded from api. Everything seems to work: data is loaded, pins appear, toggles work... however map is just grey - no map images are loaded. Its draggable, markup...

Update markers on google maps on new wikimapia place request

I am newbie in android development and working on android application in which i am using google maps along with wikimapia request api. I am showing some buttons on the screen lets say Police, Hospital, Metro. When i click on the button let say "Police" it sends wikimapia request and...

Google Maps v2 for Android map tiles overlapping

I use custom UrlTileProvider to load tiles from MapBox. public class MapboxTileProvider extends UrlTileProvider { public MapboxTileProvider(int width, int height) { super(width, height); } @Override public URL getTileUrl(int x, int y, int z) { try { return new URL(String.format(MAP_BASE_URL, z, x, y)); } catch (MalformedURLException e) { throw new RuntimeException("Failed...

how to use geocoder class to retrieve latitude and longitude through ajax

the json array which contains the list of addresses [ { "id": 0, "title": "Coop.Sociale Prassi e Ricerca Onlus", "latitude": 0, "longitude": 0, "address": "Viale Eleonora D'Arborea 12, Roma, IT" }, { "id": 0, "title": "San Lorenzo", "latitude": 0, "longitude": 0, "address": "Viale della Primavera 330, Roma, IT" },...

How to generate a component multiple times in JSF?

I need to highlight the boundary of a country, for which I am using GMaps4JSF aimed at integrating Google maps with JSF. To draw polygon and polylines, the library provides polygonComponent polylineComponent components. I have loaded the data points from the fusion tables into our own DB. <m:map width="1000px" height="500px">...

Load Google Maps in a tab when tab is picked, and not from begining

I have a TabLayout with 2 tabs. First tab ( Main tab ) is a list of store in a listview Second tab is the same list in a Google Maps. I noticed that When I go by default in the first tab ( list ), the GPS icon appears...

Touch events for google maps on mobile

In my app I am using google maps and I am creating locations on the maps once the user right clicks. I have this event doing the trick for me google.maps.event.addListener(map, 'rightclick', function (e) { if (checkDistance(e.latLng)) { if (viewModel.haveRolesToDoStuffOnProjectLevel()) { geocoder.geocode({ location: e.latLng }, function (result) { if (result.length...

Using maps on api 21+ inside of tab

I am just working on an application trying to learn a lot of the newer technology with API 21 / API 22. I am relatively new to android In general, but just want to make sure I am doing everything the up to date way. In my app I have...

Google Maps adding marker from ajax using jquery

I am trying to add google maps to my web page, the web page has div with id of radar with width specified. I get coordinates from a second page using jquery ajax method, and plot them on the map using Marker. But only the last marker is displayed nothing...

Cannot get the my location dot for Google Maps iOS SDK

Currently, I am not able to get my location in the app I am developing. Basically, in the documentation for Google Maps iOS SDK, Google mentions that you can: enable the blue "My Location" dot and compass direction by setting myLocationEnabled on GMSMapView However, when I do that, the...

Google map infowindow position

Here is a sample google map with three polygons. I am setting the infowindow for each polygon as, for (var i in coordinates) { arr = []; for (var j=0; j < coordinates[i].length; j++) { arr.push( new google.maps.LatLng( parseFloat(coordinates[i][j][0]), parseFloat(coordinates[i][j][1]) )); bounds.extend(arr[arr.length-1]) } // Construct the polygon. polygons.push(new google.maps.Polygon({ paths:...

Add Marker in Angular-Google-Maps

I'm currently having some trouble adding a marker on click to Google Maps. I'm using . Here is my code: HTML: <ui-gmap-google-map center='' zoom='map.zoom' events=""> <ui-gmap-marker coords="map.marker.coords" idKey=""></ui-gmap-marker> </ui-gmap-google-map> And there is my JS: $ = { center: { latitude: alat.value, longitude: alon.value }, zoom: 15, streetViewControl: false, events:...

Use Google Map V3 API ClientID in Application with no URL

Need to get Google Map V3 API work in my application with purchased ClientID. The application is using WebBrowser Control to load html into documentText and the Url is 'about:blank'. The problem is I can't put about:blank into authorized URLs list in google map console. Also I can't host html...

Accessing Coordinates in Nested JSON File

I'm trying to access lat/lng of polygons within a nested JSON file and trying to draw them using new google.maps.Polygon(), but having some troubles. UPDATE-2: I am able to draw polygons, but it only draws the first polygon, not all 3: UPDATE: Check out my latest JSFiddle here:

Uncaught error: Invalid type for google table column

I recently started using google visualization due to its simplicity. But while implementing in my recent project i seem to have run into a bit of trouble. The program shown is used to pull data from a JSON object and utilize it to display data in the google tables. Now...

google maps refresh without displaying gray

I am using the Google Maps API v3 in javascript, and I am constantly reloading the map with an app.get, and adding layers and bookmarks using mongodb. To erase everything I reload the map, and while it's loading a gray background displays in the div that contains the map. What...

Google maps styled marker z-index change not working

In this page I am trying to bring a clicked (styled) marker (or one selected using the vorige/volgende - previous/next - buttons) to the top by setting zIndex to google.maps.Marker.MAX_ZINDEX + 1 (and restoring zIndex to the previous value upon another marker being clicked) using this.styleIcon.set('zIndex', google.maps.Marker.MAX_ZINDEX + 1); in...

Retrive geolocation in real time (HTML5)

I have this code: var map; var geocoder; function initialize() { var mapOptions = { zoom: 18 }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Try HTML5 geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({ position: pos, map: map, title: 'Posizione Attuale' });...

How to integrate SQLite with AngularJS?

I'm doing an angularjs app using google maps api v3 and a plugin called ng-map. But I want to store some coordinates in a SQLite database and then retrieve from the app.

Google Map Direction using comgooglemaps

I am using google map directions I am trying that code but it doesn't work if ([[UIApplication sharedApplication] canOpenURL: [NSURL URLWithString:@"comgooglemaps://"]]) { [[UIApplication sharedApplication] openURL: [NSURL URLWithString:@"comgooglemaps://?center=40.765819,-73.975866&zoom=14&views=traffic"]]; } else { NSLog(@"Can't use comgooglemaps://"); } There is always message that "Can't use comgooglemaps:// Is There any additional setting to use this....

Raty Star rating in Google map infowindow

I have added marker on google map with some search results. var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i < locations.length; i++) { var contentString="";var image_path1=""; contentString += '<div class="browse-map-venue" style="padding:5px;width: 230px;">'; contentString += '<div class="rating" style="float: right; padding-right: 10px;">'; contentString += '<script type="text/javascript" src="<?php...

Google Maps Error - Android app ¦¦ v2

I'm trying to add a map to my layout on an android app but I get the below code: 06-16 20:51:06.142 17581-17581/wk.gon250.dublinbike E/AndroidRuntime﹕ FATAL EXCEPTION: main java.lang.RuntimeException: Unable to start activity ComponentInfo{wk.gon250.dublinbike/wk.gon250.dublinbike.StationDetailsActivity}: android.view.InflateException: Binary XML file line #16: Error inflating class fragment at at...

mapFragment.getMapAsync(this) - NullPointerException

I am using version of Google Maps services. When trying to call the below I get java.lang.NullPointerException: Attempt to invoke virtual method 'void' on a null object reference. @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { SupportMapFragment mapFragment = (SupportMapFragment) getActivity().getSupportFragmentManager()...

R stops displaying maps

Few days ago I was familiarizing myself with displaying maps, plotting points on the map from Today, I have intermittent success in displaying maps. library(ggmap) map <- qmap('Anaheim', zoom = 10, maptype = 'roadmap') Outputs Map from URL : And when I go to the URL...

Using variables for longitude and latitude with google maps api

I've just started using the google maps API for browsers but I can't seem to get it to work when I place variables in the longitude/latitude places instead of numbers directly. I need the maps to populate from the value of two input elements. It doesn't work with variables but...

Google map infowindow position on custom marker

I'm not using the Markers in Google Maps because I wish to render custom text and images on my marker, so what I did is a custom marker using Overlays. The Overlay position is not exactly like the marker so I played a bit with it and now it is...

Dynamically change Google Maps icon by type in array data

I am completely new to javascript and have been tasked with converting an old jvector map to the google maps API. I think i'm doing pretty well so far! I've managed to get the map to populate with all the right markers in all the assigned spots, with nice shiny...

Initializing google map depending on form results

So I have a form with just a select field. Depending on what the user selected markers will get rendered through AJAX on the map. The thing is how to initialize the function and create the map. I just found that people are doing it this way: google.maps.event.addDomListener(window, 'load', initialize);...

How do i add a marker on maps in android programming

So for some reason when i try adding a marker to a geopoint, the marker fails to show up at the given location. I tried researching what could be the problem but for some reason my code seems to follow everything that i researched on. Can someone guide me in...

SVG Marker on Google Maps Not Appearing

When I copy Google's example code for SVG markers, everything works fine, but when I create my own SVG marker in Inkscape, the icon doesn't appear. var walkIcon = { path: 'm 375.65048,522.72658 c 1.40058,1.33792 3.38088,2.4914 3.58389,4.62022 0.33282,1.7212 1.62154,3.13596 3.271,3.67594 1.03889,0.25403 1.6602,2.07967 0.0883,1.75669 -1.5495,-0.2461 -2.78641,-1.31821 -4.00567,-2.21914 -0.57041,-1.04216 -2.10653,-2.1964 -2.20994,-0.258 -0.60169,1.67286...

How to permanently change behavior of markers for app?

I want to make it so that when a user creates a marker in google maps, it is able to be double clicked (or held on or something) and bring up a new Activity. Right now I have it so that I create a marker on the map manually and...

mouse over of lower z-index is called even when its hidden behind the more z-index element

I've divs overlayed on google maps which have 2 views 1) normal view 2) enlarged view on hover normal view is shown at: (unable to attach image inline ) When I hover on element1 it enlarges its view and I've set its z-index to high but another element which...

Android Google Maps is blank in release mode

The normal solution to this posted problem is that the SHA1 key is different for the release version and needs to be changed on the google developer console. I updated it and cannot get it to work. My Google Maps API_KEY currently allows any android application in (the Android applications...


Basically I am trying to implement a PLACE_PICKER for Android and I am getting this confusing error here: int PLACE_PICKER_REQUEST = 1; PlacePicker.IntentBuilder builder = new PlacePicker.IntentBuilder(); Context context = getApplicationContext(); startActivityForResult(, PLACE_PICKER_REQUEST); The error is coming in line 4:" (, " and I have no idea why, I am...

Google map get center does not return valid longitude

I am working with google map.i am facing issue When I have dragged the map to reach to the -180 longitude, after dragging so far to the left side. If I click on "Get center" button it is giving wrong longitude. var map; function initialize() { var mapOpt = {...

Creating a text input field precisely where a user clicks on a Google Map

Right now I have a Google Map which places a mapLabel that says "Hello!" wherever a user clicks (and binds it to that Lat/Long) This is done simply by google.maps.event.addListener(map, 'click', function(e) { placeLabel(e.latLng, map); }); and function placeLabel(position, map) { var mapLabel = new MapLabel({ text: 'Hello!', position: position,...

ACF Multiple Map Markers

I'm using Advanced Custom Fields and want to pull in the field called 'location' to display some locations on a map. How would i adjust the following code to display multiple markers from my location field? The format of the custom field is like so: echo 'Location: ' . get_field('location');...

How to implement centered marker in Google Maps API v3 with Ionic & Angular

I have created a map in my Ionic project using Maps API v3 and ngCordova to get my current location and with the following code: var options = {timeout: 10000, enablehighAccuracy: false}; $cordovaGeolocation.getCurrentPosition(options) .then(function (position) { var myLat = position.coords.latitude; var myLong = position.coords.longitude; console.log(myLat, myLong); var center = new...

New Google Maps query string syntax for a marker

In my web page code, I used to have a link to open a new window with Google Maps initialized like this:{{lat}},{{long}}&z=14 and it was showing a marker. With the new google maps, this syntax does not work completely, as the zoom level is not taken into account. So...

how can i plot a route map?

I am writing a simple application to plot multiple marker in the google map and connect it thought a path as it looks like a route . I can plot multiple marker . and search some article which plot the route map . but i can not plot it ....

Create a unique URL for linking to data pulled from a database [closed]

Is it possible to create a unique URL to link to information that is called and displayed from a database? [I am struggling to articulate this question, so any suggestions for revising it are welcome.] Specifics: I have a page that includes an embedded map and related information about each...

Android Studio: cannot upgrade google play services

I have tried download the latest version on the sdk manager, but is still not working. I have seen other posts telling users to enter the following... compile '' I do not understand where to enter it. I tried in the terminal feature of the android studio but it gives...

Reverse GeoCoordinate Class gives Location Not found error

i m using google Reverse Geocoding API in my app, i m succussfully able to get get coordinate using google geolocation API. Now i m trying to get Location Name from Reverse Geocoding API , but always returns Location not found error here is my code: Geocoder geocoder= new Geocoder(MainActivity.this,...

Google geocoding viewports

Does the viewports in the Google geocoding represents the boundary boxes of the location ? Iam trying to use google viewports of particular city or location to search for the latitude and longitude values that fall in those bounding values. I have two tables called tblproperty and tblemailalerts, tblproperty has...

stuck making a data frame after using street2coordinates (R)

I am trying to follow the tutorial outlined here but having trouble But I am running into a problem at this step: my_crime <- data.frame(year=my_crime$Year, community=my_crime$Community.Area, type=my_crime$Primary.Type, arrest=my_crime$Arrest, latitude=my_crime$Latitude, longitude=my_crime$Longitude) My equivalent step is: geocode <- data.frame(latitude=geocode$lat, longitude=geocode$long) I get the following error: Error in geocode$lat : $ operator is...