简体   繁体   中英

Gmap3 replace adress by gps coordinates and responsive mode

I have this code for my gmap3 and I would like to:

  1. Replace my address with GPS coordinates
  2. Put my marker at the center when I resize my page.
$(function(){
    $('#adresse').gmap3({
        marker: {
            address: " Apple CAP 3000 Avenue Eugène Donadeï, 06700 Saint-Laurent Du Var, France"
        },
        map: {
            options: {
                zoom: 17
            }
       }
    });
});

UPDATES

at this time I work on your first point, I replaced the marker line to have lat & long instead of adress but it doesn't work. I did something wrong ?

{marker: { address: " Apple CAP 3000 Avenue Eugène Donadeï, 06700 Saint-Laurent Du Var, France" }, 

by

{marker: { geometry: "lat: 37.4220323, lng: -122.0845109"},

1. Replace my address with GPS coordinates

You can use Geocoding process to convert addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers on a map, or position the map. The Google Maps Geocoding API provides a direct way to access these services via an HTTP request. You can check here the example which uses the Geocoding service through the Google Maps JavaScript API to demonstrate the basic functionality.

A Google Maps Geocoding API request takes the following form:

https://maps.googleapis.com/maps/api/geocode/outputFormat?parameters

where outputFormat may be either of the following values:

  • json (recommended) indicates output in JavaScript Object Notation (JSON); or
  • xml indicates output in XML

To access the Google Maps Geocoding API over HTTP, use:

http://maps.googleapis.com/maps/api/geocode/outputFormat?parameters

2. Put my marker at the center when I resize my page.

You can check on these related SO posts:

Move your map variable into a scope where the event listener can use it. You are creating the map inside your initialize() function and nothing else can use it when created that way.

 var map; //<-- This is now available to both event listeners and the initialize() function function initialize() { var mapOptions = { center: new google.maps.LatLng(40.5472,12.282715), zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); }); 

Hope this helps! :)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM