logo
down
shadow

Google map not correctly center


Google map not correctly center

By : Waqas Ali
Date : November 15 2020, 06:54 AM
I wish did fix the issue. If you want the map to be initialized centered on Paris, use that for the center MapOption (not the center property of a marker).
code :
function initialize() {
    var mapDiv = document.getElementById('map-canvas');
    var mapOptions = {
        center: paris,
        zoom: 8,
        zoomControl: false,
        scrollwheel: false,
        disableDoubleClickZoom: true
    }
    map = new google.maps.Map(mapDiv, mapOptions);
var map;
var paris = new google.maps.LatLng(48.8566667, 2.3509871);
var tunis = new google.maps.LatLng(36.845235, 10.164723);
var hongkong = new google.maps.LatLng(22.298812, 114.172175);



function Tunisie(controlDiv2, map) {

  controlDiv2.style.padding = '5px';

  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = '';
  controlDiv2.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b></b>';
  controlUI.appendChild(controlText);

  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(tunis);
  });

}

function HongKong(controlDiv3, map) {
  controlDiv3.style.padding = '5px';

  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = '';
  controlDiv3.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b></b>';
  controlUI.appendChild(controlText);

  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(hongkong);
  });

}

function Paris(controlDiv, map) {

  controlDiv.style.padding = '5px';

  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = '';
  controlDiv.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b></b>';
  controlUI.appendChild(controlText);
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(paris);
  });

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var mapOptions = {
    center: paris,
    zoom: 8,
    zoomControl: false,
    scrollwheel: false,
    disableDoubleClickZoom: true
  }
  map = new google.maps.Map(mapDiv, mapOptions);


  var tunisieControlDiv = document.createElement('div');
  var tunisieControl = new Tunisie(tunisieControlDiv, map);

  tunisieControlDiv.index = 3;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(tunisieControlDiv);

  var hongkongControlDiv = document.createElement('div');
  var hongkongControl = new HongKong(hongkongControlDiv, map);

  hongkongControlDiv.index = 2;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(hongkongControlDiv);

  var parisControlDiv = document.createElement('div');
  var parisControl = new Paris(parisControlDiv, map);

  parisControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(parisControlDiv);

  var marker2 = new google.maps.Marker({
    position: tunis,
    map: map,
    title: 'Tunis'
  });

  var marker3 = new google.maps.Marker({
    position: hongkong,
    map: map,
    title: 'Hong Kong'
  });

  var marker = new google.maps.Marker({
    position: paris,
    map: map,
    title: 'Paris'
  });

  var infowindow2 = new google.maps.InfoWindow({
    content: "Tunis",
    disableAutoPan: true

  });
  var infowindow3 = new google.maps.InfoWindow({
    content: "Hong Kong",
    disableAutoPan: true

  });
  var infowindow = new google.maps.InfoWindow({
    content: "Paris",
    disableAutoPan: true
  });

  google.maps.event.addListener(marker2, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker2.getPosition());
  });
  google.maps.event.addListener(marker3, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker3.getPosition());
  });
  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });

  infowindow2.open(map, marker2);
  infowindow3.open(map, marker3);
  infowindow.open(map, marker);

}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>


Share : facebook icon twitter icon
Google Maps V3 API map doesn't center correctly

Google Maps V3 API map doesn't center correctly


By : Min Wang
Date : March 29 2020, 07:55 AM
Does that help from today I've been experiencing an issue with Google Maps resulting into not centering maps when I add some IndoBoxes into map. , Have you tried the disableAutoPan option?
code :
 new InfoBox({
        disableAutoPan: true,
        content: "New Town (Nove mesto)",
        position: new google.maps.LatLng(50.084243, 14.424405),
Google 3D Earth How to find the center point from all the markers and set center view

Google 3D Earth How to find the center point from all the markers and set center view


By : Sachin Ahuja
Date : March 29 2020, 07:55 AM
Does that help You need to create a Placemark object using createPlacemark(). You probably don't need to create an array of Placemarks since the google earth API keeps the list of placemarks from which you can iterate using ge.getFeatures().getChildNodes().
code :
for(var i = 0; i < data.length; i++ ) 
{
     // Create the Placemark
     var placemark = ge.createPlacemark('');

     // Set the placemark's location.  
     point[i] = ge.createPoint('');
     point[i].setLatitude( data[i].lat );
     point[i].setLongitude( data[i].lon );       
     placemark.setGeometry(point[i]);

     // Add the placemark to Earth.
     ge.getFeatures().appendChild(placemark);
}
for(var i = 0; i < data.length; i++ ) 
{    
     // Create the Placemark
     var placemark = ge.createPlacemark('');

     // Set the placemark's location.  
     var point = ge.createPoint('');
     point.setLatitude( data[i].lat );
     point.setLongitude( data[i].lon );
     placemark.setGeometry(point);

     // Add the placemark to Earth.
    ge.getFeatures().appendChild(placemark);
}
 function initCB(instance) {
    ge = instance;
    ge.getWindow().setVisibility(true);
    ge.getNavigationControl().setVisibility(ge.VISIBILITY_HIDE);

    var latSum = 0.0;
    var lonSum = 0.0;
    for(var i = 0; i < data.length; i++ ) 
    {
        // Set the placemark's location.  
        var point = ge.createPoint('');
        point.setLatitude( data[i].lat );
        point.setLongitude( data[i].lon );
        latSum += data[i].lat;
        lonSum += data[i].lon;

        var placemark = ge.createPlacemark(data[i].content);
        placemark.setGeometry(point);

        // Add the placemark to Earth.
        ge.getFeatures().appendChild(placemark);
    }

    // Create LookAt at the center view point
    var lookAt = ge.createLookAt('');
    lookAt.set(latSum / data.length, lonSum / data.length, 0,
            ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 20000);
    ge.getView().setAbstractView(lookAt);
  }
How to center align the image in Google chrome which is already center aligned in mozilla firefox?

How to center align the image in Google chrome which is already center aligned in mozilla firefox?


By : Rui Ignácio Jr
Date : March 29 2020, 07:55 AM
should help you out That's the different browser's individual default behaviour for displaying images, as you have linked straight to the image rather than embedding the image in a HTML page.
If you do decide to embed it in a HTML page and link to the page rather than the image, then you have control as to how the image will be displayed.
How to center and rotate SVG circle correctly and center polygon in the center of the circle?

How to center and rotate SVG circle correctly and center polygon in the center of the circle?


By : ester
Date : March 29 2020, 07:55 AM
Does that help
Your canvas is 207px wide and 207px high. The circles are centred at 50% so at 207/2 = 103.5px so that's where you need to do your rotation around.
code :
console.log(document.getElementsByTagName("polygon")[0].getBBox())
body {
  margin: 0;
  background: black;
}

#container {
  background: rgba(0, 155, 255, 0.3);
  padding: 10px;
}

#circle1 {
  
}

#circle2 {
  stroke-dasharray: 20 3 55;
}

#circle3 {
  stroke-dasharray: 22;
}
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" height=207px width=207px stroke="#00bd80" fill="none">
   <circle id="circle1" r="100" cx="50%" cy="50%" stroke-width="7px"/>
   
   <circle id="circle2" r="96" cx="50%" cy="50%" stroke-width="5px">
      <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 103.5 103.5"
                    to="360 103.5 103.5"
                    dur="20s"
                    repeatCount="indefinite"/> <!-- how to center correctly -->
   </circle>
   
   <circle id="circle3" r="80" cx="50%" cy="50%" stroke-width="5px"/>
   <polygon transform="translate(103.5, 103.5) translate(-15, -13)" points="30,15 22.5,28.0 7.5,28.0 0,15 7.5,2.0 22.5,2.0"></polygon>
</svg>
</div>
Google Maps get the center of coordinates (place label at center of polygon)

Google Maps get the center of coordinates (place label at center of polygon)


By : Christian Derr
Date : March 29 2020, 07:55 AM
seems to work fine The following code constructs a google.maps.Polygon and places a MapLabel at the center of its bounds.
Related Posts Related Posts :
  • clearvalidators not working in angular 6 form control
  • Remove Count Attribute in json data
  • queue up function callbacks
  • How to stop all Soundcloud streams in once?
  • Sliding div onclick left/right
  • RequireJS JQuery shim doesnt work with VS2013
  • What is the Meteor concurrency model?
  • Events on children of contenteditable element
  • Simple jquery not working to print the input value
  • Javascript templating language in reverse
  • Making Pagination in Javascript Scalable (for large # of db results)
  • Performance of Stateless Authentication in SPA and SSO (Single Sign On)
  • Assigning a value for view asynchronously
  • Mocha JS: How to reuse assertions within a spec?
  • Is ember.js stable enough to use in a real world project?
  • jQuery Load() not loading within div
  • encode stream from webCam h264
  • Regex to find pattern, return subpattern
  • Why does this regex to remove empty <p></p> tags from a string fail?
  • Rails: pass data to javascript
  • Quickest way to check if a number is in a set?
  • Phonegap events online/offline not working
  • In HTML5, please explain the meaning of '?' in the statement
  • Form to use AJAX rather than a page refresh but also utilise error handling?
  • JQuery Script looping error
  • different size divs align top left
  • Image fade-in when webpage finishes loading
  • Seeking HTML5 audio element causes delay (breaks sync)
  • How can I read & write data to a new tab in Firefox?
  • jQuery or JS turn all words into italic type
  • iOS css -webkit-transform: scale doesn't offset touch events
  • Populate select list using javascript
  • Can you work out why my .js file doesn't seem to be linking to my html?
  • Make slideToggle effect only one element at a time
  • Output sound using JavaScript
  • What is the analytics.js equivalent of _trackPageview found in ga.js
  • How can I check if a JS file has been included already?
  • hasClass and condition not working
  • EDITED: I'm having issues with a button and its function
  • Importing XML in HTML with javascript
  • Create new function in contentScriptFile in Firefox extension
  • Should I build Node.js from source or download the OS X installer?
  • How to enforce integer sizes in JS? (TypeScript?)
  • How to update the JSON object without deleting old values using javascript
  • Reading a javascript variable containing a string into another file
  • Possible to prevent 403 errors from logging to the web console?
  • Jquery Accordion - Expand and collapse div on hover
  • jquery .hide() function - Hide mobile, Display Desktop
  • Holding password in javascript variable - security implications?
  • JQPlot trouble to render vertical stacked bar and horizontal legend
  • counts days inbetween then add class to those days with nested divs?
  • Marionette.js with Rails (Devise) Authentication
  • javascript anonymous function evaluation idiom
  • Why am I losing the decimal when working this equation in Javascript?
  • Site redirects to index.php after being open while making calls to an API using AJAX
  • How to determine when multiple callbacks are all done
  • How to update Yeoman dependencies?
  • How can I do a /resolve with the Soundcloud Javascript SDK?
  • I'm not able to call a named callback function
  • How to get value of Paragraph element contained in <div> in HTML using JavaScript
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org